Frontend

React 18로 마이그레이션하면서 자동 배칭이 기존 상태 업데이트 로직에 미친 영향을 정리했다. setTimeout과 Promise 내부의 여러 setState가 하나로 묶이면서 예상치 못한 렌더링 최적화가 발생했다.

TypeScript 4.7에서 추가된 satisfies 연산자를 실무에 적용해봤다. as 타입 단언의 단점을 보완하면서도 타입 추론을 유지할 수 있어 유용했다.

3월에 정식 출시된 React 18을 프로젝트에 적용했다. Automatic Batching과 Suspense 개선이 체감되는 부분이 많았고, 마이그레이션은 생각보다 순조로웠다.

React 18의 Concurrent Features를 적용하여 5000개 이상의 아이템을 렌더링하는 대시보드 성능을 개선했다. useTransition과 useDeferredValue를 활용한 실제 사례를 정리했다.

React 18이 정식 릴리즈되면서 Suspense for Data Fetching과 Server Components를 프로젝트에 적용해봤다. 아직 프로덕션에 쓰기엔 이르지만, 방향성은 명확해 보인다.

회사 프로젝트에 React 18을 도입하면서 useTransition 훅을 사용해 검색 인터페이스의 사용자 경험을 개선했다. 입력 응답성과 결과 렌더링의 우선순위를 분리하는 방법을 정리한다.

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

TypeScript 4.7에서 Node.js ESM을 정식 지원하면서 프로젝트를 CommonJS에서 ESM으로 마이그레이션했다. module resolution 설정과 패키지 구조 변경 과정을 정리했다.

TypeScript 4.7에서 개선된 템플릿 리터럴 타입을 API 라우팅 시스템에 적용했다. 타입 안정성을 유지하면서도 동적인 경로 처리가 가능해졌다.

React 18로 마이그레이션하면서 Concurrent Rendering 기능을 실무에 적용했다. useTransition과 useDeferredValue를 활용해 검색 필터링 성능을 개선한 과정을 정리했다.