코드 캠프 10일차) TS로 갈아엎기 전에 이것부터 알자

이번 주 목차

1. Event-Bubbling / Event-Delegation
2. Library
3. Layout
4. Pagination / Infinite-Scroll
5. Lifting-State-Up

추석 연휴로 아직 한 과정이 남았다.. 타입스크립트..!!

오늘의 목차

1. GraphQL-codegen
2. Utility-Type
3. Eslint / Prettier

dev-dependencies 는 개발 & vscode 전용

TypeScript

JSX 파일은 .js 확장자로 만들어도 괜찮지만, .tsx 파일은 .ts 확장자로 만들면 안된다.

타입스크립트 함수의 타입 지정에서 input에서 얻어오는 event 타입 지정은 리액트 개발자들이 따로 만들어둔 ChangeEvent와 같은 것들이 있다.

인풋을 객체로 받아서 인터페이스에서 ChangeEvent 일일히 다 안달아도 돼서 마음이 편안해진다..

타입스크립트에서 타입들을 저장한 파일을 따로 만들어서 보관한 다음 import로 불러와 쓰는 것이 관심사 분리와 유지 보수 측면에서 좋을 것 같다.
ex) 파일명.types.ts

??? : 서버에서 받아온 데이터들 타입 interface로 전부 정리해놔~
응~ graphQL codegen 쓸 거야~

codegen과 현재 디렉토리를 연결하기 위해 codegen을 설치한 후 디렉토리 최상단에 codegen.yaml을 만들어준다.

.yaml 파일은 .json 파일과 같은 설정 파일인데, 차이점이라고 하면 부모 자식의 구분을 띄어쓰기 개수로 판단한다.

Utility Type?
외부에서 받아온 api의 타입을 걸러주는 작업을 도와주는 타입이다.
예시로 Pick이 있는데, Pick은 많은 타입들 중에 하나를 골라서 쓸 수 있게 해준다.

---

일단 any로 해놓고 나중에 바꿔야징~ 따윈 집어치우자