[ 코딩온 ] KDT 웹 풀스택 13기 / 7월 1주차 회고 / Node.js 사용자 정의 모듈(User-defined Modules)

2024.07.02 화

 

Node.js에서는 세가지의 모듈을 사용한다. 

1. 서드파티 모듈(Third-party Modules) : 이미 만들어진 것을 가져다가 쓰는 모듈. npm으로 설치하는 express, ejs 등.
2. 사용자 정의 모듈(User-defined Modules) : 내가 직접 만드는 모듈. Common JS, es6
3. 내장모듈(Built-in Modules) : fs, path, url, http 등

 

이번 포스팅에서는 사용자 정의 모듈 (User-defined Modules)인 Common JS 와 es6 사용법을 비교해보려고 한다. 

 

---

  1. Common JS  vs  es6 : 하나의 모듈파일에 하나의 모듈 만들기

• Common JS

//commonModule1.js
//하나의 모듈파일에 하나의 모듈 만들기(Common JS)

const a = 10;
const b = 20;
function connect() {
	return a + b;
}

//connect 함수를 내보낸다.
module.exports = connect;

모듈파일 : module.exports = 함수명(변수명);

//common.js
//commonModule1.js 실행 (Common JS)

const connect = require('./module1'); //.js생략 가능
const result = connect();
console.log(result);

실행파일 :  const 변수 = require('./파일이름');   //.js생략

 

 

• es6

//es6Module1.js
//하나의 모듈파일에 하나의 모듈 만들기 (es6)
//es6는 package.json에 "type":"module" 추가해야 실행 가능하다.

const a = 10;
const b = 20;
function connect() {
	return a + b;
}

//여기가 변경
//export 내보낼 변수(함수)가 단 한개일때만 default를 붙인다.
export default connect;

모듈파일 : export default 변수명(함수명)

//es6.js 
//es6Module1.js 실행 (es6)

import connect from '/es6Module1.js' //.js 생략 불가능
const result = connect();
console.log(result);

실행파일 : import 변수명 from '/파일명.js' //.js 꼭 붙여야 함.

 

---

  2. Common JS  vs  es6 : 하나의 모듈파일에 여러개의 모듈 만들기 --> 요놈이 헷갈림.

• Common JS

//commonModule2.js
//하나의 모듈 파일에 여러개의 모듈 만들기 (Common JS)

//방법1 : 함수정의 -> export 한번
/*
function add(x, y){
	return x + y;
}
function subtract(x, y){
	return x - y;
}
function multiply(x, y){
	return x * y;
}
module.exports = {add, subtract, multiply};
*/

//방법2 : 함수정의와 exports를 동시에. 함수 갯수 == exports 갯수. "module."은 생략 가능.
module.exports.add = function (x, y) { return x + y; } 
module.exports.subtract = function (x, y) { return x - y; }
module.exports.multiply = function (x, y) { return x * y; }

모듈파일 : exports 한번에 하거나, 함수마다 exports 각각 하거나

//common.js 
//commonModule2.js 실행 (Common JS)

//commonModule2.js의 방법1, 2 모두 실행 가능.
const calculator = require('./module2'); //.js(확장자) 생략 가능
console.log(calculator.add(1, 3));
console.log(calculator.subtract(6, 3));
console.log(calculator.multiply(5, 8));

//객체구조분해
//commonModule2.js의 방법1, 2 모두 실행 가능.
const { add, subtract, multiply } = require('./module2');
console.log(add(5, 6));
console.log(subtract(10, 2));
console.log(multiply(6, 7));

실행파일 : const로 변수 선언해서 사용.

                    방법1,2 모두 객체구조분해로도 받아올 수 있다.

 

 

• es6

//es6Module2.js
//하나의 모듈 파일에 여러개의 모듈 만들기 (es6)

//방법1 : 함수정의 -> export 한번. / 화살표 함수로 변경 가능.
/*
function add(x, y){
	return x + y;
}
function subtract(x, y){
	return x - y;
}
function multiply(x, y){
	return x * y;
}
export { add, subtract, multiply }; //여기가 변경
*/

//방법2 : 함수정의와 export를 동시에. 함수갯수 == export갯수. / 화살표함수로 변경 가능.
/*
export function add(x, y){
	return x + y;
}
export function subtract(x, y){
	return x - y;
}
export function multiply(x, y){
	return x * y;
}
*/

//방법3 : 하나의 객체 변수로 내보내기
const add = function(x, y) { return x + y; }
const subtract = function(x, y) { return x - y; }
const multiply = function(x, y) { return x * y; }

const value = {add, subtract, multiply};
export default values;

모듈파일 : export 사용.

//es6.js
//package.json에 추가 "type" : "module" (es6)

//여러가지 모듈. 방법1, 방법2
/*
import {add, subtract, multiply} from './es6Module2.js';
console.log(add(5, 6));
console.log(subtract(10, 2));
console.log(multiply(6, 7));
*/

//여러가지 모듈. 방법3 (하나의 객체 변수로 내보내기)
import calculator from './es6Module2.js';
console.log(calculator.add(1, 3));
console.log(calculator.subtract(6, 3));
console.log(calculator.multiply(5, 8));

실행파일 : import from 사용.

                  객체구조분해로 받아올 수 없다!!

 

 

---

[정리]

 

Common JS에서는 module.exports와 require사용하고, .(점)과 = 을 사용한다.

es6에서는 export (default) 와 import from을 사용한다. 객체구조분해 불가능하다. package.json에 "type" : "module" 추가해야 한다.

 

 

 

 

각 버전의 사용방법이 많아서 아직은 헷갈린다.

코드연습을 많이 해봐야 손에 익을것 같다.