번들링이란?
번들링이란??
여러 제품이나, 코드, 프로그램을 묶어서 패키지로 제공하는 행위를 의미한다.
꼭 번들링을 해야만 할까??
HTML, CSS, JavaScript 파일을 그대로 전송하는것 또한 문제는 없다.
하지만 아래와 같은 일이 생길수도 있다.
1. 두 개의 .js 파일에서 같은 변수를 사용하고있어, 변수 간 충돌
2. 한 번 불러오는 프레임워크 코드가 8MB라서, 인터넷 속도가 느린 국가의 모바일 환경에서 사용자가 불편을 호소
3. 번들 파일 사이즈를 줄이기 위해 파일의 공백을 모두 지웠는데, 가독성이 너무 떨어짐
4. 배포 코드가 너무 읽기 쉽다. -> 사용자가 임의로 조작하여 피해 발생
-> 즉 소프트웨어를 잘 만들어도 사용자에게 배포하기 위해 번들링이 꼭 필요하다.
모듈
모듈이란?
모듈은 파일 하나하나, 특정 기능을 갖는 작은 코드 단위를 의미한다.
모듈이 필요한 이유
// hyo.js
let a = 'hyo';
// woo.js
let a = 'woo';위와 같이 hyo.js , woo.js 로 파일을 나눴지만, 두 파일에 같은 a라는 변수가 선언된다면 hyo.js를 불러올때는 'hyo'이지만, woo.js를 불러올땐 'woo'가 된다.
이런식으로 계속 개발하다 규모가 커지면 오류를 찾기 힘들다.
그래서 파일 단위로 변수를 관리하기 위해서는 모듈이 필요하다.
우리가 자바스크립로 개발을 하다보면 코드의 재사용이나 유지보수 측면에서 파일을 여러개로 분리해서 개발을 한다.
위처럼 분리된 파일을 모듈이라고 한다.
자바스크립트 코드를 모듈로 분리하게 되면 이러한 모듈을 필요한 어떤곳에서든 재사용이 가능하기 때문에 자주사용하는 코드같은경우에는 모듈로 분리해서 개발하는것이다.
웹 애플리케이션이 완성이되면 우리는 웹 서버라는 공간에 배포를 하게된다.
사용자들이 브라우저를 통해 웹 사이트에 접근을 하게 되면 브라우저는 사용자에게 UI를 보여주기위해 웹 서버에 자원(아래의 그림에서 각각의 파일)을 요청한다.
그리고 웹 서버는 준비된 자원을 브라우저에게 응답함으로써 사용자들은 UI를 볼 수 있게 된다.
하지만 개발 편의성을 위해 모듈을 계속 계속 분리하다 보면 그만큼 브라우저에서 서버에 요청하는 개수가 많아져서 페이지 로딩시간을 길어지게 함으로써
사용자 경험 즉 UX에 좋지 않은 영향을 발생 시킬수 있다.
그러면 개발 편의를 위해 개발은 모듈로 분리해서 개발을 하고 페이지 로딩시간을 줄일 수 있는 방법은 없을까??
-> 브라우저에서 서버로 요청하는 HTTP 개수를 줄이는 것이다.
개발을 할때는 모듈로 분리하여 개발을 하고 웹 서버에 배포하기전에 각각의 모듈을 하나의 파일로 묶어서 배포하면 된다.
모듈을 하나의 파일로 묶어주는 녀석 -> 모듈 번들러!
모듈 번들러
모듈 번들러란??
-> HTML, CSS, JavaScript 등의 자원을 전부 각각의 모듈로 보고 이를 조합해 하나의 묶음으로 번들링(빌드)하는 도구이다.
모듈 번들러가 필요한 이유
모듈 단위의 파일들을 호출해 브라우저에 띄워야하는데, JavaScript 언어의 특성상 발생하기 쉬운 각 변수들의 스코프 문제를 해결해야
웹팩 (Webpack)
Webpack은 현재 프론트엔드 애플리케이션 배포를 위해 가장 많이 사용하는 번들러이다.
웹팩(Webpack)이란?
-> 여러 개의 파일을 하나의 파일로 합쳐주는
모듈 번들러를 의미한다.
개발 재밌다