React

코로나로 인한 재택근무 전환 후 로컬 개발 환경에서 빌드 속도가 현저히 느려지는 문제를 겪었다. Webpack 설정 최적화와 캐싱 전략으로 빌드 시간을 40% 단축했다.

코로나로 인한 급작스러운 재택근무 전환 후 팀 전체의 개발 환경을 정비했다. 로컬 환경 구성 자동화와 Hot Reload 최적화로 생산성을 유지할 수 있었다.

코로나로 인한 재택근무 전환 후 팀 내 코드 리뷰 프로세스를 개선하면서 레거시 클래스 컴포넌트를 Hooks로 전환했다. 특히 생명주기 메서드가 복잡하게 얽힌 컴포넌트들을 단순화하는 과정을 정리했다.

코로나19로 인한 급작스러운 재택근무 전환 과정에서 기존 Redux 중심 상태 관리의 복잡도 문제가 부각되었다. Context API와 useReducer를 활용해 불필요한 보일러플레이트를 제거하고 팀 협업 효율을 개선한 과정을 정리했다.

코로나19로 인한 갑작스런 재택근무 전환 후 사내 대시보드의 렌더링 성능 이슈를 발견했다. React DevTools Profiler를 활용해 불필요한 리렌더링을 찾아내고 최적화한 과정을 기록한다.

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

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

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

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

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