빌드(Bulid)와 배포(Deploy), 그리고 번들링(Bundling)과 웹팩(Webpack)까지

저는 이번 주 선배님들과 스터디를 하다가 선배님들이 모두 번들링에 대해 한번씩 이야기 하시는 것을 들었습니다

번들링이 무엇인지 물어보셨지만 저는 대답을 하지 못하여서 아쉬웠습니다 다음에는 더 당당하게 답 하기 위해 이렇게 관련된 내용들과 함께 글을 쓰게 되었습니다 ㅠㅠ

---

🏗️ 빌드(Build)란?

코드가 브라우저에서 실행될 수 있도록 변환되는 과정입니다 그렇다면 대체 왜? 빌드를 해야 할까요?

바로 웹 사이트가 로드되는 속도를 빠르게 하고 웹사이트를 효율적이게 하기 위해 입니다!!

그렇게 하기 위해서는 번들링(Bundling)이라는 작업을 필요시 합니다 

그렇다면 이제 번들링에 대해 알아야 겠죠?

 

💐번들링(Bundling)이란?

파일 크기를 줄이고 여러 파일들을 하나로 묶는 것입니다 

번들링을 하면 네트워크 요청 수를 줄이고 로딩 속도를 개선할 수 있습니다

번들링의 도구들로는 Webpack, Vite 등이 있는데 이 도구들 중 저는 Webpack을 설명 드리겠습니다!!

웹팩(Webpack)이란?

가장 많이 사용하는 번들링 도구 입니다 

webpack은 javascript 애플리케이션을 위한 모듈 번들러(module bundler)라고 합니다

🎯모듈 번들러(module bundler)란?

HTML, CSS, Javascript 등의 자원을 각각의 모듈로 보고 이를 조합해 하나의 묶음으로 번들링(빌드)하는 도구입니다

---

🚀배포(Deploy)란?

빌드된 최종 결과물을 사용자들이 접근할 수 있도록 해주는 것입니다

사용자들이 결과물을 이용하게 하려면 배포 과정이 꼭 필요합니다 

Netlify, Vercel 등 여러 도구들을 이용하여서 쉽게 업로드 하여 사용자들이 결과물을 이용할 수 있게 합니다

---

글을 마치며

 

요약


빌드(Build): 코드가 브라우저에서 실행될 수 있도록 변환되는 과정

번들링(Bundling): 파일 크기를 줄이고 여러 파일들을 하나로 묶는 것

배포(Deploy): 빌드된 최종 결과물을 사용자들이 접근할 수 있도록 해주는 것

여러분들도 번들링을 하여서 훨씬 더 효율성있고 빠른 결과물을 내서 배포까지 할 수 있었으면 좋겠습니다