Frontend

React 16.7 alpha 버전에서 발표된 Hooks를 실제로 테스트해봤다. 아직 프로덕션에 적용하기엔 이르지만, 클래스형 컴포넌트를 함수형으로 전환할 수 있는 가능성을 확인했다.

반응형 대시보드 레이아웃 구현 중 CSS Grid와 Flexbox를 함께 사용하면서 발생한 아이템 크기 계산 오류를 해결했다. min-width: 0 속성이 핵심이었다.

API 호출을 순차적으로 처리하던 코드를 병렬로 바꾸면서 응답 시간을 절반 이상 줄였다. Promise.all을 활용한 간단한 리팩토링이었지만 효과는 확실했다.

회사 프로젝트에 TypeScript를 도입하게 되었다. 기존 JavaScript 코드베이스를 한 번에 마이그레이션할 수 없어서 점진적으로 전환하는 방법을 선택했다. 실제 적용 과정과 마주친 문제들을 정리했다.

레거시 JavaScript 프로젝트에 TypeScript를 한 번에 마이그레이션하기엔 리스크가 컸다. allowJs 옵션을 활용해 점진적으로 전환한 과정을 정리했다.

여러 API 요청을 동시에 처리하면서 Promise.all과 Promise.race의 차이를 제대로 이해하게 되었다. 실제 업무에서 마주한 사례를 중심으로 두 메서드의 적절한 사용 시점을 정리했다.

레거시 시스템 마이그레이션 중 대용량 데이터 처리 성능 이슈가 발생했다. 배열 순회 방식에 따른 성능 차이를 측정하고 적절한 선택 기준을 정리했다.

React 16.6에서 추가된 lazy와 Suspense를 프로젝트에 적용했다. 기존 react-loadable을 대체하면서 번들 크기를 줄이고 초기 로딩 속도를 개선한 과정을 정리한다.

프로젝트에 React 16.6의 Suspense와 lazy를 적용하며 번들 사이즈를 30% 줄였다. 코드 스플리팅 전략과 실제 적용 과정을 기록한다.

다단계 컴포넌트 구조에서 props를 계속 전달하는 문제가 있었다. React 16.3부터 정식 지원되는 Context API를 도입해서 해결했다.