이 질문 뒤에 면접관이 확인하려는 것은 따로 있습니다.
졸업 프로젝트 React 앱의 초기 로딩 속도가 느려서 번들러 설정을 처음 직접 건드려봤습니다. webpack-bundle-analyzer로 번들 구성을 시각화했더니 lodash 전체가 한 번에 들어가고 있다는 걸 발견했습니다. lodash-es로 교체하고 트리쉐이킹을 활성화했더니 번들 크기가 140kb 줄었습니다. 그 뒤로 코드 스플리팅을 적용해 초기 번들을 더 나눴고, Lighthouse 점수가 58에서 74로 올랐습니다. 이후 사이드 프로젝트에서 Rollup을 써봤는데, 라이브러리 빌드에는 설정이 간결하고 트리쉐이킹 결과가 더 깔끔했습니다. 두 도구를 모두 써본 뒤 애플리케이션 빌드는 Webpack, 라이브러리 배포는 Rollup이 더 맞는 자리라는 감각이 생겼고, 도구를 고르기 전에 용도를 먼저 따지는 습관이 생겼습니다.
모듈 번들러 경험에서 문제가 분명해진 경험은 번들 분석 도구로 큰 의존성을 시각화한 케이스였습니다. 로딩이 느린 원인을 감으로 찾으려다 실패하다가, webpack-bundle-analyzer로 번들 구성을 시각화했더니 특정 라이브러리가 예상보다 훨씬 큰 비중을 차지하고 있었습니다.
문제를 시각화하자 어디를 최적화해야 하는지가 명확해졌습니다. 성능 최적화에서 측정 도구 없이 가정으로 접근하면 틀린 부분을 최적화하는 경우가 생긴다는 결이 생겼습니다.
이후에는 성능 문제에서 먼저 측정 도구로 병목을 확인하는 방식이 자리 잡았습니다.
모듈 번들러 경험에서 효과로 이어진 경험은 코드 스플리팅 적용 후 초기 로딩 시간을 비교한 케이스였습니다. 번들 분석 이후 자주 쓰이지 않는 페이지를 lazy loading으로 분리했습니다. 적용 전후 Chrome DevTools에서 초기 로딩 시 전송되는 파일 크기를 비교했더니 줄어든 것을 확인했습니다.
수치로 효과를 확인하자 어떤 변경이 실질적인 개선이었는지가 명확해졌습니다. 번들러 최적화의 효과는 적용 후 실제 측정값을 비교했을 때 의미가 생긴다는 결이 남아 있습니다.
답변에서 흔히 빠지는 것들 — 빠져 있으면 꼬리질문이 깊어집니다.
이 질문에 이어 세나클소프트 프론트엔드 면접관이 던질 가능성이 높은 후속 질문.
이 페이지의 질문·답변·꼬리질문은 유사 직군 채용 시장의 공개된 면접 후기·커뮤니티 게시물을 분석해 구성한 학습 자료입니다. 특정 회사가 실제로 이 질문을 출제했다는 것을 보장하지 않으며, 모든 예시는 우문현답이 직접 작성한 창작물입니다. 해당 회사의 공식 입장과는 무관합니다. 회사 측의 정정 요청이 있을 경우 24시간 이내에 응답·수정합니다.