[Front-end] 모듈 번들

themewagon에서 템플릿을 찾아보다가 맘에드는 템플릿을 발견했다 tailwindcss 템플릿이었는데 마침 저번에 혼자 React,Tailwindcss 를 사용해서 쇼핑몰 메인 홈페이지 클론코딩을 해봤던 경험이 있기에 당당하게 다운로드했다.

생각보다 템플릿을 적용하는게 쉽지가 않다... 정보도 몇개 없는거 같고.. 그리고 tailwindcss 만 받으면 될 줄 알았는데 gulpfile.js 라는 파일이 있어서 검색해봤더니 자동화를 도와주는 친구라는데... 사용해보려고 공부했다. 

 

일단 gulp는 bundler의 일종이라 이것에 대해서 공부해야했다

번들러는 여러개의 파일을 묶어주는 도구인데 Webpack의 기능은 하나의 자바스크립트 파일에 자바스크립트 뿐만 아니라 css, 이미지와 같은 여러가지 모듈들을 몰아넣을 수 있다. 또한 동시에 성능향상시키기 위해서 필요하다면 다시 분리도 가능하다.

번들러(Bundler)와 Gulp: 웹 개발의 필수 도구

웹 개발을 하다 보면 많은 자바스크립트 파일, CSS 파일, 이미지 파일 등을 다루게 된다. 이러한 파일들이 많아지면, 전역 변수 충돌, 파일 간 의존성 문제, HTTP 요청 증가 등 여러 가지 문제가 발생할 수 있다. 이를 해결하기 위해 번들러라는 도구가 필요하다.

번들러란?

번들러(Bundler)는 여러 개의 파일을 하나로 묶어주는 도구이다. 대표적인 번들러로는 Webpack, Rollup, Parcel 등이 있으며, Gulp 또한 번들러로서의 기능을 수행할 수 있다.

Webpack의 기능

Webpack은 하나의 자바스크립트 파일에 자바스크립트뿐만 아니라 CSS, 이미지와 같은 다양한 모듈들을 통합할 수 있다. 필요에 따라 성능을 최적화하기 위해 파일들을 다시 분리할 수도 있다. 이를 통해 웹 애플리케이션의 성능을 극대화할 수 있다.

번들러의 필요성

• 전역 변수 충돌 방지: 여러 자바스크립트 파일이 전역 변수를 공유하게 되면, 변수명이 겹쳐서 의도치 않은 에러가 발생할 수 있다. 번들러는 이러한 파일들을 모듈로 묶어 별도의 스코프 내에서 실행되도록 하여 전역 변수 충돌 문제를 해결한다.
• 의존성 관리: 복잡한 웹 애플리케이션에서는 파일 간의 의존성이 중요하다. 번들러는 파일 간의 의존성을 파악하고, 올바른 순서로 파일을 로드하여 의존성 문제를 해결한다.
• HTTP 요청 감소: 번들러는 여러 개의 파일을 하나의 파일로 병합하여 HTTP 요청 수를 줄인다. 이를 통해 로딩 속도향상이 가능하다.
• 코드 최적화: 번들러는 코드를 압축하고 최적화하여 파일 크기를 줄인다. 이를 통해 웹 애플리케이션의 성능을 향상시킬 수 있다.

Gulp와 번들러

Gulp는 자동화 도구로서 파일 병합, 압축, 변환 등의 작업을 수행할 수 있으며, 이를 통해 번들러의 역할을 할 수 있다. Gulp를 사용하면 다양한 플러그인을 통해 파일을 효율적으로 관리하고, 웹 애플리케이션의 성능을 최적화할 수 있다.

결론

번들러는 현대 웹 개발에서 필수적인 도구이다. 전역 변수 충돌 방지, 의존성 관리, HTTP 요청 감소, 코드 최적화 등 여러 문제를 해결하여 웹 애플리케이션의 성능향상이 가능하다. Webpack과 Gulp 같은 도구를 활용하여 번들링 작업을 효율적으로 수행할 수 있다. 으 공부할게 많으니 열심히 해야겠다..