자손킴

tanstack query의 imperative query 통합

TanStack Query는 기존의 `fetchQuery`, `prefetchQuery`, `ensureQueryData` 등 여러 개로 나뉘어 있던 명령형 쿼리 메서드들을 `query`와 `infiniteQuery` 메서드로 통합하였습니다. 이 변경은 API 명칭과 실제 동작의 혼선을 줄이기 위해 진행된 RFC 논의를 바탕으로 도입되었으며, 기존의 세분화된 메서드들을 옵션과 자바스크립트 문법의 조합으로 대체할 수 있게 합니다. 새로운 `query` 메서드는 기존 `fetchQuery`와 동일하게 작동하며, `prefetchQuery`는 `.catch()` 메서드를 명시적으로 체이닝하여 에러를 처리하도록 권장됩니다. 기존의 `ensureQueryData`는 새로 도입된 `staleTime: 'static'` 옵션을 활용해 캐시 데이터를 우선적으로 사용하며, 백그라운드 재검증이 필요할 경우 단계를 명시적으로 분리하여 구현합니다. 이번 개편은 메서드 이름 뒤에 숨겨진 세부 동작들을 개발자가 명시적인 옵션과 언어 표준을 통해 정교하게 제어할 수 있는 유연성을 제공합니다.

Read full article

프론트엔드 상태 관리의 네 가지 난제, Bunja로 풀어보기

프론트엔드 상태 관리에서 발생하는 공유 범위 변경, 수명 제어, 파생 상태 공유, 기능 단위 응집의 한계는 상태의 위치를 컴포넌트 트리에만 의존하기 때문에 발생합니다. 라이브러리 Bunja는 상태의 인스턴스와 수명을 직접 관리하는 방식으로 이러한 문제를 해결합니다. Bunja를 사용하면 컴포넌트 트리 구조에 구애받지 않고 상태 인스턴스를 정의할 수 있으며, 해당 상태를 참조하는 컴포넌트의 유무에 따라 인스턴스의 생성과 소멸을 자동으로 제어할 수 있습니다. 이를 통해 상태의 공유 범위가 늘어나도 코드를 변경할 필요가 없고, 컴포넌트가 언마운트될 때 관련 상태와 리소스가 알아서 정리되어 안전한 수명 관리가 가능해집니다. 더불어 Jotai 같은 상태 관리 도구와 결합해 파생 상태의 계산 효율성을 높이고, 여러 기능을 결합한 의존 관계를 깔끔하게 표현하여 강력한 기능적 응집을 달성할 수 있습니다. 이 글은 UI 구조를 다루는 React, 인스턴스 수명을 정의하는 Bunja, 값의 변화를 구독하는 Jotai의 역할을 분리하여 복잡한 상태 관리의 본질적인 어려움을 해결하는 명쾌한 대안을 제시합니다.

Read full article

함수형 뜨개 #3

뜨개질의 '꼬아뜨기' 기법을 바늘의 물리적인 움직임 대신 루프의 구조적 변화에 집중하여 TypeScript 코드로 추상화하는 과정을 다룹니다. 저자는 꼬아뜨기가 기존 루프를 비튼 상태에서 뜨개질을 하는 물리적 특징을 파악하고, 이를 기존 루프를 변형하는 `twist` 함수와 기본 뜨개 함수의 조합으로 간단하게 구현해 냅니다. 이 과정을 통해 복잡한 물리 세계의 도구를 무리하게 추상화하기보다, 핵심 구조에 집중함으로써 기존 코드의 변경 없이 새로운 요구사항을 유연하게 확장하는 도메인 모델링의 강력한 통찰을 얻을 수 있습니다.

Read full article

Four Challenges in Frontend State Management

Managing client state in frontend applications remains challenging despite the abundance of specialized tools like `useState`, React Context, Zustand, and TanStack Query. As applications grow, developers frequently encounter four interconnected problems: shifting sharing scopes, untamed state lifecycles, redundant derived state computations, and fragmented feature coherence. Changing where a state is shared often triggers cascading code changes, forcing shifts from `useState` to props or Context. Additionally, global state tools lack natural lifecycles, requiring manual cleanup code that easily leads to stale state bugs. Derived state created via custom hooks is recalculated independently by each calling component rather than being computed once and shared, which degrades performance. Finally, attempts to group these elements into cohesive feature units like custom hooks fall apart when multiple components must share the same state instance, resulting in complex Context wrappers or fragile external interfaces. Understanding these structural pain points is crucial for designing clean, maintainable frontend architectures that scale effortlessly without recurring refactoring.

Read full article