02_Module,Bundle

이번에는 Webpack에대해서 알아볼 것이다.

우선 Webpack의 기본구조들을 알아보기위해 아래 개념들부터 차근차근 알아보자.

 

 

Module

프로그램을 구성하는 내부의 코드가 기능별로나뉘어져 있는 형태

> 한파일의 큰 덩이를 여러개의 파일로 나누어서 쓰는것

 

Module을 상요하기위해서는 Module을 인식하는 ModuleSystem과 그를 다루는 keyward가 필요하다.

 

Module의 표준으로는 CommonJS(Node.js)와 ESM(ECMAScript 2015~ ) 가 존재한다.

 

 

Module을 내보낼때는 객체에 넣고 한곳으로 내보내거나, 개별적으로 내보내는 방식중에서 택하게 된다.

 

 

 

CommonJS

 

require ( 모듈의 경로)fmf tkdydgotj 불러온다.

module.exports를 통해서 내보낸다.

 

 

module.export = { ... } 처럼 객체에 넣어서 내보낼수도 있고

module.exports.키_이름 = 값 처럼 개별적으로 내보낼 수도 있다.

 

예시를 한번보자.

 

const PI = 3.14;
const getCircleArea = (r) => r * r * PI;

const result = getCircleArea(2);
console.log(result);

예를들어 다음과같은 원의 넓이를 구하는 간단한 예제가 있다고 생각해보자. 이를 module로 분류하려면 어떻게 해야 할수 있을까?

 

//mathUtil.js
const PI = 3.14;
const getCircleArea = (r) => r * r * PI;

module.exports = {
  PI,
  getCircleArea,
};

 

PI와 getCircleArea를 빼내서 따로 파일을 하나 만든 후에 exports를 이용해 객체형태로 내보내준다.

 

//index.js
//const mathUtil = require('./mathUtil');
const { getCircleArea } = require("./mathUtil");

const result = getCircleArea(2);
console.log(result);

그 다음 위와같은 형태로 빼내서 쓰면된다.

 

 

//mathUtil.js
const PI = 3.14;
const getCircleArea = (r) => r * r * PI;

// module.exports = {
//   PI,
//   getCircleArea,
// };

exports.PI = PI;
exports.getCircleArea = getCircleArea;

객체에 담는게 아닌 개별로 내보내도 좋다.

 

두 방식을 모두 사용하면 정보가 손실되거나 하는 경우가 생기기때문에 한 가지 방법으로 통일하는것이 좋다.

 

 

 

 

ESM

 

import 모듈_이름 from 모듈_위치 로 불러내고

export or export default로 내보낸다.

 

npm install esm

esm을 사용하려면 외부 라이브러리가 필요하다.

 

node -r esm index.js

esm을 깔고 -r을 사용하면 commonJs방식도 사용되서 출력된다.

 

 

 

//mathUtil.js
const PI = 3.14;
const getCircleArea = (r) => r * r * PI;

export { PI, getCircleArea };

//index.js
import { getCircleArea } from "./mathUtil";

const result = getCircleArea(2);
console.log(result);

 

esm에서는 위와같은 방식으로 사용된다.

 

//mathUtil.js
const PI = 3.14;
const getCircleArea = (r) => r * r * PI;

export default { PI, getCircleArea };

//index.js
import mathUtil from "./mathUtil";

const result = mathUtil.getCircleArea(2);
console.log(result);

export default를 사용하면 위처럼 객체이름을 하나 지정해둔후에 빼서 쓰는 방식으로 사용해야 한다.

 

 

Module의 종류

1. Built-in Core Module (ex. Node.js module)

내장모듈

 

2. Community-based Module ( ex. NPM )

외장모듈 ( 만든것들 )

 

3. Local Module 

특정 프로젝트에 정의된 모듈

 

모듈의 종류는 위 3가지가 있다!

 

 

위 모듈들을 이용해서 도형의 넓이를 구하는 간단한 예제를 만들어보자.

 

