Frontend

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

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

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

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

레거시 코드에 중첩된 OR 조건문이 너무 많아 가독성이 떨어졌다. ES7의 Array.includes()를 활용해 간결하게 개선했다.

레거시 float 기반 레이아웃을 Flexbox로 전환하는 작업을 진행했다. IE10 지원 종료로 인해 본격적으로 Flexbox를 도입할 수 있게 되었고, 유지보수성이 크게 개선되었다.

Node 8 업그레이드 후 프로젝트에 async/await를 본격 도입했다. Promise 체인보다 가독성은 좋아졌지만 에러 핸들링 방식을 통일하는 과정에서 몇 가지 패턴을 정리할 필요가 있었다.

사내 관리자 대시보드를 Angular 1.x에서 새로운 프레임워크로 전환하는 작업을 검토하게 되었다. Angular 2+로 갈지, React로 갈지 결정이 필요한 시점이다.

IE11 지원이 필요한 프로젝트에서 CSS Grid를 점진적으로 도입했다. Flexbox와 Grid를 혼용하며 겪은 브라우저 호환성 문제와 해결 방법을 정리했다.

프로젝트 빌드 용량이 2MB를 넘어서면서 초기 로딩 속도가 문제가 되었다. CommonsChunkPlugin을 활용해 vendor와 manifest를 분리하고 번들 크기를 40% 줄인 과정을 정리했다.