번들러에 대하여(1)

Bundler에 대해 학습하고 공유하는 글입니다.

최근 ES(ECMAScript)에 대하여 학습을 진행했습니다. 그러던 중 ES6를 미지원하는 브라우저에 대해서 알게 되었고(IE 등)그렇다면 ES 규격에 맞춰 프로젝트를 브라우저에 띄워주는 역할을 누가할까에 대해 알아보던 중 번들러에 대해 학습하게되어 해당 글을 통해 공유하게 되었습니다.

번들러는 무엇인가

웹 애플리케이션 개발에서 사용되는 도구로, 여러 개의 모듈 또는 파일을 하나로 묶어서 번들로 만드는 역할을 합니다. 번들링은 웹 애플리케이션에서 필요한 자원(JavaScript 파일, CSS 파일, 이미지 등)들을 하나의 파일로 묶어서 클라이언트에게 전달하는 과정을 말합니다.

번들러의 역할은 무엇인가

1. 모듈 지원: ES6부터 모듈 시스템이 ES 표준에 추가되었습니다. 모듈은 파일 단위로 작성되며, 다른 모듈에서 필요한 부분을 내보내고 가져와 사용할 수 있습니다. 번들러는 이러한 ES 모듈을 처리하고, 의존성을 파악하여 번들로 묶어줍니다.
2. 의존성 해결: ES 모듈은 다른 모듈에 대한 의존성을 선언하고, 필요한 모듈을 가져와 사용할 수 있습니다. 번들러는 이러한 의존성 관계를 파악하고 필요한 모듈을 로드하여 번들로 묶어줍니다. 이를 통해 웹 애플리케이션에서 모듈 간의 의존성을 효율적으로 관리할 수 있습니다.
3. 트랜스파일링: 번들러는 ES6 이상의 문법을 사용하여 작성된 JavaScript 코드를 이전 버전의 JavaScript로 변환할 수 있습니다. 이는 오래된 브라우저에서도 호환성을 유지하기 위해 필요한 작업입니다. 주로 Babel과 함께 사용되어 ES6+ 코드를 ES5 코드로 변환하는 작업을 수행합니다.
4. 코드 최적화: 번들러는 코드의 크기를 최소화하고 성능을 향상시키기 위해 다양한 최적화 작업을 수행할 수 있습니다. 이는 중복 코드 제거, 압축, 난독화 등을 포함합니다. 번들링된 결과물은 최적화된 형태로 클라이언트로 전달되어 빠른 로딩 속도와 효율적인 실행을 가능하게 합니다.
5. 환경 분리: 번들러는 개발 환경과 프로덕션 환경에서 서로 다른 설정을 사용할 수 있도록 지원합니다. 개발 환경에서는 개발 서버와 HMR(Hot Module Replacement)과 같은 기능을 제공하여 개발 과정을 용이하게 만들어줍니다. 프로덕션 환경에서는 최적화된 번들을 생성하고, 캐싱과 성능 향상을 위한 다양한 기능을 활용할 수 있습니다.

많이 사용되는 JS 번들러로는 webpack이 있습니다. 주로 babel과 함께 사용하는데 이에 대해 다음 글에 이어서 작성하도록 하겠습니다.