Frontend

관리자 페이지의 대용량 테이블 검색에서 입력 지연 문제가 발생했다. React 18의 useTransition을 적용해 긴급 업데이트와 전환 업데이트를 분리하여 해결한 과정을 정리했다.

TypeScript 4.8에 추가된 satisfies 연산자를 프로젝트에 도입했다. as 타입 단언의 문제점을 해결하면서도 타입 추론을 유지할 수 있어 코드 안정성이 크게 개선되었다.

대용량 목록 필터링 시 입력 지연 문제를 useDeferredValue로 해결했다. debounce보다 직관적이고 React의 우선순위 시스템을 활용할 수 있었다.

TypeScript 4.8에서 새로 추가된 satisfies 연산자를 프로젝트에 적용해봤다. as 단언의 문제점을 해결하면서도 타입 추론을 유지할 수 있어 유용했다.

React 18 업그레이드 후 Concurrent Rendering을 실제 프로덕션에 적용했다. useTransition과 useDeferredValue를 활용해 검색 UX를 개선한 과정을 기록한다.

React 18이 정식 출시된 지 몇 개월이 지났다. Suspense for Data Fetching을 실무에 적용하면서 겪은 시행착오와 패턴을 정리했다.

TypeScript 4.7에 추가된 satisfies 연산자를 프로젝트에 적용해봤다. as 타입 단언의 안전성 문제를 해결하면서도 타입 추론을 유지할 수 있어 유용했다.

TypeScript 4.7에서 추가된 Node.js ESM 지원을 프로젝트에 적용하면서 겪은 module resolution 문제와 해결 과정을 정리했다. package.json의 type 필드와 tsconfig의 module 설정 조합이 핵심이었다.

대용량 리스트 검색 기능에서 입력 지연 문제가 발생했다. React 18의 useTransition을 적용해 UI 응답성을 개선한 과정을 기록한다.

3월에 출시된 React 18을 프로덕션에 적용했다. Concurrent Rendering과 Automatic Batching이 주요 변경점이었는데, 실제 마이그레이션 과정에서 마주친 이슈들을 정리한다.