Frontend

React 16.2에서 정식 지원되는 Fragment를 프로젝트에 적용했다. 불필요한 div 래퍼를 제거하면서 마크업이 간결해졌고, CSS 레이아웃 이슈도 해결됐다.

레거시 JavaScript 프로젝트에 TypeScript를 단계적으로 도입한 경험을 정리했다. allowJs 옵션을 활용해 기존 코드를 유지하면서 새로운 모듈부터 TS로 작성하는 방식을 택했다.

팀 내에서 TypeScript 도입 논의가 시작되었다. 기존 React 프로젝트에 적용 가능성과 러닝커브를 검토한 내용을 정리했다.

float와 position으로 구현된 대시보드 레이아웃을 CSS Grid로 전환했다. IE11 지원 때문에 고민했지만 autoprefixer로 해결했다.

검색 자동완성 기능 구현 중 과도한 API 호출 문제가 발생했다. lodash debounce를 사용해 해결했지만, React 컴포넌트 라이프사이클과 맞물려 예상치 못한 동작이 있었다.

기존 JavaScript 프로젝트에 TypeScript를 단계적으로 도입했다. allowJs 옵션을 활용해 JS와 TS를 혼용하며 리스크를 최소화하는 방법을 정리했다.

실무에서 대량의 데이터를 처리하다 보니 map, filter, reduce를 체이닝할 때와 for 루프를 사용할 때의 성능 차이가 궁금해졌다. 직접 측정해본 결과를 기록한다.

프로젝트에서 Promise 체이닝 코드를 async/await로 전환했다. 가독성이 확실히 개선되었고, 에러 핸들링도 더 직관적이다. ES2017 스펙이지만 Babel 덕분에 안정적으로 사용 가능하다.

React 16.2에서 추가된 Fragment 단축 문법을 프로젝트에 적용했다. div 래퍼 지옥에서 벗어날 수 있었지만, 몇 가지 제약사항도 있었다.

여러 API 호출을 동시에 처리하면서 Promise.all과 Promise.race의 차이를 명확히 이해하게 되었다. 실제 프로젝트에서 마주친 케이스를 정리했다.