5일차
수업내용
api로 받는 데이터 타입 graphql codegen
유틸리티 타입 utility type
협업하는데 규칙 Esling/Prettier/Husky
void 매개변수가 없음
event changeEvent<뭐가변경됬는지>
이중부정연산자
!!
early exit pattern
개발자들이 관습적으로 함수 빨리 끝내려고 if문 맨 위로 올려 함수 끝내는 것
1. graphql codegen
가.graphql codegen 설치
"@graphql-codegen/cli": "^2.6.2",
"@graphql-codegen/typescript": "^2.4.8",
yaml파일
codegen.yaml에 generates주소에 그래프ql에서 받아온 정보들의 typescript를 저장해줌
인터넷 되고, 백엔드서버도 되고, 주소도 올바르게 되있어야함
나.graphql codegen 사용법
mutation type
< Pick[←유틸리티타입] <IQuery, 'fetchBoard'>, 아규먼트(밑에불러올데이터타입)베리어블에 불러올 타입 체크 >
다. 유틸리티타입
//1. pick type : key 가져오기
type Mytype1 = Pick<IProfile, "name" | "age">;
//2. omit type : key값 제거
type Mytype2 = Omit<IProfile, "school">;
// 3. Partial type : 모두 ?붙히기
type Mytype3 = Partial;
// 4. required type :필수
type Mytype4 = Required;
// 5. record type : 타입 정해놓고 이것만 써라 type선언하고 이 타입을 원래 있던 interface에 넣으면 key값이 바뀜
type ZZZ = "aaa" | "qqq" | "rrr";
//↑유니온타입 합집합
type XXX = "aaa" & "qqq" & "rrr";
//↑인터섹션타입 교집합
let apple: ZZZ;
apple = "rrr";
type Mytype5 = Record<ZZZ, IProfile>;
//추가(선언병합) type과 interface의 차이점
interface IProfile {
candy: number;
}
2. 코드 린터(eslint) / 코드 포멧터(prettier)
가. 린터
import 순서 등 기능담당
==금지, ===허용
이런식으로 할 수 있음
1) npx eslint .
오류 확인
2) npx eslint .이 오류나면?
npx eslint "*/.{ts, tsx}"
나. 코드 포멧터
외관 담당
띄어쓰기 2칸 00길이 넘으면 줄바꿈 이런식으로 하는 것
3. 패치 두개 날리기
{data}
{data : data2(데이터이름)}
