Frontend

float와 flexbox로 구현된 복잡한 대시보드 레이아웃을 CSS Grid로 전환했다. IE11 지원 요구사항 때문에 autoprefixer와 fallback 전략을 함께 적용했다.

프로젝트에서 미디어 쿼리 없이 반응형 카드 레이아웃을 구현할 필요가 있었다. CSS Grid의 auto-fit과 minmax를 활용해 깔끔하게 해결했다.

레거시 클래스 컴포넌트로 작성된 다단계 폼을 Hooks로 전환했다. useReducer와 custom hook을 조합해 상태 로직을 분리하니 테스트와 유지보수가 훨씬 수월해졌다.

프로젝트에 React Hooks를 본격 도입하면서 반복되는 API 호출 로직을 Custom Hook으로 추상화했다. useFetch 훅을 만들어 로딩, 에러, 데이터 상태를 일관되게 관리할 수 있게 되었다.

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

기존 클래스 컴포넌트로 작성된 복잡한 Form을 Hooks로 전환했다. useState와 useEffect를 활용해 코드량을 30% 줄이고 가독성을 개선한 과정을 정리했다.

TypeScript 3.7에서 정식 지원되는 Optional Chaining을 프로젝트에 적용했다. null 체크 코드가 대폭 줄어들면서 가독성이 개선되었고, 예상치 못한 런타임 에러도 감소했다.

TypeScript 3.7에서 정식 지원되기 시작한 Optional Chaining을 프로젝트에 적용했다. null 체크 코드가 얼마나 간결해지는지, 그리고 주의할 점들을 정리한다.

기존 클래스 컴포넌트로 작성된 다단계 폼을 Hooks로 마이그레이션했다. useState와 useReducer를 적절히 조합하니 코드량이 30% 정도 줄었고, 로직 재사용도 훨씬 수월해졌다.

기존 React 프로젝트에 TypeScript를 한 번에 적용하기는 리스크가 크다. 실제 업무에서 점진적으로 마이그레이션하며 겪은 과정과 전략을 정리했다.