Frontend

깊은 컴포넌트 트리에서 props를 계속 전달하는 문제를 새로운 Context API로 해결했다. Redux를 도입하기엔 과한 상황에서 유용한 선택지였다.

팀 내에서 TypeScript 도입 논의가 시작됐다. 기존 JavaScript 프로젝트에 점진적으로 적용 가능한지, 러닝커브는 어느 정도인지 검토한 내용을 정리했다.

대시보드 프로젝트에서 불필요한 리렌더링으로 인한 성능 저하가 발생했다. shouldComponentUpdate와 PureComponent를 적용해 해결한 과정을 정리했다.

여러 API를 동시에 호출할 때 Promise.all을 사용했는데, 하나만 실패해도 전체가 중단되는 문제가 있었다. 일부 실패해도 성공한 요청은 처리할 수 있도록 개선한 과정을 정리했다.

관리자 대시보드 리뉴얼 작업 중 CSS Grid와 Flexbox를 적절히 혼용해 반응형 레이아웃을 구현했다. 각각의 특성을 이해하고 적재적소에 활용하는 것이 중요했다.

Promise.all은 하나라도 reject되면 전체가 실패한다. 모든 Promise의 결과를 성공/실패 여부와 상관없이 받아야 하는 상황에서 allSettled 패턴을 구현했다.

기존에 props drilling으로 구현했던 다국어 처리를 React 16.3의 새로운 Context API로 마이그레이션했다. Redux를 쓰기엔 과한 상황에서 좋은 대안이 됐다.

ES2019에서 제안된 Array.flat() 메서드를 IE11 환경에서 사용하기 위해 폴리필을 직접 구현했다. 재귀 방식과 스택 방식 두 가지를 비교하고, 실무에 적용 가능한 수준으로 작성했다.

레거시 TypeScript 프로젝트에 strictNullChecks 옵션을 점진적으로 적용하는 과정을 기록했다. 기존 코드베이스에서 발생하는 타입 에러를 단계적으로 해결하는 전략을 정리했다.

여러 API 호출을 병렬로 처리하다 Promise.all의 에러 처리 방식 때문에 장애를 겪었다. 하나의 실패가 전체를 멈추는 문제를 해결한 과정을 정리했다.