6주차 학습목표
6월 13일 학습 목표
구조분해할당(=비구조화할당)
- 3줄 -> 1줄 간단하게
- {} 였기 때문에 {}로
useQuery의 return 값 모양이 { data : ~ , loding:~}의 객체였을 것
1. 3줄 -> 1줄 간단하게
2. [] 였기 때문에 []로
useState의 return 값 모양이 [ data, function ]의 배열이었을 것
간단하게 변수 만들기
우리가 그동안 사용했던 useQuery => data : '철수'
배열에는 순서가 있기 때문에 aaa = 철수, bbb = 영희
철수가 불필요하다면 [, bbb] 형태로 해야함. (객체에서는 순서 없었음)
useState로 연습하기
배열은 받을 때 이름을 내가 만들어도 괜찮음 (순서만 꼭 차례대로!)
꼭 구조분해할당[data, setDate]를 사용하지 않더라도 zzz[0], zzz[1]로 사용할 수 있다
custom hook : use로 시작하는 함수
클래스형 컴포넌트를 사용하는 경우에는 커스텀 훅을 쓸 수 없기 때문에 HOC를 알아야 한다!
use로 시작하지 않아도 실행은 가능함
반드시 use로 시작하게 하는 이유는 ?
일반 함수와 커스텀 훅을 구분
=> ( 커스텀 훅 안에서 use~로 시작하는 것들을 사용하고 있음을 확인)
서비스 규모가 커졌을 때 디버깅하기가 어려움
여러 컨테이너에 있는 공통 로직은 커스텀 훅으로 빼내는 것이 좋다
cache.modify
글로벌 스테이트에 저장하는 것
1) 동일한 api를 요청하는 것 (외부에서 받은 데이터)
2) 2개 이상의 컴포넌트에서 필요한 것 (내가 만든 데이터)
우리는 apollo-client를 사용하고 있어서, 저장이 되고 있었다!
기존에 우리는 삭제 후 바로 리패치를 하는 방식을 사용했었다.
서비스 규모가 커지면 리패치를 하는 방식은 비추천 (네트워크 요청을 줄이는 것이 퍼포먼스에 효과적)
1000명이 사용할 수 있는 서비스가 리패치 때문에 부담이 두배로 늘어나게 된다
뮤테이션을 날리고 나서 글로벌 스테이트를 직접 없애야 한다 (2번의 네트워크 요청을 1번으로 줄임)
아폴로 캐시 스테이트에 있는 것을 강제로 삭제해야 함
타입스크립트 (1)
// 1. any 타입 (그냥 자바스크립트랑 같음)
const getAny = (args: any) => {
return args + 2;
};
const result1 = getAny("철수");
// 2. unknown 타입 (개발자에게 안전하게 코딩하도록 유도!!)
// 어떤 데이터가 들어올 지 random인 상황이면 any보다는 unknown
// return 타입이 예측이 가능해진다!!
const getUnknown = (args: unknown) => {
if (typeof args === "number") {
return args + 2;
} else {
return "숫자를 넣어주세요!!!";
}
};
const result2 = getUnknown("철수");오늘공부를 돌아보며
리팩토링을 위한 것들을 많이 배워가는 기간인듯하다
게시판부분은 리팩토링을 많이해야하고 (거의 재건수준)
상품부분은 아예 고려를 해서 만들어나가는 중이다
배웠던 대로 그대로 하지 않고 조금씩 바뀌다보니 기능 구현을 절반씩만 하고 있다
api 보낼 수 있는게 절반만 되거나.. 받아올 수 있는게 절반만 되거나 ㅠ
그래도 상품 쪽 기틀은 어느정도 잡았으니 새로 배우는거 추가해나가면서...
api 못받고,못보낸 부분들도 잡아나가야 겠다 ㅠ
