Webpack - Module

Module 정의

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

Module 표준

Module을 사용하기 위해서는 Module을 인식하는 Module system과 Module을 다루는 키워드가 제공되어야 함

• CommonJS (Node.js)
• ESM(ECMAScript 2015~)

내보내기 가져오기 CommonJS 예

// index.js 
/**
1. 원의 넓이를 구하는 공식
2. PI 정의
3. 공식을 통해 결과값 얻기
**/

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

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;
// 한가지 방식으로 통일해서 사용할 것

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

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

내보내기 가져오기 ESM 예

외부 모듈 설치 필요
$ npm install esm
$ node -r esm index.js

// CommonJS 예시와 동일
// import 모듈_이름 from 모듈_위치
// export 또는 export default 
// index.js
import { getCircleArea } from './mathUtil';
// mathUtil.js
export {
 PI,
 getCircleArea
}
// 또는
// export default { PI, getCircleArea } 
// index.js에서 
// import mathUtil from './mathUtil';
// const result = mathUtil.getCircleArea(2);
// console.log(result);

Module의 종류

1. Built-in Core Module (예: Node.js module)
2. Community-based Module (예: NPM)
   npm CLI를 사용해야 함
3. Local Module ( 특정 프로젝트에 정의된 모듈)

Module 예

도형의 넓이를 구하는 코드를 기능별로 모듈화

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

// .question(문자열, 콜백함수);
rl.question('원하는 도형을 작성해주세요: ', input => {
  console.log(input);
  rl.close();
})

// $ node readline.js 
// $ 원하는 도형을 작성해주세요 : 원 + Enter
// $ 원

// index.js
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(`입력받은 값: ${input}`);
          console.log(`정사각형의 넓이는 : ${input*input}입니다`);
          rl.colse();
          break;
      case "원" :
        rl.question("반지름의 길이를 입력해주세요: ", input=>{
          console.log(`입력받은 값: ${input}`);
          console.log(`원의 넓이는 : ${input*input*3.14}입니다`);
          rl.colse();
          break;
      default :
          console.log(
            "지원되지 않는 도형입니다. \n커맨드라인을 종료합니다."
            );
          rl.close();
        }
  }
}):

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

module.exports = {
  PI,
  getCircleArea,
  getSquareArea
}

// log.js 
const loginput = `입력받은 값: ${input}`;
const logResult = (figure,result)=> `${figure}의 넓이는 : ${result}입니다.`;
const logFigureError = "지원되지 않는 도형입니다. \n커맨드라인을 종료합니다."

module.exports = {
  loginput,
  logResult,
  logFigureError
}
        
// index.js를 다시 수정하면
const readline = require("readline");
const rl = readline.createInterface({
  input: process.stdin,
  output: process.stdout
});
        
const { getCircleArea, getSquareArea } = require('./mathUtil');
const { logFigureError, loginput, logResult } = require('./log');
        
rl.question(
  "넓이를 구하고자 하는 도형의 종류를 입력해주세요.(정사각형, 원): ",
  figure => {
    console.log(`선택된 도형: ${figure}`);
    
    switch(figure){
      case "정사각형" :
        rl.question("변의 길이를 입력해주세요: ", input=>{
          console.log(loginput(input));
          console.log(logResult(figure, getSquareArea(input)));
          rl.colse();
          break;
      case "원" :
        rl.question("반지름의 길이를 입력해주세요: ", input=>{
          console.log(loginput(input));
          console.log(logResult(figure, getCircleArea(input)));
          rl.colse();
          break;
      default :
          console.log(logFigureError);
          rl.close();
        }
  }
}):