[웹개발] 번들러와 웹팩

번들러(Bundler)

리액트 프로젝트를 시작하기 위해 create-react-app이라는 도구로 필요한 환경을 모두 구축해준다. 이때 웹팩이라는 번들러도 함께 설치가 된다.

 

번들러란 여러개로 나눠진 파일을 하나로 합쳐주는 도구를 말한다. 리액트에서는 왜 여러개로 나눠진 파일을 하나로 합쳐주는 도구가 필요할까?

 

리액트에서는 import라는 예약어를 사용해 모듈을 불러온다. 모듈을 불러와서 사용하는 것은 브라우저에 없는 기능이다. 즉, 브라우저는 import라는 코드를 해석할 수 없다. 리액트로 된 프로젝트를 브라우저가 이해할 수 있으려면 번들러라는 도구를 사용해 불러온 모듈을 모두 합쳐서 하나의 파일을 생성한 후 브라우저에 전송해야한다.

 

번들러의 종류는 여러개가 있지만 리액트에서는 대부분 웹팩을 사용한다.

 

번들러가 필요한 이유 정리

1. 프로젝트 규모가 커지면 유지보수가 어려워진다
2. 컴포넌트 단위로 나눠 각각 다른 파일에 저장한다
3. import 키워드를 사용해 각각의 컴포넌트를 불러와 조립한다
4. 이때 번들러를 사용해 여러개로 나눠진 파일을 하나로 합쳐준다 (webpack은 번들러의 종류중 하나이다)
5. 파일이 하나이기 때문에 웹브라우저에서 불러올 수 있다

 

웹팩(Webpack)

위에서 설명했듯이 웹팩은 번들러의 한 종류로 리액트 프로젝트는 대부분 웹팩을 사용해 모듈을 하나로 합쳐준다.

 

웹팩에는 파일을 불러오는 로더(loader)라는 부분이 있는데 그 중에 하나가 babel-loader이다. babel-loader는 자바스크립트 파일들을 불러오고 바벨이라는 도구로 불러온 자바스크립트를 ES5 문법으로 변환시켜준다.