전체

회원가입 폼에서 method 속성을 누락해 민감한 정보가 URL에 노출되는 문제를 겪었다. 기본값이 GET이라는 기초적인 사실을 간과한 사례.

프로덕션에서 간헐적으로 발생하는 500 에러를 추적하다가 unhandled promise rejection이 원인임을 발견했다. Node.js 8부터 추가된 경고를 활용해 문제를 해결한 과정을 정리했다.

React 16으로 업그레이드하면서 새로 추가된 Error Boundary 기능을 적용했다. componentDidCatch 라이프사이클을 활용해 런타임 에러를 안전하게 처리하는 방법을 정리한다.

Flexbox만으로 복잡한 2차원 레이아웃을 구현하는 데 한계를 느꼈다. CSS Grid Layout을 도입해 대시보드 화면을 리팩토링한 과정을 정리했다.

Angular 4 프로젝트에서 Observable 구독 해제를 제대로 하지 않아 메모리 누수가 발생했다. 컴포넌트가 destroy될 때 구독을 해제하는 몇 가지 패턴을 정리했다.

회사 메인 프로덕트가 Angular 1.x로 작성되어 있었는데, 유지보수 부담이 커져서 React로의 마이그레이션을 결정했다. 한 번에 전환할 수 없어서 점진적 마이그레이션 전략을 세웠다.

대용량 파일 업로드 처리 중 메모리가 계속 증가하는 문제가 발생했다. Stream의 적절한 종료 처리와 backpressure 제어로 해결했다.

float과 position으로 구현했던 복잡한 레이아웃을 Flexbox로 전환했다. IE11 지원을 유지하면서도 코드량을 절반 이상 줄일 수 있었다.

단일 스레드인 Node.js의 한계를 극복하기 위해 클러스터 모드를 도입했다. PM2 없이 직접 구현하면서 마스터-워커 프로세스 관리와 무중단 재시작을 처리하는 방법을 정리했다.

프로젝트에서 Promise 체이닝이 복잡해지면서 가독성이 떨어지는 문제가 발생했다. Node 8에서 정식 지원되는 async/await를 도입해 코드를 개선한 과정을 정리했다.