[javascript 자바스크립트] 모듈(Module) 란?

resilient

·

2021. 7. 23. 22:26

728x90
반응형

 

모듈(Module)이란?

 

모듈이란 특정한 기능을 하는 함수나 변수들의 집합이다.

예를 들면 수학에 관련된 코드들만 모아서 수학 모듈을 만들어서 수학에 관련된 기능이 필요할 때 꺼내서 사용할 수 있다.

모듈은 자체만으로도 하나의 프로그램이면서 다른 프로그램의 부품으로 사용할 수 있다.

 

 

즉, 모듈로 만들어놓으면 여러 프로그램에서 해당 모듈을 재사용할 수 있다. 

보통 파일 하나가 모듈 하나가 된다. 파일별로 모드를 모듈화 할 수 있어서 관리하게 편하다.

 

사진출처:Node.js교과서

그러면 아래 예시를 보면서 이해해보자. 같은 폴더에 var.js , func.js , index.js 가 있다고 가정하자.

//var.js
const odd = "홀수";
const even = "짝수";

module.exports = {
	odd,even
};

 

먼저 var.js 에 변수 두개를 선언해줬다. 그리고 module.exports에 변수들을 담은 객체를 대입해줬다.

이제 var.js 파일은 모듈로서 가능하다. 두 개의 변수들을 모아둔 모듈이 되는 것이다.

다른 파일에서 var.js파일을 불러오면 module.exports에 대입된 값을 사용할 수 있다. 

그럼 var.js를 참조하는 func.js 파일을 작성해보자.

 

//func.js
const { odd, even } = require('./var');

function checkOddOrEven(num) {
  if (num % 2) { // 홀수면
    return odd;
  }
  return even;
}

module.exports = checkOddOrEven;

 

require 함수 안에 불러올 모듈(불러올 파일)의 경로를 적는다. 위 예제에서는 같은 폴더 안에 파일이 있다고 가정했지만 다른 폴더에 있는 파일도 모듈로 사용할 수 있다. 파일 경로에서. js 나. json 같은 확장자는 생략 가능하다.

 

require함수로 객체 리터럴을 통해 odd, even을 가져온다.

 

var.js에서 변수를 불러오고, 숫자의 홀수 짝수를 판별하는 함수를 선언해줬다.

그리고 그 함수는 module.export에 대입해줬다. 이렇게 다른 모듈(var.js)을 가져와서 사용하는 파일을 다시 모듈화(func.js)로 만들어서 사용할 수 있다.

 

마지막으로 아래 index.js를 살펴보자.

 

//index.js
const { odd, even } = require('./var');
const checkNumber = require('./func');

function checkStringOddOrEven(str) {
  if (str.length % 2) { // 홀수면
    return odd;
  }
  return even;
}

console.log(checkNumber(10));
console.log(checkStringOddOrEven('hello'));

 

index.js는 var.js와 func.js를 모두 참조했다. 여러 개의 모듈을 하나의 프로그램에서 불러와서 사용할 수 있음을 확인했다.

모듈로부터 값을 불러올 때 변수 이름을 다르게 지정해서 사용할 수도 있다. func.js의 checkOddOrEven이 checkNumber라는 이름으로 변경돼서 사용되고 있다.

 

사진출처:node.js교과서

 

 

이렇게 계속해서 재사용되는 기능을 가진 함수나 변수들을 모듈로 만들어놓으면 편리하게 사용할 수 있다.

그러나 모듈이 많아지고 모듈 간 관계가 얽히게 되면 나중에 구조를 파악하기 어렵다는 단점도 있다.

 

ES2015가 도입되면서 자바스크립트도 자체 모듈 시스템 문법이 생겼다.

위에 func.js를 ES2015 모듈 스타일로 바꿔보자. 아래 예시를 보자.

 

//func.mjs
import { odd, even } from './var';

function checkOddOrEven(num) {
  if (num % 2) { // 홀수면
    return odd;
  }
  return even;
}

export default checkOddOrEven;

require와 module.exports 가 import, export default로 바뀌었다. 이렇게 바꾸면 모두 제대로 동작하는 것은 아니지만 위에 예제에서는 제대로 동작한다.

 

위에 파일 명을 보면 func.mjs인데 package.json에서 type:"module" 속성을 넣으면. js 확장자로 사용 가능하다.

 

require 함수나 module이란 객체는 따로 선언하지 않고도 사용할 수 있었는데, 두 객체는 노드에서 기본적으로 제공하는 내장 객체이기 때문이다.

 

이 부분은 다음 시간에 따로 정리해보려고 한다.

반응형