그알것 — 그럼에도 알아야 할 것들
홈질문커뮤니티
로그인
그알것 — 그럼에도 알아야 할 것들

Service

  • 홈
  • 소개
  • 질문
  • 커뮤니티

My

  • 내 워크스페이스
  • 저장한 질문
  • 작성한 답변

Policy

  • 이용약관
  • 개인정보처리방침
  • 문의

© 2026 그알것 · What Still Matters

질문 목록Performance
Performance

트리 쉐이킹이란 무엇이며 어떻게 적용하나요?

실무4/5
설계4/5
인간3/5
기초2/5

면접관의 질문 의도

트리 쉐이킹 단어를 아는지가 아니라, 어떤 전제(ESM·sideEffects·코드 구조)에서 효과가 나는지와 효과를 어떻게 측정하는지를 같이 보는지 가르려는 질문이다.

큐레이션 답변

학습 자료

트리 쉐이킹은 번들러가 모듈 의존 그래프를 정적으로 따라가며 어디서도 참조되지 않는 export를 결과 번들에서 제거하는 최적화다. ES 모듈은 import/export 구조가 정적이라 분석이 정확한 반면, 동적 require가 섞인 CommonJS·런타임 분기 코드는 보수적으로 남겨 두기 쉽다. 또 모듈에 사이드 이펙트가 있는지 번들러가 모르면 안전하게 그대로 두기 때문에, package.json의 sideEffects 표기와 re-export 패턴이 결과를 크게 가른다. 결국 효과 확인은 번들 분석 도구로 모듈 단위 크기 변화를 직접 확인하는 단계까지 가야 한다.

좋은 답변 구조

  1. 01트리 쉐이킹의 목적과 정적 분석 동작 원리를 정의한다
  2. 02ESM과 CommonJS 사이에서 분석 정확도가 갈리는 이유를 짚는다
  3. 03sideEffects 표기·re-export 패턴 같은 전제 조건을 정리한다
  4. 04번들 분석 도구로 효과를 측정·검증하는 절차로 마무리한다

자주 실수하는 포인트

CommonJS·동적 require 중심 코드에서도 동일한 효과를 기대한다
sideEffects: false를 무지성으로 적용해 부수 효과가 있는 모듈까지 떼어낸다
번들 크기를 측정하지 않고 'tree shaking 설정했으니 끝'이라고 본다

실무 맥락

  • 라이브러리 사용량이 늘면서 초기 번들이 부풀어 LCP·TTI에 영향을 주는 프론트엔드
  • 여러 앱이 공유하는 공통 패키지를 트리 쉐이킹 친화적으로 다듬어야 하는 모노레포
  • 라이브러리 자체를 배포하면서 사용자 번들에 잘 떨어지도록 export를 설계해야 하는 상황

본인 경험에 녹이는 힌트

번들 분석 결과로 큰 비중을 차지하던 모듈을 정리해 본 경험이 있다면 측정 기반 최적화 사례로 연결할 수 있다

CommonJS 의존성을 ESM 대체로 옮기며 번들 크기 변화를 본 적이 있다면 전제 조건의 영향력으로 엮을 수 있다

공통 라이브러리에 sideEffects 정책을 정리해 본 경험이 있다면 라이브러리 작성자 관점에서 말할 수 있다

커뮤니티 인기 답변

전체 0개

아직 공개된 답변이 없어요. 첫 공개 답변을 남겨보세요.

관련 꼬리 질문

Q1트리 쉐이킹과 코드 스플리팅의 차이는 무엇인가요
Q2re-export 패턴이 최적화에 미치는 영향은 무엇인가요
Q3라이브러리 작성 시 트리 쉐이킹 친화적으로 설계하는 방법은 무엇인가요
아직 답을 쓰지 않았어요.
큐레이션 답변과 다른 사람 답변을 보고, 자기 언어로 답을 정리해보면 학습 효과가 가장 큽니다.
목차
  • 01면접관의 질문 의도
  • 02큐레이션 답변
  • 03좋은 답변 구조
  • 04자주 실수하는 포인트
  • 05실무 맥락
  • 06본인 경험에 녹이는 힌트
  • 07커뮤니티 인기 답변준비중
  • 08관련 꼬리 질문