Webpack

모듈 번들러.

• 모듈이 뭐지?
• 모듈 번들러
• 왜 번들링을 해야하는걸까?

모듈이 뭐죠?

프로그래밍 관점에서 특정 기능을 갖는 작은 코드 단위를 의미한다. 그렇지만 웹팩에서의 모듈은 자바스크립트 같은 코드에만 국한되지 않고 웹 어플리케이션을 구성하는 모든 자원을 의미하는데, HTML, css, Javascript, 이미지 파일, 폰트 파일까지도 모듈로 본다.

모듈 번들러, Module Bundler

모듈 번들러는 말 그대로 모듈 번들링을 해주는 도구인데, 모듈 번들링이 뭐지?

• 웹 어플리케이션을 구성하는 수많은 자원(모듈)들을 하나의 파일로 병합 및 압축해주는 동작을 모듈 번들링이라고 한다.
  

웹팩이 필요한 이유

• 파일단위로 분리해서 모듈 형태로 개발할 수 있다.
  코드가 복잡해지면 다른 파일로 분리해서 사용해야 가독성 그리고 관리 차원에서도 좋을 것이라는 것은 예상할 수 있다. 그런데 이렇게 나눠서 개발하면 변수 유효 범위문제가 생긴다.
  이를 해결하기 위해서 ES6의 modules 문법과 모듈 번들링을 해주는 Webpack이 사용된다.
• 웹 어플리케이션의 빠른 로딩 속도와 높은 성능 📌
  웹팩은 필요한 자원을 미리 로딩하는게 아니라 그 때 그 때 요청하자는 철학을 갖고 있기 때문에 빠른 로딩 속도와 높은 성능을 가능하게 한다.

Babel

javascript의 최신 문법(ES6+ 등)을 어느 환경에서든 사용가능하도록 변환해주는 오픈소스로 공개된 도구.

Conclusion

웹 프론트엔드 분야에서 React 다음으로 많이 들어본 단어 Webpack, Babel에 대해서 정리해보는 시간이었습니다.
다음 글에서는 react, webpack, babel을 이용한 개발환경 구축을 다루겠습니다.

Reference

웹팩 핸드북