전체

회사 프로젝트에 TypeScript를 도입하게 되었다. 기존 JavaScript 코드베이스를 한 번에 마이그레이션할 수 없어서 점진적으로 전환하는 방법을 선택했다. 실제 적용 과정과 마주친 문제들을 정리했다.

레거시 JavaScript 프로젝트에 TypeScript를 한 번에 마이그레이션하기엔 리스크가 컸다. allowJs 옵션을 활용해 점진적으로 전환한 과정을 정리했다.

여러 API 요청을 동시에 처리하면서 Promise.all과 Promise.race의 차이를 제대로 이해하게 되었다. 실제 업무에서 마주한 사례를 중심으로 두 메서드의 적절한 사용 시점을 정리했다.

레거시 시스템 마이그레이션 중 대용량 데이터 처리 성능 이슈가 발생했다. 배열 순회 방식에 따른 성능 차이를 측정하고 적절한 선택 기준을 정리했다.

백오피스에서 5GB 크기의 CSV 파일을 업로드하자 서버 메모리가 터졌다. Node.js의 Stream API를 활용해 메모리 사용량을 1/10로 줄인 과정을 기록한다.

React 16.6에서 추가된 lazy와 Suspense를 프로젝트에 적용했다. 기존 react-loadable을 대체하면서 번들 크기를 줄이고 초기 로딩 속도를 개선한 과정을 정리한다.

매일 밤 10GB 이상의 CSV 파일을 처리하는 배치 작업에서 메모리 부족 에러가 발생했다. Node.js 스트림을 활용해 메모리 사용량을 1/10로 줄이고 처리 속도도 개선한 과정을 기록했다.

레거시 배치 작업에서 외부 API를 순차 호출하면서 발생한 성능 문제를 asyncio로 해결했다. 동기 방식 대비 약 10배 빠른 처리 속도를 확보할 수 있었다.

프로젝트에 React 16.6의 Suspense와 lazy를 적용하며 번들 사이즈를 30% 줄였다. 코드 스플리팅 전략과 실제 적용 과정을 기록한다.

다단계 컴포넌트 구조에서 props를 계속 전달하는 문제가 있었다. React 16.3부터 정식 지원되는 Context API를 도입해서 해결했다.