3월 첫주차 기록

March 9, 2024 • ☕️ 5 min read

weekly

배워가기

상태관리 매니저로서 React Query

“React Query is in fact NOT a data fetching library.”

An Async State Manager
- 리액트 쿼리는 비동기 상태를 다룬다
- querykey는 unique한 query를 구분해주며, 이를 통해 앱의 여러 곳에서 같은 key로 같은 query를 사용할 수 있다 (같은 QueryClientProvider 에 있기만 한다면)
A data synchronization tool
- 리액트 쿼리는 비동기 상태를 다루기 때문에 프론트엔드 앱이 데이터를 ‘가지지’ 않게끔 해준다
- 리액트 쿼리는 우리의 화면을 실제 데이터 소유자와 동기화시키는 방법(서버를 이용해) 제공한다
Before React Query
- 한번 fetch하고, 전역으로 뿌리고, 드물게 업데이트한다
  - ex) redux
- 매 mount마다 fetch하고, 로컬 상태로 갖고 있는다
  - ex) useEffect
→ 두 가지 모두 최적화가 되어있지 않다
Stale While Revalidate
- 리액트 쿼리는 데이터를 캐싱하여 필요할 때 건네준다.
- stale data가 no data보다 낫다는 가정(로딩 스피너를 보여주지 않아도 된다)
- 동시에 background refetch를 수행한다
Smart refetches
- 매 렌더링마다 useQuery를 호출하는 것은 너무 비싼 작업. 리액트 쿼리는 보다 똑똑하게 동작한다
  - refetchOnMount
  - refetchOnWindowFocus
  - refeetchOnReconnect
- 수동으로 invalidation도 가능 - queryClient.invalidateQueries
Letting React Query do its magic
- staleTime의 기본값은 0이므로, 새로운 컴포넌트가 마운트될 때마다 background refetch된다. 그러면 같은 렌더 사이클에 있지 않아 넘 많은 fetch가 발생할 텐데…?
- (뭔 소리지?) - 밑에서 알려주려나 보다
Customize staleTime
- 데이터가 신선한 한, 항상 캐시에서 가져온다.

Bonus: using setQueryDefaults

QueryClient.setQueryDefaults로 query key에 기본값을 설정할 수 있다

Copy

// 🚀 everything todo-related will have
// a 1 minute staleTime
queryClient.setQueryDefaults(
  todoKeys.all,
  { staleTime: 1000 * 60 }
)

A note on separation of concerns
- 관심사의 분리
  - useContext, useQuery, useSelector 등의 등장으로 ui와 데이터 페칭의 분리가 가능해짐

Ref React Query as a State Manager

package.json의 `bin`은 뭘까?

실행할 수 있는 패키지를 만들기 위해서는 package.json에 bin 항목을 제공해야 한다. 패키지 설치 시에, npm은 bin 항목에 기술된 파일의 심볼릭 링크를 global install한 경우 prefix/bin에, local install한 경우 ./node_modules/.bin/ 에 생서하게 된다

ex) myapp이 아래와 같이 bin 항목이 지정되어 있다면

Copy

"bin": { "myapp": "./cli.js" }

myapp을 설치할 때, cli.js 파일에 대한 심볼릭 링크가 /usr/local/bin/myapp에 만들어진다

만약 하나의 실행 파일만 가지고 있다면, 실행 파일의 이름은 패키지의 이름과 같게 되고, 그렇지 않다면 아래와 같이 각각의 실행 파일의 이름을 bin 항목에 지정해주어야 한다.

Copy

"name": "my-program",
"version": "1.2.5",
"bin": {
  "my-program": "./path/to/program",
}

Ref

웹컴포넌트 custom element 라이프사이클 콜백

connectedCallback()
- custom element가 문서에 연결된 요소에 추가될 때마다 호출
disconnectedCallback()
- custom element가 document의 DOM에서 연결 해제되었을 때마다 호출
adoptedCallback()
- custom element가 새로운 document로 이동되었을 때마다 호출
attributeChangedCallback()
- custom element의 특성들 중 하나가 추가되거나, 제거되거나, 변경될 때마다 호출
- 어떤 특성이 변경에 대해 알릴지는 static get observedAttributes 메서드에서 명시