Frontend

React 19의 개선된 Suspense 동작을 활용해 대시보드 초기 로딩 성능을 최적화했다. 경계 분리와 preload 전략으로 LCP를 1.8초 단축했다.

React 19에서 정식으로 도입된 use() 훅을 Server Components와 함께 사용하면서 겪은 시행착오를 정리했다. 특히 Promise를 직접 다루는 방식과 기존 Suspense 패턴의 차이점을 중심으로 기록한다.

프로젝트에 TypeScript 5.8을 적용하면서 satisfies 연산자의 타입 추론 개선을 경험했다. 특히 복잡한 객체 리터럴에서 타입 안정성과 자동완성을 동시에 확보할 수 있었다.

React 19의 Server Actions를 실제 프로덕션 환경에 적용하면서 겪은 시행착오를 정리했다. Form 처리 패턴 변화와 에러 핸들링, 그리고 마이그레이션 전략을 중심으로 기록한다.

TypeScript 5.7에서 추가된 `--rewriteRelativeImportExtensions` 옵션을 적용하면서 모노레포 환경에서의 빌드 설정을 정리했다. 기존에 복잡하게 처리하던 경로 변환 로직을 많이 간소화할 수 있었다.

대시보드 페이지에서 탭 전환 시 발생하던 로딩 지연을 Suspense 프리페칭으로 해결했다. 사용자 인터랙션 예측을 통해 체감 성능을 크게 개선할 수 있었다.

React 19 Compiler 도입 후 기존 useMemo 사용 패턴을 재검토했다. 컴파일러가 자동으로 메모이제이션을 처리하지만, 특정 케이스에서는 여전히 명시적인 최적화가 필요했다.

React 19 정식 릴리즈 이후 프로젝트에 use() 훅과 Server Actions를 도입했다. 기존 비동기 처리 패턴과의 차이점과 실제 마이그레이션 과정에서 마주친 이슈들을 정리한다.

TypeScript 5.7에서 개선된 Iterator Helper 메서드의 타입 추론을 프로젝트에 적용했다. 특히 map, filter, flatMap 체이닝 시 타입 안정성이 크게 향상되어 런타임 에러를 사전에 방지할 수 있었다.

TypeScript 5.6에서 정식 지원되기 시작한 Iterator Helper를 실무 코드에 적용해봤다. 기존 배열 변환 로직을 lazy evaluation으로 개선하면서 성능과 가독성을 모두 잡을 수 있었다.