TIL[10일차].Utility-Type, Graphql-codegen

남예지·2022년 11월 11일

TIL

목록 보기

6/47

어제 복습!
1. 수정했을때 디폴트값 넣기, 빈값 제외하고 보내기 2가지 배웠습니다.
수정하기
1) defaultValues
해당 폴더에서 데이터를 가져와야한다.
등록 상세 수정페이지
컨테이너/프리젠터를 등록,수정페이지에서 import해야하는데 수정 페이지에서 useQuery로 넘서 data={data) props로 넘겨준다.
작성자 인풋에 readOnly={true} 가 들어오면 인풋창이 막히게 됨(입력불가)
readOnly={!!props.data?.fetchBoard.writer} !! 이게 뭘까용
false/true느낌인데 정확히 false/true로 바꿔주기 위해! 이중부정연산자라고 하기도 함
?? 도 있다.
&& 앞에것이 참이면 뒤에거 보여줘
|| 앞에것이 거짓이면 뒤에거 보여줘
?? 앞에것이 없으면 뒤에거 보여줘
없다는건 null/undifined를 말합니다.
nullish coalescing이라고 함(널리시 코알레싱)

container에서 수정한 내용이 없습니다.

리팩토링 조건: 동일한결과인데 안에 코드가 좀더 효율적이게 바뀌었다.
여러 기능을 활용해서 리팩토링 한 것. 여러사람들이 한걸 패턴이라고 한다.
early-exit 패턴 내용이 적다면 먼저 return 해주는

1) 변경된 값만 보내기

jsx를 리턴하면 tsx
아니면 ts

packege.json에

"resolutions": {
"@types/react": "17.0.2"
}

를 추가해 주어야 @material-ui/core안에 있는 리액트 버전과 충돌하지 않는다.

또 app.js에서 props를 타입스크립트에서 쓰려면
: AppProps를 함수 인자옆에 써주고 import 해주면 됩니다.

Utility-Type

props

props는 객체로 들어온다. 객체는 타입이 정해진게 없다.
그래서 iProps타입 등을 직접 만들어 사용

interface에 객체타입을 정해줄때 있어도 되고 없어도 되는 요소는 ?를 이름 앞에 적어준다.
props도 마찬가지이다. interface로 만들어 넣어주면 된다.'
함수는 onClickSubmit : () => void 로 입력해준다.

event

event는
(event: ChangeEvent<HTMLInputElement>) 를 해주면 됨

    // 원래는 우리가 이렇게 만들었었어야함
    // interface IEvent {
    //     target: {
    //         id: string
    //         value: string
    //     }
    // }

data는 API의 타입을 하나하나 적어줘야되는게 비효율적이기때문에 백앤드에서 타입을 다운받아 와서 진행한다. (다음에 배움)

Graphql-codegen

graphql-codegen을 다운받으면 interface를 하나하나 적어야하는 번거로움을 덜 수 있다.

yarn add @graphql-codegen/cli --dev
yarn add @graphql-codegen/typescript --dev

이렇게 2개를 설치하면 됨.

그리고 폴더 안에 codegen.yaml 파일을 설치해줍니다.
이 안에는 scripts: dev: build: 이런식으로 씁니다. 띄어쓰기가 부모자식간을 나누기 때문에 주의해야되용.
파일 안에는 아래와 같이 적는다.

schema: http://example.codebootcamp.co.kr/graphql
generates:
  ./src/commons/types/generated/types.ts:  //경로
    plugins:
      - typescript
    config:
      typePrefix: I

실제로 src/commons/types/generated/까지는 폴더를 만들어 준다. codegen.yaml에 적은 경로대로 나중에 codegen을 설치할때 그 안에 types.ts 가 만들어진다.
package.json에 script안에 "generate": "graphql-codegen" 를 입력해준다.
codegen.yaml파일에 yarn generate 를 쓰면 codegen 설치가 완료된다.

이제 적용을 해볼건데 utilty-type, codegen-mutation, codegen-query 를 각각 적용해보자.
pick은 utility 타입

codegen.yaml파일에