//readline.js
const readline = require("readline");
const rl = readline.createInterface({
  input: process.stdin,
  output: process.stdout,
});

rl.question("원하는 도형을 작성해주세요 : ", (input) => {
  console.log(input);
  rl.close();
});

위는 내장모듈인 readline을 이용해서 터미널로 들어오는 입력을 처리해보는 코드이다.

 

 

 

//mathUtil.js
const PI = 3.14;
const getCircleArea = (r) => r * r * PI;
const getSquareArea = (d) => d * d;

module.exports = {
  PI,
  getCircleArea,
  getSquareArea,
};

다음처럼 원과 사각형의 넓이를 구하는 코드를작성하고

 

//index.js
const { getCircleArea, getSquareArea, PI } = require("./mathUtil");

const readline = require("readline");
const rl = readline.createInterface({
  input: process.stdin,
  output: process.stdout,
});

rl.question("원하는 도형을 작성해주세요 : (정사각형, 원) ", (figure) => {
  console.log(`선택한 도형 : ${figure}`);

  switch (figure) {
    case "정사각형":
      rl.question("변의 길이를 입력해주세요 : ", (input) => {
        console.log(`원의 넓이는 : ${getSquareArea(input)}`);
      });
      break;
    case "원":
      rl.question("반지름의 길이를 입력해주세요 : ", (input) => {
        console.log(`원의 넓이는 : ${getCircleArea(input)}`);
      });
      break;
    case "정사각형":
      console.log("지원하지 않는 도형입니다.");
      break;
  }
});

위처럼 입력받은 도형의 넓이를 구하는 프로그램을 작성해볼 수 있다.

 

조금 더 재사용성을 높이기위해

 

//log.js

const logInput = (input) => `입력받은 값 : ${input}`;
const logResult = (figure, result) => `${figure}의 넓이는 : ${result} 입니다.`;
const logFigureError = "지원하지 않는 도형입니다.";

module.exports = {
  logInput,
  logResult,
  logFigureError,
};

다음과 같이 파일을 하나만든다면

 

//index.js
const { getCircleArea, getSquareArea, PI } = require("./mathUtil");
const { logFigureError, logInput, logResult } = require("./log");

const readline = require("readline");
const rl = readline.createInterface({
  input: process.stdin,
  output: process.stdout,
});

rl.question("원하는 도형을 작성해주세요 : (정사각형, 원) ", (figure) => {
  console.log(`선택한 도형 : ${figure}`);

  switch (figure) {
    case "정사각형":
      rl.question("변의 길이를 입력해주세요 : ", (input) => {
        console.log(logInput(input));
        console.log(logResult(input, getSquareArea(input)));
      });
      break;
    case "원":
      rl.question("반지름의 길이를 입력해주세요 : ", (input) => {
        console.log(`원의 넓이는 : ${getCircleArea(input)}`);
      });
      break;
    case "정사각형":
      console.log("지원하지 않는 도형입니다.");
      break;
  }
});

위처럼 사용할수도 있다

 

 

module를 사용한다면 코드의 재사용성이 증가하고, 관리가 편해지는 장점이 있다. 하지만 코드를 모듈화하는 기준이 명확해야 구조적으로 정확해지고 오히려 더 복잡해지지 않는다.

 

 

 

 

Bundle

Webpack를 사용하면 JS뿐 아니라 다른 확장자의 파일들도 관리하게 된다. 이러한 다양한 파일들이 서로 참조하고 있는데, Bundle를 사용하면 확장자별로 파일들이 모여지게 된다.

 

Bundle를 사용하면 모든 모듈을 불러오는데 걸리는 시간이 단축된다. 한 파일안에 모듈들이 모이기에 접근하는데 걸리는 시간이 줄어든다.

 

또한 사용하지 않는 코드들이 제거되게 되고 코드 길이가 단축되게 된다. 또한 파일의 크기를 줄여주게 된다.