초보 개발자의 성장 일기

가계부 웹을 만들던 도중 수입 금액을 리코일로 전역 상태저장하고 기본값을 0으로 한 후 input에 onChange로 값을 넣어주었다. onChange={(e)=> handleChangeImportAmountValue(e)} const handleChangeImportAmountValue = (e:React.ChangeEvent) => { importAmountValue(e.target.value) } 이벤트를 넣어주고 이벤트에 맞는 타입을 지정해주고 값을 변경하려니 타입 에러가 났다. 'string' 형식의 인수는 'number | ((currVal: number) => number)' 형식의 매개 변수에 할당될 수 없습니다. 라고 뜨는 것이다. 상태의 기본값이 0이라 타입은 0으로 추론이 되어있을것인..

사이즈 별로 div 컴포넌트를 만들었고, "medium"을 props로 넣어주면 설정해준 width, height가 나오는데 props를 지정하면 컴포넌트에 에러가 났다. '{ children: Element; size: string; }' 형식은 'IntrinsicAttributes & Size' 형식에 할당할 수 없습니다. 'IntrinsicAttributes & { size: Size; }' 형식에 'children' 속성이 없습니다. return ( // 에러 ); } Container에는 아래와 같이 컴포넌트를 만들었다. import { StyledContainer } from '@/src/components/Home/Container/Container.styles'; type Size = 's..

프로젝트할 때 상대경로를 사용하면 depth의 깊이가 깊어질 때 ../../ 가 많아져 코드가 길어지고, 경로를 파악하기에도 불편했다. 리팩토링할 때, 유지보수할 때도 관리하기 불편함이 생겨 절대경로를 사용하였다. 적용 방법 타입스크립트를 사용한 프로젝트에서는 tsconfig.json 파일에서 수정한다. "compilerOptions"에 코드를 추가하면 바로 절대경로 코드 사용이 가능하다. { "compilerOptions": { /* 절대경로 추가 코드 */ "baseUrl": ".", // 기본 경로 "paths": { "@/*": ["*"] // "기본 경로를 대체할 문자/입력할 경로": ["실제 경로"] }, /* --- */ "target": "ES2020", "useDefineForClassF..

타입을 작성할 때 한가지만 작성하는 경우도 있지만, 보통은 |을 사용해서 다양한 타입을 지정할 수도 있다. type A = string | number; // 넓은 타입 type B = string; // 좁은 타입 type C = string & number; // 제일 좁은 타입 |을 사용하면 또는 이라는 의미로 사용한 모든 타입이 가능하고 넓은 타입이다. 타입을 하나만 작성한 경우는 |을 사용한 경우보다는 좁은 타입이고, &를 사용하면 둘다 가능해야 하므로 제일 좁은 타입이 된다. 타입의 너비는 A > B > C 순이고 좁은 타입에서 넓은 타입으로 대입이 가능하다. 타입을 보고 좁은 타입인지 넓은 타입인지 구분할 수 있어야 한다. type A = { name: string }; type B = { ..

매개변수에 number 타입과 string타입이 들어오게 되는데, number가 들어올 경우 소수점 한자리까지만 남기려고 한다. function numOrStr(a: number | string) { a.toFixed(1); } 하지만 타입스크립트는 모든 경우를 고려하기 때문에 string이 매개변수로 들어올 경우 toFixed를 사용할 수 없어 오류가 난다. as를 사용해서 매개변수 a를 강제로 타입을 지정해주는 방법이 있다. function numOrStr(a: number | string) { (a as number).toFixed(1); } 하지만 이렇게 하면 a가 숫자라고 단정을 짓는것이기 때문에 위험한 코드이다. 다른 개발자가 틀린 코드를 작성했을 때만 사용하는것이 좋다. 이 경우는 타입 가드..

타입스크립트는 자동으로 타입을 추론도 가능하다. const a:string = '5'; a에 타입을 지정해주면 a는 원래 문자열 5의 값이지만 a는 string의 타입을 갖게 된다. 타입은 최대한 정확하게 하는것이 중요하다. 이 경우에는 정확한 5의 값에서 더 넓은 타입인 문자열로 넓혀버린 것이다. const a = '5'; 타입스크립트의 추론을 먼저 확인하고 틀렸을 때 타입을 명시해준다. function add(x: number, y: number) {return x + y}; const result = add(1, 2); 매개변수에 타입을 지정해주면 return의 타입을 생략해도 추론이 가능하다. 튜플을 사용할 때 const arr3 = [123, 456, 'hello']; 타입 지정을 없애면 con..

일반 함수 function add(x: number, y: number): number { return x + y } 매개변수에 각각 타입을 지정해주고 리턴값에도 타입을 지정하려면 매개변수 뒤에 : 타입을 지정해준다. function add(x: number, y: number): number; //타입 function add(x, y) { // 실제코드 return x + y; } 같은함수가 같이 선언되어있으면 오류가 나지만 앞의 함수가 타입만 선언이 되어 있으면 오류가 나지 않는다. 화살표 함수 const add: (x: number, y: number) => number = (x, y) => x + y; 화살표 함수는 변수 명 뒤에 :를 작성해주고 리턴 값에 타입을 지정하려면 화살표(=>) 뒤에 타..