👩🏻💻 Learn
graphql codegen
graphql 에서 제공하는 뮤테이션과 쿼리의 타입을 자동으로 생성해주기 위한 코드젠 설치하기!
yarn add @graphql-codegen/cli
yarn add @graphql-codegen/typescript
codegen.yaml 파일 생성 후
schema: http://my-graphql-api.com/graphql
documents: './src/*/.tsx'
generates:
./graphql/generated.ts:
plugins:
- typescript
- typescript-operations
- typescript-react-query
config:
fetcher: fetch
붙여넣기 후 사용할 것만 남기고 수정
.json 파일 script 부분에 "generate": "graphql-codegen" 추가 후
터미널에 yarn generate 입력하면 yaml 파일에 입력한 대로 원하는 graphqlq의 타입이 자동으로 생성된다.
- cli란? command line interface의 축약으로 명령어를 말한다
설정파일
.js 자바스크립트 객체 형태
.json key: value 형태, 중괄호로 자식과 형제 구분
.yaml/yml 띄어쓰기를 기준으로 자식과 형제 구분
코드 린터
문법에 대한 규칙을 정함 ex. import 순서, ==금지, ===허용
문법 규칙을 위한 eslint 설치하기
yarn add eslint --dev
npx eslint --init
npx eslint . eslint 규칙 에러 확인
(명령어 오류시 npx eslint "**/*.{ts,tsx}" 로 실행)
코트 포멧터
띄어쓰기 2칸, n줄이 넘으면 줄바꿈 등 정렬 관련
eslint에서 요구하는 띄어쓰기, 쿼테이션 등을 맡겨줄 prettier 설치하기
yarn add --dev --exact prettier
echo {}> .prettierrc.json
eslint 설치 후
prettier 설치 후
yarn add --dev eslint-config-prettier 설치
eslintrc.* 파일에 있는 extends 에 "prettier" 입력
📝 Review
격리 해제 후 일주일 만에 학원을 갔다. 역시... 현강이 최고야 오가는 길은 힘들지만 직접 현장에서 듣고 다른 사람들이랑 같이 공부하는 게 훨씬 더 효율적인 것 같다.
오늘은 정신없이 설치를 하면서 보냈다. 아직 타입스크립트는 헷갈리고 어렵지만 계속해서 보다보니 감이 온다. 타입스크립트를 한 번 쓰기 시작하면 너무 편해서 자바스크립트보다 훨씬 많이 쓴다고 하는데... 나도 그런 말이 왔으면...
만들어둔 게시판 코드도 깔끔하게 정리하고 타입값도 다 주는 것만으로도 시간이 훌쩍 갔다. 손목이 또 말썽이라 큰일이다. 왼손 쓰는 법을 익혀둬야 하나 싶은 오늘...
이번주 게시판에서 만들 부분은 댓글창! 등록, 수정, 페치까지 다 있어서 그동안 배웠던 걸 총동원해야 한다. 고민되는 건 상세보기 페이지에 댓글 페이지를 이어서 쓸 건지, 컴포넌트를 따로 만들어서 붙여올 건지가 고민이다.
컴포넌트를 따로 만들어서 붙여온다고 하면 프레젠터를 어떤 식으로 적어넣어야 하는지 감이 좀 안 잡힌다. 멘토님도 한 페이지에 만들어도 보고 나눠서 만들어도 보라고 하셔서 정말 다 해봐야하나싶다.
🔥 Will
- 하원하기 전에 깃헙 잔디 심기
- 하원하기 전에 TIL 쓰기
- 주말동안 이번주에 배웠던 부분 개념 정리 하기
- 댓글창 완성하기
