전체

React 19 Compiler를 프로젝트에 적용하면서 기존 useMemo, useCallback 패턴과의 차이를 정리했다. 자동 메모이제이션이 가져온 변화와 여전히 수동 최적화가 필요한 케이스를 정리한 기록.

프로덕션 환경에서 발생한 메모리 누수를 heapdump와 Chrome DevTools를 활용해 추적하고 해결한 과정을 기록했다. 특정 API 엔드포인트에서 발생한 클로저 참조 문제가 원인이었다.

대량의 이미지 리사이징 API 요청으로 메인 스레드가 블로킹되는 문제가 발생했다. Worker Threads를 도입해 CPU 집약 작업을 병렬화하고 응답 시간을 70% 개선한 과정을 정리했다.

프로덕션 환경에서 OpenAI API 호출 지연과 타임아웃 이슈가 빈번해져 모니터링 시스템을 구축했다. Promise.race를 활용한 타임아웃 처리와 재시도 로직을 추가하여 안정성을 개선했다.

이미지 리사이징 API의 응답 속도 문제를 워커 스레드로 해결한 과정. 메인 스레드 블로킹을 피하고 멀티코어를 활용해 처리량을 3배 높였다.

React 19로 마이그레이션하면서 Compiler를 활성화하고 useActionState로 폼 처리를 개선했다. 메모이제이션 코드를 대폭 제거하고 서버 액션과의 통합을 간소화할 수 있었다.

프로덕션 환경에서 OpenAI API 스트리밍 응답 처리 중 메모리 누수가 발생했다. EventSource 연결 해제 타이밍과 청크 버퍼링 방식을 개선해 문제를 해결한 과정을 정리했다.

3년 된 Express API 서버의 콜백 헬을 async/await로 전환하는 작업을 Claude Code에 맡겼다. 200개 이상의 엔드포인트를 수작업으로 고치는 대신 AI 에이전트를 활용한 결과를 공유한다.

TypeScript 5.5에서 타입 가드 함수의 반환 타입을 자동으로 추론하는 기능이 추가됐다. 기존에 명시적으로 작성하던 type predicate를 생략할 수 있게 되면서 코드가 간결해졌다.

3년 된 Express API를 Fastify로 마이그레이션하면서 Windsurf의 Cascade 모드를 활용했다. 라우트 변환, 미들웨어 재작성, 테스트 코드 생성까지 자동화하며 체감한 워크플로우를 정리했다.