Webpack이 뭔데!!(2)

ESM Keyword

Nodejs 환경에서는 CommonJS 표준을 따르기 때문에 모듈을 다른 방식으로 접근할 수 있게 도와주는 도구가 필요합니다.

$ npm install esm

esm을 설치해준다. esm 모듈이 설치가 되었으면 명령문을 실행할 때

$ node -r esm index.js

-r 이라는 플래그는 node 명령어를 실행할 때 실행하는 파일의 다른 모듈의 표준도 해석할 수 있게 실행해줍니다.

내보내기

export 혹은 export default 를 사용합니다.

export, export default의 차이?

모듈은 크게 두 종류로 나눌 수 있습니다.

여러 개의 함수가 있는 라이브러리 형태의 모듈과, 개체 하나만 선언되어있는 모듈

export default 를 사용하면 해당 모듈엔 개체가 하나만 있다는 사실을 명확히 나타낼 수 있습니다

우선 export 부터 살펴볼까요?

1. export 로 내보내기

//index.js
const PI = 3.14;
const getCircleArea = r => r * r * PI;

export {
    PI,
    getCircleArea
}

이 모듈에는 PI와 getCircleArea라는 변수와 함수 표현식이 있습니다. export를 사용해서 내보내 봅니다. 내보낼 목록을 만들어 객체 형태로 내보냅니다.

1. export default

//index.js
const PI = 3.14;
const getCircleArea = r => r * r * PI;

export default{
    PI,
    getCircleArea
}
//export default getCircleArea;

export default 를 사용하면 하나의 클래스나 함수, 객체를 내보내고 불러올 때도 마찬가지로 중괄호 없이 모듈을 통째로 가져오게 됩니다.

export default는 파일당 최대 하나만 사용 가능합니다. 따라서 내보낼 개체에는 이름이 없어도 상관없습니다.

가져오기

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

가져오기는 기본적으로 import 모듈 이름과 from 모듈의 파일 위치 형태로 사용합니다.

1. export

//mathUtil.js
import {getCircleArea} from './mathUtil';
//import {PI, getCircleArea} from './mathUtil';
const result = getCircleArea(2);

console.log(result);

export로 내보내진 객체는 목록을 만들어 개별적으로 가져오기가 가능합니다.

1. export default

//mathUtil.js
import mathUtil from './mathUtil';
const result = mathUtil.getCircleArea(2);

console.log(result);

export default로 내보낸 모듈은 {}를 사용하지 않고 이름을 사용합니다. 그리고 해당 객체의 메서드에 직접 접근하여 사용합니다.

모듈의 종류

모듈의 종류는 총 3가지로 분류할 수 있습니다.

1. Built-in Core Module ( ex. Node.js module )
2. Community-base Module ( ex. NPM )
3. Local Module ( 특정 프로젝트에 정의된 모듈 )

Built-in module

Node.js에 built-in 되어있는 core module은 웹 브라우저에서 사용되는 javascript 보다 더 많은 기능을 제공합니다. 운영 체제 정보 접근이나 클라이언트가 요청한 주소에 대한 정보를 가져오는 등 여러 기능의 모듈을 제공합니다.

OS모듈, path 모듈

Community-base Module

npmjs.com

NPM은 Node.js 개발자들이 만든 다양한 모듈을 공유하고 사용할 수 있게 해주는 패키지 저장소, 커뮤니티입니다. Node.js에서 제공하는 내장 모듈도 있고, 사용자들이 직접 만든 유저 모듈들도 있습니다.

NPM은 Website를 통해 패키지와 관련 문서를 찾거나 공유할 수 있고 CLI 를 통해 패키지에 대한 업데이트나, 설치, 제거 등의 관리를 할 수 있습니다. npm registry 에는 자바스크립트 소프트웨어와 메타정보들이 들어있고 현재 100만 개 이상의 패키지가 존재합니다.

Local Module

우리가 이전 예제에서 만든 mathUtil.js 모듈과 같이 로컬 환경에서 만든 모듈을 의미합니다.

 

모듈을 사용할땐

모듈을 사용하면 코드의 재사용성이 증가하고, 코드의 관리가 편해집니다. 그리고 코드를 모듈화 할때는 모듈화하는 기준이 명확해야합니다.

 

 

참고 문서

• https://joshua1988.github.io/webpack-guide/motivation/why-webpack.html#파일-단위의-자바스크립트-모듈-관리
• https://webpack.kr/
• https://ko.javascript.info/import-export#ref-4122