Strict mode
타입 스크립트의 엄격한 적용.
예를들어 props로 전달하는 인자에 interface를 통해 어떤 타입인지를 설정해줘야 하는 것을 말한다.
이전 TIL에 적었던 '타입추론'이 적용되게 두지 않고 직접 적어줌으로써 혹여나 잘못될 수 있는 타입추론을 막고 협업시에도 혼선이 일지 않도록 해주는 것.
TS에서는 받는 쪽이 중심이되므로 받는 쪽에서 interface안에 두개의 인자가 있다면 주는 쪽에서도 두개의 인자를 반드시 넘겨줘야 에러가 발생하지 않는다.
GQL-codegen
API로 받아오는 데이터의 타입을 자동으로 설정해주는 도구
yarn add -D @graphql-codegen/cli로 터미널에서 설치해줄 수 있으며 'codegen.yml'이름으로 설정 파일을 생성해줘야 한다. -이는 codegen.yaml과 동일하다-
설치와 설정파일의 생성이 완료되었다면
yarn generate를 통해 types.js에 자동으로 설정 파일이 받아진다.
! gql에서는 타입을 설정할 때 String 등 대문자로 시작하지만 TS에서 타입 설정 시 string 처럼 소문자로 시작하기 때문에 주의할 것.
types.js에 설정이 되어있으므로 import시 from types에서 받아와야 한다.
코드 린터/ 코드 포멧터
eslint / prettier
협업을 위한 규칙을 작성할 때 사용
코드린터 : 문법적인 규칙을 규정한다. 린터 또한 포멧터의 기능을 어느 정도는 가지고 있다.
ex) import 순서, ==는 금지하고 ===는 허용
$ npx eslint --init
√ How would you like to use ESLint? · style
√ What type of modules does your project use? · esm
√ Which framework does your project use? · react
√ Does your project use TypeScript? · No / Yes
√ Where does your code run? · browser
√ How would you like to define a style for your project? · guide
√ Which style guide do you want to follow? · standard
√ What format do you want your config file to be in? · JavaScriptnpx를 통해 터미널에서 설치하고 기본적 설치 라인은 위 코드를 따를것.
코드 포멧터: 코드 가시성에 관한 규칙.
ex) 띄어쓰기는 2칸, **길이가 넘어가면 줄바꿈
yarn add --dev --exact prettier 설치
echo {}> .prettierrc.json 로 빈파일 만들기
yarn add eslint-config-prettier --dev < lint와 함께 사용하기 위한 명령
eslintrc 파일 내의 extends 부분에 "prettier" 추가++ 터미널에 'npx eslint .' 을 치면 모든 파일의 에러 검출이 가능하다.
++ scope error는 next.js에서는 필요없는 기능이기 때문에 off 해줘야 한다.
-> eslintrc.js 에 들어가서 rules 탭 괄호 안에 'react/react-in-jsx-scope' :'off'
