전체

IE11에서 flex container의 min-height가 자식 요소에 제대로 적용되지 않는 버그를 발견했다. flex-basis를 사용한 우회 방법으로 해결했다.

회사 프로젝트가 Angular 1.x에서 시작해 2년이 지났다. 최근 React 16 릴리즈를 보며 마이그레이션 가능성을 검토했고, 두 프레임워크의 실질적인 차이를 정리했다.

기존 프로젝트의 문자열 포맷팅을 f-string으로 전환했다. % 포맷팅과 .format()이 혼재된 코드를 정리하면서 가독성이 크게 개선됐다.

200만 건의 CSV 데이터를 처리하는 배치 작업이 4시간 넘게 걸려서 병목을 분석했다. multiprocessing 모듈로 전환해 처리 시간을 1시간 이내로 단축했다.

팀 프로젝트의 코드 스타일 통일을 위해 ESLint와 Prettier를 도입했다. 설정 충돌 문제와 해결 과정을 기록한다.

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

Python 3.5+ 환경에서 딕셔너리를 병합하는 여러 방식을 비교했다. 상황에 따라 성능과 가독성이 다르기 때문에 각 방식의 특징을 정리해둔다.

레거시 API 호출 코드를 Promise 체이닝에서 async/await 패턴으로 전환했다. 코드 가독성이 크게 개선되었고, 에러 핸들링도 훨씬 직관적으로 처리할 수 있게 되었다.

프로젝트의 초기 로딩 시간이 길어지는 문제를 해결하기 위해 Webpack 3의 Code Splitting을 적용했다. CommonsChunkPlugin과 dynamic import를 활용하여 번들 사이즈를 40% 가량 줄일 수 있었다.

React 16에서 새로 도입된 Error Boundary를 프로젝트에 적용했다. 기존에는 컴포넌트 에러가 전체 앱을 중단시켰는데, 이제 에러를 격리하고 fallback UI를 보여줄 수 있게 되었다.