Frontend

ES2017의 Object.entries()를 활용해 객체를 배열로 변환하고 다시 객체로 복원하는 패턴을 정리했다. 실무에서 자주 사용하는 객체 필터링과 매핑 예제를 포함했다.

여러 API를 동시에 호출할 때 Promise.all은 하나만 실패해도 전체가 실패한다. 일부 실패를 허용하면서도 성공한 결과를 활용하는 패턴을 정리했다.

레거시 Redux 코드베이스를 TypeScript로 점진적으로 전환하는 작업을 진행했다. Action과 Reducer에 타입을 적용하면서 마주친 실질적인 문제들과 해결 방법을 정리했다.

Redux를 걷어내고 새로운 Context API로 전역 테마 관리를 구현했다. 보일러플레이트가 확 줄어들어 만족스러웠다.

componentWillReceiveProps가 deprecated되면서 getDerivedStateFromProps로 전환했다. 예상보다 까다로웠던 마이그레이션 과정을 기록한다.

여러 API를 병렬로 호출하는 과정에서 Promise.all의 오류 처리가 예상과 다르게 동작했다. 하나의 요청이 실패하면 나머지 성공한 결과도 받지 못하는 문제를 해결한 과정을 정리했다.

redux-thunk나 redux-saga 없이 컴포넌트 레벨에서 비동기를 처리하는 방식을 시도했다. 프로젝트 규모가 작을 때는 오히려 이 방식이 더 단순했다.

레거시 코드 리팩토링 중 배열 순회 방식에 따른 성능 차이를 측정했다. 10만 건 이상의 데이터를 처리하는 배치 작업에서 유의미한 차이가 발생했다.

다섯 단계 이상 중첩된 컴포넌트에서 props를 전달하는 게 너무 번거로워졌다. Redux를 쓰기엔 과한 것 같아서 React 16.3에 새로 추가된 Context API를 도입해봤다.

Redux를 사용하던 중소 규모 프로젝트에서 보일러플레이트가 과하다는 판단이 들었다. React 16.3에서 정식 출시된 새로운 Context API로 마이그레이션한 과정을 기록한다.