노력이 좋아서
<step89>'react_ts_counter, ReducerSample'
1) Counter.tsx import React, { useState } from 'react'; const Counter = () => { const [ count, setCount ] = useState(0); const onIncrease = () => setCount(count+1); const onDecrease = () => setCount(count-1); return ( {count} +1 -1 ); }; export default Counter; 2) Counter_Reduce.tsx import React, { useReducer } from 'react'; // 액션타입과 리듀서 함수 생성 // 액션을 | 로 연달아서 쭉 나열함 type Action = { type: 'INCREAS..
<step88>'react_typescript_interface, keyof, Generic'
1) typescript 적용 npx create-react-app ts-react-tutorial --template typescript src/ Counter.tsx import React, { useState } from 'react'; const Counter = () => { const [ count, setCount ] = useState(0); const onIncrease = () => setCount(count+1); const onDecrease = () => setCount(count-1); return ( {count} +1 -1 ); }; export default Counter; MyForm.tsx import React, { useState } from 'react'; cons..
<step88>'react_typescript_interface, keyof, Generic'
1) ex07_interfacefun.ts interface IUser10 { name: string } interface IGetUser { (name: string): IUser10 } const getUser: IGetUser = function(n) { let user: IUser10 = { name: n } return user; } let result2 = getUser('green'); console.log(result2); // 함수 선언부 function add(a: string, b: string) : string; function add(a: number, b: number) : number; // 함수 구현부 function add(a: any, b: any): any { retur..
<step88>'react_typescript_유니언, 인터섹션, 타입추론, 타입단언'
1) // 유니언 타입 2개 이상의 타입을 허용하는 경우 유니언 타입이라고 함 // | 타입구분 () 선택사항 let unionVar : (string | number) = 'green'; // 인터섹션 // &를 사용해 2개 이상의 타입을 조합하는 경우 인터섹션이라고 합니다. interface IUser { name: string, age: number } interface IValidation { isValid: boolean } const neo: IUser & IValidation = { name: "Neo", age: 30, isValid: true } // 타입 추론 // 명시적으로 타입선언이 되어 있지 않은 경우, 타입스크립트는 타입을 추론해서 제공함. // 1) 초기화된 변수 let num..
<step88>'react_typescript_Tuple, Enum'
1) ex05_tupleenum.ts let tuple1: [string, number] = ["green", 20]; let users: [number, string, boolean][]; users = [[1,'Neo',true],[2,'Evan',false],[3,'Lewis',true]]; enum Week { Sun, Mon, Tue, Wed, Thu, Fri, Sat } console.log(Week); console.log(Week.Sun); // 0 console.log(Week[0]); // Sun enum Color { Red = 'red', Green = 'green', Blue = 'blue' } console.log(Color); console.log(Color['Red']); c..
<step87>'react_typescript'
1) typescript => javascript app.ts => tsc app.ts => app.js npm install -g typescript npm init tsc hello.ts --target es6 tsconfig.json { // 포함되어질 파일을 지정 "include": ["src/**/*.ts"], // 노드패키지는 컴파일 대상에서 제외 "exclude": [ "node_modules" ], // 타입스크립트 컴파일러에 대한 옵션지정 "compilerOptions": { // 모듈에 대한 옵션 "module":"es6", // 모듈의 루트가 되는 폴더 "rootDir":"src", // 컴파일된 파일들의 최상위 폴더 "outDir":"dist", // 자바스크립트 구문 지정 "tar..
<step86>'redux(react)_프로젝트_마무리'
client https://wannasee-project-client-olive.vercel.app/ React App wannasee-project-client-olive.vercel.app server https://wannasee-server-zoaseo.herokuapp.com/genre