Frontend

코로나19로 인한 급작스런 재택근무 전환 과정에서 팀원들이 props drilling 회피를 위해 Context API를 과도하게 사용하는 문제가 발생했다. 불필요한 리렌더링으로 성능이 저하되어 Context 사용 기준을 재정립하고 리팩토링을 진행했다.

코로나로 인한 급작스러운 재택근무 전환 후 팀 협업 방식이 바뀌면서 컴포넌트 라이브러리 정비의 필요성이 커졌다. PropTypes만으로는 부족했던 타입 안정성을 개선하고 Storybook으로 문서화를 강화했다.

프로젝트의 카드 레이아웃을 float와 flexbox에서 CSS Grid로 마이그레이션했다. 미디어 쿼리 없이도 auto-fit과 minmax로 반응형 처리가 가능해져 코드량이 크게 줄었다.

API 호출 시 요청 파라미터에 따라 응답 타입이 달라지는 경우가 있다. 조건부 타입을 활용해 타입 안전성을 유지하면서 이를 해결했다.

전역 상태 관리를 Context API로 전환했다가 불필요한 리렌더링 문제에 부딪혔다. useMemo와 Context 분리로 해결한 과정을 기록한다.

프로젝트에 Tailwind CSS를 도입한 지 한 달이 지났다. utility-first 접근 방식에 대한 초기 거부감과 실제 사용 후 느낀 생산성 변화를 정리했다.

로컬 개발 환경에서 API 서버와 통신할 때 CORS 이슈를 해결하기 위해 Webpack DevServer의 Proxy 설정을 적용했다. 설정 방법과 주의사항을 기록한다.

TypeScript 3.7에서 추가된 Optional Chaining을 프로젝트에 적용했다. null 체크 코드가 대폭 줄어들면서 가독성이 개선되었고, 특히 API 응답 처리 부분에서 효과가 컸다.

중첩된 객체 속성 접근 시 매번 null/undefined 체크하던 코드를 Optional Chaining으로 개선했다. TypeScript 3.7에서 정식 지원되기 시작한 이 기능으로 코드 가독성이 크게 향상되었다.

관리자 대시보드를 리뉴얼하면서 Flexbox 대신 CSS Grid를 선택했다. 반응형 레이아웃 구현이 훨씬 간결해졌고, 미디어 쿼리도 줄일 수 있었다.