개발자들은 종종 '바퀴를 재발명하지 않기 위해' Lodash나 Moment.js 같은 거대한 유틸리티 라이브러리를 프로젝트에 추가합니다. 날짜를 예쁘게 포맷하는 단 하나의 기능이 필요했을 뿐인데, 라이브러리 전체를 import 하는 식이죠. 기능은 잘 동작하지만, 대가가 따릅니다. 우리 웹사이트의 최종 자바스크립트 파일(번들, Bundle) 크기가 수십, 수백 킬로바이트씩 거대해지는 겁니다. 사용자, 특히 모바일 환경의 사용자는 이 '죽은 코드(Dead Code)' 덩어리 때문에 훨씬 느린 로딩 속도를 경험하게 됩니다. 🐌
이런 낭비를 막기 위해, 현대 자바스크립트 번들러(Bundler) 들은 아주 똑똑한 다이어트 비법을 사용합니다. 바로 트리 쉐이킹(Tree Shaking) 입니다.
트리 쉐이킹이란? 나무를 흔들어 잘 익은 열매만 얻기
트리 쉐이킹은 이름 그대로 '나무를 흔든다' 는 뜻입니다. 우리 프로젝트의 전체 코드와 그 의존성(Dependencies)을 하나의 커다란 나무라고 상상해 보세요. 🌳
- 나무: 프로젝트 전체 코드와 node_modules에 설치된 모든 라이브러리.
- 나뭇잎과 열매: 각 파일에 들어있는 함수, 클래스, 변수 등.
- 뿌리와 줄기: 프로젝트의 시작점 (index.js 같은 엔트리 포인트).
빌드(Build) 과정에서 번들러가 이 나무를 마구 흔들면 어떻게 될까요? 뿌리부터 시작해서 줄기와 가지에 단단히 연결된, 즉 실제로 우리 코드에서 import 해서 사용한 '잘 익은 열매'들만 바구니(최종 번들 파일)에 떨어집니다. 반면, 한 번도 사용되지 않은 '죽은 나뭇잎'이나 '썩은 열매'들은 그대로 나무에 남겨지죠. 이 과정을 통해 최종 결과물에는 꼭 필요한 코드만 남게 되어 파일 크기가 극적으로 줄어듭니다.
이 마법 같은 과정은 ES6 모듈(import, export) 덕분에 가능합니다. import와 export는 코드를 실행하지 않고도 어떤 코드가 다른 코드에 의존하는지 정적으로 분석할 수 있는 구조이기 때문에, 번들러가 "아, 이 함수는 아무도 부르지 않으니 버려도 되겠군!"이라고 판단할 수 있는 것입니다.
어떻게 동작할까요? (간단한 예시)
우리가 만든 math-utils.js 라는 라이브러리가 있다고 가정해 봅시다.
// math-utils.js (우리가 만든 라이브러리)
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b; // 이 함수는 아무도 쓰지 않을 겁니다.
export const multiply = (a, b) => a * b;
이제 우리 앱의 메인 파일인 main.js에서 이 라이브러리의 일부 기능만 가져다 씁니다.
// main.js (우리 앱의 코드)
import { add, multiply } from './math-utils.js';
const sum = add(5, 10);
const product = multiply(sum, 2);
console.log(product); // 30
이 코드를 Webpack이나 Rollup 같은 번들러로 빌드하면, 트리 쉐이킹 과정을 거쳐 다음과 같은 결과물(최종 번들) 이 나옵니다.
// 최종 번들 파일 (실제로는 압축되어 더 복잡합니다)
const add = (a, b) => a + b;
const multiply = (a, b) => a * b;
const sum = add(5, 10);
const product = multiply(sum, 2);
console.log(product);
보이시나요? 우리가 import 하지 않은 subtract 함수는 최종 결과물에서 완전히 사라졌습니다. 이것이 바로 트리 쉐이킹의 핵심입니다.
왜 이것이 중요할까요?
- 더 빠른 웹사이트: 자바스크립트 파일 크기가 작아지면 사용자가 웹사이트를 다운로드하고 파싱하고 실행하는 시간이 단축됩니다. 이는 사용자 경험(UX)과 검색 엔진 최적화(SEO)에 직접적인 영향을 미칩니다. 🚀
- 라이브러리 공포 해소: "이거 하나 쓰자고 이렇게 큰 라이브러리를 추가해도 되나?"라는 고민 없이, 필요한 기능을 마음껏 가져다 쓸 수 있습니다. 트리 쉐이킹이 알아서 청소해 줄 테니까요.
- 더 나은 개발 습관: 사용하지 않는 코드는 배포되지 않는다는 사실은 개발자들이 코드를 더 깔끔하게 유지하도록 동기를 부여합니다.
마치며
트리 쉐이킹은 프론트엔드 개발자라면 반드시 이해해야 할, 보이지 않는 곳에서 우리를 돕는 강력한 최적화 기술입니다. 우리가 작성한 코드가 사용자에게 전달되기까지, 빌드 도구들이 얼마나 똑똑하게 '다이어트'를 시켜주는지 알게 되면, 라이브러리를 사용하고 코드를 구성하는 방식에 대한 시각이 한 단계 더 넓어질 것입니다.
결국, 트리 쉐이킹은 사용자가 단 1바이트의 불필요한 코드도 다운로드하지 않게 하려는, 현대 웹 개발의 보이지 않는 배려인 셈입니다. 💖