일단 Doit

Recoil에서 atom은 상태(state)를 나타내고 이렇나 atom을 관리합니다. 그럼 동일한 atom을 여러개 생성하고자 하면 어떻게 할까요? 그때 atomFamily를 사용합니다. atom은 key에 따라서 상태가 관리됩니다. 즉, key 변경된다면 동일한 atom도 다른 상태값을 가지게 됩니다. atomFamily를 이러한 key를 전달하여 atom을 생성할 수 있습니다. 예를 들면, InfiniteScroill과 같은 component에서는 component마다 page 번호, 도달여부(hasMore)를 가지고 있게 됩니다. 먼저, 아래와 같은 atom을 생성할 수 있습니다. interface ScrollInfo { page: number; hasMore: boolean; } atom({ ke..

React/Recoil 2023. 3. 8. 16:09

javascript에서 object 요소를 가져올때 for in loop를 많이 사용하는데, typescript에서는 해당 문법에서 eslint type 오류가 발생합니다. key, value 타입 정의가 없어서 그런데요, type을 [key:string]:unkown으로 설정하는 방법도 있겠지만, 그보다는, javascript Object 문법을 사용하면 type정의 필요없이 구현이 가능합니다. Object.entries() Object.entries() 메서드는 for...in와 같은 순서로 주어진 객체 자체의 enumerable 속성 [key, value] 쌍의 배열을 반환합니다. Object.assign() Object.assign() 메서드는 출처 객체들의 모든 열거 가능한 자체 속성을 복사해 ..

Typescript 2023. 2. 18. 11:36

Typescript 에서 props를 전달 받는 함수를 정의할 때 아래와 같이 사용합니다. export interface IAlert { title?: string; content?: string; showAlert(title: string): void; } 이때 아래와 같은 warning 혹은 error가 발생합니다. 해당내용은 title이랑 변수가 사용되지 않았다는 것인데, interface정의라 사용할 이유가 없으므로, 특정 패턴으로 무시하는 eslint rule을 적용하면 해결 됩니다. eslintrc.js rules: { '@typescript-eslint/no-unused-vars': ['warn', { argsIgnorePattern: '^_' }], ... }

Typescript 2023. 2. 18. 11:33

Typescript에서 객체 타입을 만드는 방법 중에 type과 interface가 있습니다. 사용방법이나 사용 이유가 거의 비슷한데요. 많은 프로젝트에서 2가지 방법중에 고민하는 경우가 많이 있습니다. 간략하게 비교해보면 아래와 같습니다. type과 interface의 유사한 기능 1. 선언 type BirdType = { wings: 2; }; interface BirdInterface { wings: 2; } const bird1: BirdType = { wings: 2 }; const bird2: BirdInterface = { wings: 2 }; 2. 확장 - type은 & 사용 - interface는 extends를 사용하여 확장 type Robin = { nocturnal: false } ..

Typescript 2023. 1. 26. 16:20

적용 단계는 다음과 같습니다. 1. tsconfig.json추가 하여 typescript 설정 2. 라이브러리 type 설치 3. eslint 설정 1. tsconfig.jon 추가 : 기존 jsconfig.jscon 파일이 있다면 삭제 { "compilerOptions": { "target": "es6", "lib": [ "dom", "dom.iterable", "esnext" ], "incremental": true, "allowJs": true, "skipLibCheck": true, "esModuleInterop": true, "allowSyntheticDefaultImports": true, "strict": true, "forceConsistentCasingInFileNames": true, ..

React/typescript 2023. 1. 21. 18:24