[김민태] 01. 시작하며 - 번들러 PARCEL에 대하여 (webpack과의 차이)

01. 시작하며 섹션에는 총 3가지의 짧은 인강이 준비되어 있는데, 본 포스팅에서는 그 중 학습 환경 구성에서 특히 번들러 관련 항목을 정리해 볼 예정이다.

---

원시시대(?)의 인터넷을 보면 서비스가 엄청 크지 않았기 때문에 html에서 직접 <script ~ >를 로드하여도 큰 무리가 없었다.(고 한다.) 하지만 요즘 인터넷 서비스를 봐도 알다시피 서비스가 커지고 다양해짐에 따라 script 코드가 방대해지며, 각 파일들의 의존성과 로드 보장 순서 등이 중요한 화두가 되었다.

 

이를 해결하기 위해 사용하는 것이 바로 번들러이다.

번들러는 인터넷 서비스를 구성하기 위한 모든 모듈 파일들을 하나 또는 그 이상의 파일로 엮어주어 브라우저에서 코드가 잘 돌아갈 수 있도록 도와주는 소프트웨어이다. 좀 더 상세히 말해보자면 js들을 모아서 하나의 js로 보여주기도 하고, scss 파일들을 모아서 하나의 css로 모아주거나 혹은 이미지를 최적화 시켜 나타내주기도 한다.

 

실제로 가장 많이 사용되는건 webpack이라는 번들러이다.

https://webpack.js.org/

webpack

https://webpack.js.org/

상단 사진은 웹팩 홈페이지의 메인 사진인데 위에서 설명한 번들러의 개념을 가장 잘 보여주는 그림이 아닐까 싶다.

 

번들러에는 webpack 뿐 만 아니라 rollup, parcel 등과 같은 여러 종류의 소프트웨어가 있는데, 사용하는 방식도 장/단점도 조금씩 달라 각자의 프로젝트에 맞는 혹은 개발자가 가장 익숙한 번들러를 사용하면 좋을 것 같다.

 

해당 강의에서는 parcel이라는 번들러를 채택하여 사용하고 있다.

https://ko.parceljs.org/getting_started.html

🚀 시작하기

 

홈페이지의 설명에 나온 것 처럼

Parcel[파설, /parsəl/]은 개발 경험에서 차이를 느낄수 있는 웹 애플리케이션 번들러 입니다. 멀티코어 프로세싱으로 불꽃 튀게 빠른 성능을 제공하고 그 어떤 설정도 요구하지 않습니다.

 

파셀은 복잡하게 설정을 하지 않아도 된다는 점에서 웹팩과 가장 큰 차이를 보이고있다. 파셀 사용기는 아마 강의를 들으면 더 진행 될 것 같아 이후 포스팅에서 상세하게 다루게 되지 않을까 싶어 패스한다.

 

개인적으로 웹팩은 아직까지는 실무에서 가장 많이 사용되는 번들러로 이미 안정성이 보장되었고, 러닝커브가 높지만 커스터마이징 할 수 있는 부분이 많아 섬세하게 조정해야하는 대규모 프로젝트에 잘 맞는다고 생각된다. 더불어 개발자라면 웹팩에 대해서는 꼭 공부를 해 두어야 하지 않을까 생각한다.

 

반대로 파셀은 비교적 최근에 나와 사용자는 많이 없지만 커스텀으로 설정하는 부분이 현저히 적기 때문에 큰 러닝커브 없이 번들링을 할 수 있는 장점이 있어 작은 단계부터 시작하거나 빠르게 진행되어야 하는 프로젝트에 잘 어울릴 것 같다. 더불어 막 개발에 막 입문을 한 사람이번들링 시스템에 대해 이해할 때, 맛보기로 좋은 사용이 될 수 있을 것 같다.