Module 개념

2020. 7. 7. 13:33웹/Webpack

정의

  • 프로그램을 구성하는 내부의 코드가 기능별로 나뉘어져 있는 형태, 어떤 기준을 통해 코드가 분리되어 있는 상황에서 서로를 참조

  • 재사용성과 프로그램 관리 차원의 장점

 

 

Module 표준

  • Module 시스템이 제공되는 환경은 파일을 하나의 모듈로 인식하고 자신의 코드를 외부에서 참조할 수 있게 하거나 다른 Module 로 부터 특정 기능을 사용할 수 있게 해주는 keyword를 제공할 수 있는 환경

  • Module 을 사용하는 방법은 Module 이 어떤 표준을 따르냐에 따라 달라짐

 

 

Module 시스템은 여러가지 존재

  • CommonJS(Node.js)

  • ESM(ECMAScript 2015 ~)

 

 

1. CommonJS(Node.js)

Module Keyword: 가져오기

require (모듈의 경로)

 

Module keyowrd: 내보내기

module.exports

 

예제)

-- index.js --
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
}


-- 명령어 실행 --
node index.js

-- 출력 결과 --
12.56

 

 

2. ESM(ES6 이후 표준모듈시스템)

Module Keyword: 가져오기

import 모듈_이름 from 모듈_위치

 

Module keyowrd: 내보내기

export 
export defualt

 

모듈 설치 및 파일 실행

  • NodeJs 환경에서 ESM 으로 모듈을 사용하기 위해 외부 모듈 필요

  • NodeJs 는 기본적으로 CommonJs를 따르기 때문에, 다른 방식의 접근할 수 있는 도구 필요

npm install esm

// -r 옵션 : 노드 명령어를 실행할때, 실행하는 파일의 표준 중에(CommonJs) 다른 모듈의 표준도 해석할 수 있게 해주는 옵션
node -r esm index.js

 

예제)

-- index.js --
import { getCircleArea } from './mathUtil';

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


-- mathUtil.js --
const PI = 3.14;
const getCircleArea = r => r * r * PI;

export {
    PI,
    getCircleArea
}


-- 명령어 실행 --
node -r esm index.js

-- 실행결과 --
12.56

 

' > Webpack' 카테고리의 다른 글

Loader  (0) 2020.07.09
Webpack - 기본 환경  (0) 2020.07.07
Webpack 개념  (0) 2020.07.07