Frontend

프로젝트에서 Flexbox를 본격 도입하면서 IE11 호환성 문제를 여러 건 마주쳤다. 주로 발생한 이슈와 해결 방법을 정리했다.

프로젝트 규모가 커지면서 PropTypes만으로는 타입 안정성이 부족하다고 판단했다. Flow를 도입해 전체 컴포넌트 타입을 정적으로 체크하도록 마이그레이션한 과정을 기록한다.

babel-preset-env를 도입해 타겟 브라우저에 맞춰 필요한 polyfill만 선택적으로 적용하도록 변경했다. 번들 사이즈를 약 30KB 줄일 수 있었다.

프로젝트 진행 중 라이프사이클 메서드를 헷갈려서 정리했다. componentWillMount, componentDidMount 등의 호출 순서와 실제 사용 케이스를 기록한다.

비동기 API 호출 로직을 콜백에서 Promise로 전환하면서 겪은 시행착오를 정리했다. catch 블록의 위치에 따라 에러 처리 범위가 달라지는 부분이 핵심이었다.

비동기 API 호출 코드를 Promise로 리팩토링하면서 체이닝과 에러 처리 패턴을 정리했다. 콜백 지옥에서 벗어나는 과정에서 마주친 실수들을 기록한다.

프로젝트에서 라이프사이클 메서드를 잘못 사용해 메모리 누수가 발생했다. 각 메서드의 역할과 사용 시점을 정리했다.

ES2016에서 추가된 Array.includes() 메서드를 레거시 프로젝트에 적용하면서 기존 indexOf와 성능을 비교했다. 가독성 개선은 확실하지만 성능 차이는 생각보다 미미했다.

IE 지원 이슈로 미뤄뒤던 Flexbox를 프로젝트에 도입했다. 기존 float 기반 레이아웃 대비 수직 중앙 정렬이 훨씬 간결해졌다. 실무에 적용하며 정리한 내용을 기록한다.