mapbox-gl 라이브러리를 npm으로 다운받아 사용해야할지 cdn으로 사용할지 고민하다가 갑자기 번들링으로 주제가 옮겨왔다. 나는 어쨌건 npm package 방식을 사용하기로 했는데, 이 방식이 번들링 방식이라고도 불리길래 왜 그런가 궁금해졌다.
대강 웹 앱을 만들기 위해 개발한 수많은 파일들을 묶어주는 작업이고 그 번들링 도구에는 Webpack이나 Vite(정확히는 빌드 도구) 등이 있다는 건 알겠는데 더 자세히 어떤 로직이고 왜 필요한지, 어떤 상황에 필요한지, 결론적으로 이 프로젝트에서도 반드시 필요할지 등을 알고 싶어졌다. 그래서 이것저것 찾아보고 내가 이해한 바를 정리해봤다.
번들링 작업이란
번들링이란 웹앱을 개발하고 나서 배포할 때 필요한 코드만 알잘딱깔센하게 모아서 최소한의 HTML, CSS, JS 파일로 묶는 작업을 말한다. 번들링 작업을 진행하고 배포하면 브라우저에서는 프로젝트 통째로가 아니라 번들링된 파일들을 받아서 실행하기 때문에 웹앱의 로딩 시간을 줄여주어 성능에 있어 훨씬 유리한 것이다.
번들링 작업은 언제 필요한가
일단 소규모의 바닐라 JS 웹앱에서는 번들링 작업이 굳이 필요하지 않을 것이다. 번들링은 주로 npm*을 통해 리액트 같은 라이브러리를 설치하여 사용할 때, 라이브러리에 포함된 파일들이 아주 많아 프로젝트의 용량이 커질 경우에 로딩 속도 등의 성능 개선을 위해 필요해진다.
npm은 Node Package Manager의 약어로, Node.js(자바스크립트 런타임 환경) 또는 자바스크립트에 필요한 패키지(라이브러리)들을 설치하고 관리하는 도구이다.
npm init 명령을 통해 패키지들의 정보와 프로젝트 의존성을 관리하는 package.json 파일을 생성하고,
npm install [패키지명] 명령을 통해 패키지를 설치한다. 설치된 파일들은 node_modules/ 폴더에 저장되고, package.json이 자동으로 업데이트된다.
이 프로젝트의 경우 소규모이고 사용하는 라이브러리도 MapboxJS 밖에 없을 것이므로 굳이 번들링을 할 필요는 없을 것으로 예상된다.
!!
..라고 생각했는데 Mapbox 공식 홈페이지를 보니 npm으로 설치해서 사용할 경우 모듈 번들러를 사용해야 한다고 돼 있었다.
아무래도 번들링에 대한 조사가 더 필요할 것 같다.
To be Continued...
