12월 첫주차 기록

배워가기

---

volta

nvm 대신 Volta를 사용하면 engines.node를 자동으로 처리할 수 있다. volta는 engines 필드에 명시된 Node.js 버전을 자동으로 설치하고 전환한다.

• volta 설치:
  Copy

  curl https://get.volta.sh | bash

• 프로젝트에 진입하면 자동으로 engines.node에 따라 Node.js 버전을 설정한다.

cf) pnpm은 node.js 버전을 전역으로만 관리할 수 있다. 셸마다 구성하는 것은 불가능하다.

Ref https://velog.io/@sehyunny/5-node-manager-compared#volta

react-query invalidatequeries vs refetch

• invalidateQueries
  • query cache 내 대상 쿼리들을 순회하면서 invalidate시킨다.
  • 이때 query는 invalidate되지만, 옵저버가 살아있다면 해당 쿼리를 다시 refetch한다.
  • 즉 쿼리 데이터를 ‘stale’로 표시하고, 이 쿼리를 관찰하는 컴포넌트가 마운트될 때 데이터를 다시 가져온다.
  • 데이터 변동이 발생한 후(데이터를 수정하는 mutation 작업이 성공한 후) 호출된다.
• refetch
  • 쿼리의 상태가 invalidated인지 아닌지의 여부를 판단하지 않고 바로 fetch를 실행한다.
  • enabled: false 상태인 쿼리도 실행할 수 있다.
  • 사용자가 명시적으로 쿼리를 다시 실행하고자 할 때 유용하다.

refetch는 즉각적인 데이터 갱신이 필요할 때 확실하게 데이터를 최신 상태로 유지하는 반면, invalidate는 데이터 필요할 때 까지 기다리면서 비용을 효율적으로 사용할 수 있게 한다.

Ref

• https://velog.io/@chltjdrhd777/React-Query-탐구-기록-Refetch-vs-invalidateQueries
• https://lurgi.tistory.com/184

react-query initialData vs placeholderData

• initialData

  • 쿼리에 초기값을 부여하고자 할 때 사용한다.
  • cache level에서 동작한다.

• placeholderData

  • 쿼리가 초기값을 갖고 있는 것처럼 동작하지만, 캐시에 저장되진 않는다.
  • 백그라운드에서 실제 데이터가 불러와지는 동안 임시 데이터를 노출하고 싶을 때 사용한다.
  • observer level에서 동작한다.

cache level vs observer level

• cache level
  • 각 쿼리 키가 가지고 있는 유일한 캐시 진입점
  • 동일한 데이터를 전역적으로 관리하기 위해 사용된다.
• observer level
  • 하나의 캐시 진입점마다 생성되는 구독 레벨
  • 옵저버는 캐시 진입점의 변화를 감지하고 알려준다.

Ref

• https://tanstack.com/query/latest/docs/framework/react/guides/initial-query-data
• https://tanstack.com/query/latest/docs/framework/react/guides/placeholder-query-data
• https://tkdodo.eu/blog/placeholder-and-initial-data-in-react-query

jest에서 [Request/Response/TextEncoder is not defined (Jest)] 오류

• jest test environment를 jsdom으로 했을 때 발생하는 문제
• jest-fixed-jsdom 을 import하여 해결한다
• 맘에 안들면 vitest를 쓰라고 한다. -_-

Ref https://mswjs.io/docs/faq/#requestresponsetextencoder-is-not-defined-jest

이것저것 모음집

---

• pnpm why [package_name] - 지정된 패키지 package_name에 의존하는 모든 패키지를 표시한다. (Ref)
• jest에서 console.log가 안 나온다면 - run test --silent=false

기타공유

---

개발 어드벤트 시리즈

• https://adventofcode.com/
• https://www.adventofts.com/events/2024
• https://solvesql.com/collections/advent-of-sql-2024/

25일 동안 하루에 1개씩 문제를 푸는 사이트…

진짜 개발자들 독하다 독해

React 19

• Actions

  • pending 상태를 다루는 useTransition에 이어
  • 낙관적 업데이트를 처리하는 useOptimistic 등장
  • 이런 모든 액션들을 처리하는 useActionState 두두등장

• Form

  • <form>에 action 속성 추가
  • useFormStatus로 폼의 상태 추적 가능

• use

  • 드디어 등장한 무시무시한 use
  • Promise를 처리

• React DOM Static API

  • prerender - React tree를 정적 HTML로 렌더 가능
  • prerenderToNodeStream

• React Server Components

천천히 좀 나와주겠니

Ref https://react.dev/blog/2024/12/05/react-19

마무리

---

참 다이나믹했던 12월 첫째주

완전히 새로운 동네로 이사

갑작스러운 계엄령과 그에 따른 탄핵소추

개발자 인생에서 2번째 중요한 선택

그리고 올해, 이 회사에서의 마지막이 될지 모를 밴드 공연

아마 너무 정신없어서 올해 크리스마스는 지나가는 둥 마는 둥 할지도? 🫠

Relative Posts: