Frontend

기존 float와 flexbox 조합으로 구현된 대시보드 레이아웃을 CSS Grid로 전환했다. IE11 지원 때문에 고민했지만, autoprefixer와 fallback 전략으로 해결했다.

여러 API를 동시에 호출해야 하는 상황에서 Promise.all과 Promise.race를 적절히 활용해 로딩 시간을 단축했다. 각 메서드의 특성과 실무 적용 사례를 정리했다.

프로젝트 리뉴얼 작업 중 CSS Grid와 Flexbox를 함께 사용하면서 겪은 브라우저 호환성 문제와 해결 방법을 정리했다. IE11 지원 요구사항이 있어 fallback 전략이 필요했다.

React 16.6에서 추가된 React.memo를 프로젝트에 적용해봤다. PureComponent의 함수형 컴포넌트 버전으로, 불필요한 리렌더링을 방지하는 데 유용했다.

레거시 JavaScript 프로젝트에 TypeScript를 한 번에 마이그레이션하기는 위험부담이 컸다. allowJs 옵션을 활용해 점진적으로 전환하는 전략을 적용했고, 3개월간의 경험을 정리했다.

React 16.6에서 추가된 React.memo를 프로젝트에 적용해봤다. PureComponent의 함수형 컴포넌트 버전으로, props 비교를 통해 리렌더링을 방지한다. 리스트 렌더링 성능 개선에 효과적이었다.

레거시 JavaScript 프로젝트에 TypeScript를 단계적으로 도입한 과정을 정리했다. allowJs 옵션을 활용해 기존 코드와 공존하면서 새로운 모듈부터 TS로 작성하는 방식을 택했다.

프로젝트 규모가 작은 경우 Redux 도입이 오버엔지니어링일 수 있다. React 16.3에서 개선된 Context API를 활용해 Redux 없이 전역 상태를 관리한 경험을 정리했다.

여러 API를 동시에 호출하되 일부 실패해도 나머지 결과를 받아야 하는 상황이 생겼다. Promise.all은 하나만 실패해도 전체가 reject되어 사용할 수 없었고, 직접 allSettled를 구현했다.

레거시 폼 검증 로직을 Object.entries()로 리팩토링했다. for...in 루프 대신 함수형 접근으로 코드 가독성이 개선됐고, 검증 규칙 추가가 간편해졌다.