21.07.15

개념 재정리가 필요해졌다

---

📌 GraphQL-codegen

typeScript 를 사용하게 되면서 여러 변수와 상수, 함수에 타입을 작성하게 되었는데, Backend 에서 받아오는 수 많은 데이터는 하나하나 타입을 적용시키가 힘들다.

그렇기에 사용하게 되는것이 graphql-codegen 이다.

❓ 설치

❗️ 사용할 폴더로 이동하여
1. yarn add -D @graphql-codegen/cli 를 입력
2. yarn add -D @graphql-codegen/typescript 입력

---

❓ 설정

❗️ 설치된 폴더의
package.json 파일의 script 부분에

{
	"script":{
    	"generate":"graphql-codegen"
    }
}

을 등록.

실제 파일은 이런 모습이다

"script":{
	"dev": "next dev",
  	"build": "next build",
      	"start": "next start",
        "generate": "graphql-codegen"
},

---

❓ 경로 설정

마지막으로 Backend 에서 받아오는 데이터의 타입이 자동으로 만들어지게 될 파일 위치를 지정해 주어야 한다.

폴더 최상단(package.json과 동일선상)에 codegen.yaml 파일을 만든후, 아래 코드를 입력

schema: http://backend02.codebootcamp.co.kr/graphql
generates:
  ./src/commons/types/generated/types.d.ts:
    plugins:
      - typescript
    config:
      typesPrefix: I

여기서 generates 의 값이 파일이 만들어질 위치의 값이며,
config 의 typesPrefix 는 만들어진 파일 내부의 값 이름들 앞에 I를 붙여 interface 정보인걸 알기 쉽게 만들어준다 (I가 아닌 다른 글자도 가능)

---

🍌오늘의 구내식당 점심 메뉴🐒