Frontend

레거시 JavaScript 프로젝트에 TypeScript를 한 번에 적용하기는 리스크가 컸다. allowJs 옵션을 활용해 점진적으로 마이그레이션하는 전략을 택했고, 3개월간 진행한 과정을 정리했다.

API 호출 최적화 작업 중 Promise.all과 Promise.race의 차이를 명확히 이해하게 됐다. 실제 업무에서 마주친 케이스별로 어떤 메서드를 선택해야 하는지 정리했다.

기존 Redux로 관리하던 테마와 언어 설정을 새로운 Context API로 마이그레이션했다. 보일러플레이트가 크게 줄어들고 컴포넌트 구조가 단순해졌다.

Promise 체이닝에서 async/await으로 전환하면서 에러 핸들링 방식을 정리했다. try-catch의 중복을 줄이면서도 에러를 놓치지 않는 방법을 찾았다.

ES6에서 추가된 includes 메서드를 프로젝트에 적용하면서 indexOf와의 성능 차이가 궁금해졌다. 실제 프로덕션 환경에서 사용하기 전에 간단한 벤치마크를 진행했다.

프로젝트에서 5단계 이상 props를 내려주는 컴포넌트 구조가 유지보수를 어렵게 만들고 있었다. React 16.3에서 정식 출시된 새로운 Context API를 도입해 props drilling 문제를 해결했다.

반응형 대시보드를 만들면서 CSS Grid와 Flexbox를 조합해 사용했다. 각각의 특성을 이해하고 적재적소에 배치하니 미디어쿼리 없이도 유연한 레이아웃을 구성할 수 있었다.

레거시 float 레이아웃을 CSS Grid로 전환하는 작업을 진행했다. IE11 지원 요구사항 때문에 예상보다 복잡한 작업이 되었고, 몇 가지 해결책을 찾아냈다.

레거시 프로젝트에서 사용하던 구 Context API를 16.3에서 정식 릴리즈된 새 Context API로 마이그레이션했다. 기존 방식보다 타입 안정성과 가독성이 개선되었다.

React 16.3에서 정식으로 추가된 새 Context API를 프로젝트에 적용했다. 기존 Redux를 전부 대체하진 않았지만, 테마나 언어 설정같은 전역 상태 관리에 유용했다.