Frontend

Next.js 13에서 Server Component를 도입하면서 클라이언트 상태와 서버 렌더링 간 불일치로 hydration 에러가 발생했다. 원인은 Date 객체의 timezone 차이였고, ISO string으로 직렬화해서 해결했다.

TypeScript 4.9에서 추가된 satisfies 연산자를 실무에 적용해봤다. as 키워드의 타입 단언보다 안전하게 타입을 검증하면서도 타입 추론을 유지할 수 있었다.

TypeScript 4.9에서 추가된 satisfies 연산자를 프로젝트에 적용해봤다. 기존 as const와 타입 단언의 한계를 보완하면서도 타입 추론을 유지할 수 있어 유용했다.

대용량 리스트 필터링 시 입력 지연 문제를 useTransition으로 해결했다. startTransition을 통해 긴급하지 않은 상태 업데이트를 분리하여 UX를 개선할 수 있었다.

대용량 리스트 검색에서 입력 지연 문제를 겪었다. React 18의 useTransition을 적용해 사용자 입력은 즉각 반영하면서 무거운 렌더링을 낮은 우선순위로 처리하도록 개선했다.

TypeScript 4.8에 추가된 satisfies 연산자를 실무에 적용해봤다. as 단언과 달리 타입 추론을 유지하면서도 제약을 걸 수 있어 유용했다.

레거시 프로젝트를 React 18로 마이그레이션하면서 useTransition을 활용해 대용량 데이터 렌더링 성능을 개선했다. 특히 검색 필터링 시 UI 블로킹 문제를 해결할 수 있었다.

대용량 검색 필터 페이지에서 입력 지연 문제가 발생했다. React 18의 useDeferredValue를 적용해 렌더링 우선순위를 조정하고 UX를 개선한 과정을 기록한다.

대용량 목록 검색 시 입력 지연 문제를 React 18의 useTransition으로 해결했다. startTransition으로 우선순위를 분리하니 입력은 즉각 반응하고 목록 렌더링은 백그라운드에서 처리되었다.

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