모듈 과 번들러 그리고 webpack

자바스크립트 라떼는...☕️ 모듈의 기원

이전 자바스크립트는 페이지별, 기능별 자바스크립트를 파일로 분류하고 HTML파일에서 <script> 태그로 자바스크립트를 로드라는 방식을 사용했다.

하지만 이는 프로젝트가 커지면 커질 수록 자바스크립트 파일 각각의 의존성과 코드사이 순서를 보장하기 힘들다는 부작용을 초래했고, 심할 경우 일부 파일의 문제가 전체 스크립트를 실행에 영향을 미치기도 한다.

이를 해결하기 위해 나온것이 바로 모듈 단위의 개발방식이다.
또한 이 모듈을 관리해주는 번들러가 오늘 주제의 주인공!

모듈시스템

모듈 스코프를 사용하기 위해서는 ES6 모듈을 사용해야 하는데, ES6가 나오기 전 자주 사용되던 AMD, CommonJS와 ES6에 대하여 알아보자.

AMD

1. AMD(Asynchronous Module Definition)는 비동기 방식이다.
2. define(), require()를 사용하는 방식이다.
3. AMD를 지원하는 대표적인 라이브러리는 RequireJS이다.

// index.js 
require.config({
  baseUrl: '/', // 모듈에 해당하는 경로 
  paths: { myModule: 'myModule', loaderModule: 'loaderModule', }}); 

// require 으로 모듈을 로드하고 이후 콜백함수로 함수를 호출 할 수 있게 한다.
require(['myModule'], (myModule) => { myModule.getMyFunc(); });

// searchModule.js
define(() => { 
  return { getMyFunc: () => 'Hello' } 
});

CommonJS

1. Node.js 에서 사용 가능하다.
2. require, module.exports를 사용하는 방식이다.

// myModule.js 
const getMyFunc = () => {}; 

module.exports = { getMyFunc }; 

// index.js 
const myModule = require('./myModule.js'); myModule.getMyFunc();

ES6(ES2015)

1. import, export 방식을 사용한다.
2. 모든 브라우저가 지원하지 않기 때문에 Babel의 @babel/plugin-transform-modules-commonjs을 통해 컴파일한다.

// 1. export default 
const getMyFunc = () => {}; 
export default getMyFunc; 

// 1. import 
import getMyFunc from 'myModuleJS'; 

// 2. export {} 
const getMyFunc = () => {}; 
export { getMyFunc }; 

// 2. import 
import {getMyFunc} from 'myModuleJS';

번들러?

번들러라는 용어가 생소할 수 있는데 우리에게 익숙한 웹팩이 바로 모듈 번들러중 하나이다.
즉, 의존성이 있는 모듈 코드를 하나(또는 여러개) 파일로 만들어 주는 도구이며 브라우저 환경에서 잘 실행될 수 있도록 가공해 주는 역할을 한다.

1. 잘만든 모듈이란..?

모듈은 하나의 파일이 하나의 모듈이 되며, 하나의 파일은 하나의 scope가 되도록 구현되어 있는 것!
✍🏻 scope? 자신만의 독립적인 실행 영역 보통 파일 단위로 나뉨

2. 번들러의 역할과 이점

번들러는 자바스크립트 파일을 기능 단위로 모듈화 하고, 이것을 묶어 관리할 수 있게 한다. 번들러를 사용함으로써 소스 코드를 모듈별로 작성할 수 있고 모듈간 혹은 외부 라이브러리의 의존성을 쉽게 관리 할 수 있다.

3. 번들러의 종류

대표적인 번들러로 webpack, RequireJS, Browserify, Rollup, Parcel 등이 있다.

4. 번들러 없이 모듈 만들기?

commonJS AMD ES2015등을 통해 모듈화 시스템을 사용할 수도 있다.

번들러 webpack

webpack은 최신 모듈 포맷(CommonJS, AMD, ES6 Module(v2부터))을 모두 지원하며 자바스크립트 뿐만 아닌 CSS, Image 파일 등의 리소스의 의존성도 관리해준다.

우리가 webpack을 자주 접하지 못했던 이유는 바로 CRA에 이미 모듈화가 다 세팅된다.
특히 리액트에서 사용하는 것은 ES6 Module인데, 이는 우리가 import, export를 사용하는 이유이기도 하다.

같은 이유로 node.js 에서는 require을 사용하는데 node는 CommonJs 모듈을 사용하기 때문이다.

webpack 설치 및 실행

1. package.json 파일 생성
   npm init

2. webpack 설치
   npm install --save-dev webpack webpack-cli

3. src/index.js 생성 4. webpack 실행
   node_modules/.bin/webpack --mode development
   또는
   npx webpack --mode development

네임스페이스?

대표인 예로는 카카오 로그인이 있다.
✍🏻 하나의 모듈로 scope를 가둬서 선언한다 -> 이것을 네임스페이스로 잘 나누었는지 아닌지 라고 말 한다.

Reference

https://ui.toast.com/fe-guide/ko_DEPENDENCY-MANAGE

아티클 모듈 시스템