전체

기존 float와 flexbox 조합으로 구현된 대시보드 레이아웃을 CSS Grid로 전환했다. IE11 지원 때문에 고민했지만, autoprefixer와 fallback 전략으로 해결했다.

여러 API를 동시에 호출해야 하는 상황에서 Promise.all과 Promise.race를 적절히 활용해 로딩 시간을 단축했다. 각 메서드의 특성과 실무 적용 사례를 정리했다.

Node.js 백엔드에서 처리하던 이미지 리사이징 작업을 Go로 마이그레이션했다. 동시성 처리를 위해 채널 기반 워커 풀 패턴을 적용한 경험을 정리한다.

프로젝트 리뉴얼 작업 중 CSS Grid와 Flexbox를 함께 사용하면서 겪은 브라우저 호환성 문제와 해결 방법을 정리했다. IE11 지원 요구사항이 있어 fallback 전략이 필요했다.

5GB 크기의 CSV 파일을 메모리에 올리지 않고 처리해야 하는 상황이 생겼다. Node.js의 Stream API를 활용해 메모리 효율적으로 처리한 방법을 기록한다.

React 16.6에서 추가된 React.memo를 프로젝트에 적용해봤다. PureComponent의 함수형 컴포넌트 버전으로, 불필요한 리렌더링을 방지하는 데 유용했다.

레거시 JavaScript 프로젝트에 TypeScript를 한 번에 마이그레이션하기는 위험부담이 컸다. allowJs 옵션을 활용해 점진적으로 전환하는 전략을 적용했고, 3개월간의 경험을 정리했다.

React 16.6에서 추가된 React.memo를 프로젝트에 적용해봤다. PureComponent의 함수형 컴포넌트 버전으로, props 비교를 통해 리렌더링을 방지한다. 리스트 렌더링 성능 개선에 효과적이었다.

사용자 업로드 이미지를 여러 해상도로 리사이징하는 작업이 병목이 되어 멀티프로세싱을 도입했다. CPU 코어를 활용해 처리 속도를 3배 이상 개선한 과정을 정리했다.

레거시 JavaScript 프로젝트에 TypeScript를 단계적으로 도입한 과정을 정리했다. allowJs 옵션을 활용해 기존 코드와 공존하면서 새로운 모듈부터 TS로 작성하는 방식을 택했다.