Day 10

김정동·2021년 11월 12일

코드캠프와 달려보자

목록 보기

9/35

early exit pattern

코드 유지보수에 도움 되는 패턴, 예외처리는 일치감치 return 으로 꺼버리기
이렇게 하지 않고 밑에 넣으면 너무 헷갈리고 유지하기 힘들다

return 기능은 아래 뭐가 있든 상관 없이 반환, 종료 해버리겠다.

API 타입 스크립트

다른 설치프로그램, apollo, next.js 등등도 사용할 때 타입스크팁를 사용하기 위해서는 거기에 맞는 types도 적용시켜야함, 사용하는거마다 다른데 보통 타입관련 라이브러리도 같이 적용함

API는 어떻게 설치해줘요?
만약 restAPI면 알아서 해야겠지만 graphql 은 Graphql-codegen을 이용해서 자동으로 생성해줌

설치법: www.graphql-code-generator.com

yarn add -D @graphql-codegen/cli

yarn add -D @graphql-codegen/typescript

이후 상위 폴더에(Package.json있는곳)파일 생성, codegen.yml 파일 생성

schema: http://localhost:3000/graphql
generates:
  ./src/commons/types/generated/types.d.ts:
    plugins:
      - typescript
    config :
      typesPrefix: I

주소를 사용하는곳 넣기, graphql codegen 명령어를 넣으면 schema라는 것을 다운받는 것임.

보통 commons/new/types/generated 폴더에 저장함,
generates: 위치도 알맞게 수정.
터미널, npx graphql-codegen

파일 앞에 I도 붙이니까 config :typesPrefix: I(들여쓰기에 유의)
commons/types/generated/ types.d.ts 가 바뀌었다면설정완료

이후 적용방법
mutation은 데이터와 인풋데이터(variables) 로 이루어져있음

    const [createProduct] = useMutation<IMutation, IMutationCreateProductArgs>(CREATE_PRODUCT)

Imutation쪽에 받아올 데이터에 대한 데이터 타입 지정

useMutation<Pick<IMutation, 'createProduct'>,

pick 해서 어떤 정보를 가져올지 고르게됨

이러면 내가 넣을 수 있는 정보가 무엇인지 볼 수 있고, 아니면 빨간줄이 뜨게됨
이러고 적용하면 command+I 를 누르면 안에 뭐가 들어가야될지 나오게됨

코드 문법 규칙

코드 린터/ eslint (어느정도 포멧터의 기능도 가지고있음)
ex) import순서 == 금지, ===허용
문법적 규칙을 지정해주는 기능

코드 포멧터 /prettier
ex) 띄어쓰기 2칸, 00길이 넘으면 줄바꿈
eslint 설치

yarn add eslint --dev 
yarn run eslint --init
//enforce code style까지 체크,javascrpit체크, react체크, yes체크, Browse체크, popular style 체크, standardㄱㄱ, javascrpit체크, yes체크 근데 에러나면, node_moduels폴더 지우고 yarn install 다시 실행 안되면 pakage lock json, yarn lock 도 지움 -> 다시 add , init, yarn dev, 이후 다시 node_modules삭제 후 yarn installㄱㄱ

이후 extention에서 eslint설치 , pages/_app.js에 가서 빨간줄이 있는지 확인

빨간줄이 있다고 무조건 오류는 아니고, react부분같은거는 꺼도됨
eslintrc.js가서

"rules": {
        "react/react-in-jsx-scope" : "off"
    }

이후 prettier 설치
echo {}> .prettierrc.json
yarn add --dev --exact prettier 이후 pretteirrc.json있는지 확인

이후 prettier 설치, npm install --save-dev eslint-config-prettier
eslintrs.js부분에 "extends": 부분 맨 밑에 prettier -> 빨간줄 없어짐

이후 prettierrc.json가면 설정할 수 있음

그리고 설정파일을 공유하기 위해 세팅이 필요함
최상단 폴더에 .vscode 폴더, 안에 settings.json 추가
{
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode"
}

, 이후 pretteir Extention 설치