JavaScript(JS) - 모듈(Module)

자바스크립트로 코드를 작성하다보면 여러가지 함수를 만들게 된다.

이 함수들은 하나의 기능을 만들기 위해 사용이 되거나 계산을 하기 위해 사용이 되거나 등등 다양한 방법으로 사용이 된다.

하지만 하나의 파일에서 계속 작성하다보면 코드가 너무 길어지고 그렇게 되면 코드를 고쳐야 할 때 불편하기도 하고 가독성도 떨어지게 된다.

따라서, 이러한 문제점을 해결하기 위해 모듈이라는 것이 생겼다.

❓ 모듈이란?

• 여러 파일로 하나의 어플리케이션을 분리할 때, 각각의 파일들을 모듈이라고 부른다.

개발 규모가 커지면서 모듈 시스템으로 구성한다.

📗 모듈 특징

• 엄격 모드(use strict)로 실행된다.
• 모듈 레벨 스코프 범위
• 동일한 모듈 여러 번 사용해도 한번만 실행한다.

엄격 모드

• 일반적인 JS에서 허용되는 실수를 제한
• 까다롭게 문법 검사하는 모드

📗 모듈 종류

1) CommonJS

• 공통 JS 모듈이다.
• Node.js 환경의 모듈 시스템이다.
• module.exports와 require 이용한다.
• 동기적으로 불러온다.
• 백엔드용으로 개발되었다.

export(내보내기)

• 내보내고자 하는 객체나 함수 지정
• export는 한개만 할 수 있다.

const func = () => {
	console.log("export");
}

// export 하기
module.exports = func;

require(불러오기)

• 받고자 하는 파일의 경로를 입력하여 받는다.

const func = require("./export한 파일 경로");

func();

2) AMD

• Asynchronus Module Definition
• 모듈을 선언하면서 비동기적으로 의존 모듈을 불러온다.
• front-end 용으로 개발되었다.
• define과 require을 사용

commonJS는 서버 위에서 작동하고 동기적으로 작동하기 때문에 서버가 아닌 브라우저와 동기적이지 않고 비동기적으로 동작하기 위한 욕구로 AMD라는 모듈 시스템이 등장하게 되었다.

define (내보내기)

define(['./require.js'], function(req) {
	function sum(num1, num2)  {
    	return num1 + num2;
    }
  
  return { sum : sum }
});

require (불러오기)

require(['./amdCalc.js'], function(fn) {
	console.log(fn.sum(10, 20));
})

3) UMD

• Universal Module Definition
• 여러 모듈 시스템 동작이 가능하다.
• CommonJS와 AMD를 통합하기 위한 모듈이다.
• 즉, CommonJS, AMD 두 방식 모두 지원한다.

4) ES6 Module

• 코드 유지 관리가 쉬워졌다.
• 클린 코드 작성이 가능하다.
• 필요한 것만 가져올 수 있다.
• import와 export 키워드를 사용하여 명시적으로 선언해준다.

최신 브라우저에서만 사용 가능하다. 또한, 최신 브라우저가 기본적으로 모듈 기능을 지원하기 시작했다.

export(내보내기)
1) 여러 객체를 내보내는 방법

export func1 = () => {
	console.log("export 방법 1")
}

const func2 = () => {
	console.log("export 방법 2");
}

export { func2 };

2) 단일 객체를 내보내는 방법

const func1 = () => {
	console.log("export 방법 1")
}

const func2 = () => {
	console.log("export 방법 2");
}

export default func1;

또는 

export default { 
  const func1 = () => {
	console.log("export 방법 1")
  }

  const func2 = () => {
      console.log("export 방법 2");
  }
}

import(불러오기)
1) 여러 객체를 불러오는 방법

// Destructuring 문법 : 여러 객체를 불러올 때 필요한 객체만 선택적으로 불러오는 방법
import { func1, func2 } from "./export한 경로.js";

또는

// Alias 문법 : 전체 객체를 가지고 와서 별칭을 붙이고 그 별칭을 통해 접근하는 방법
import * as func from "./export한 경로.js";

2) 단일 객체를 불러오는 방법

import func from "./export한 경로.js";

모듈을 사용하면 정말 편리하다. 확실히 기능들을 모듈로 나누어서 하다 보니 코드를 읽기도 편하고 수정하기도 훨씬 편하다. 모듈 사용을 꼭 하자. 권장이 아닌 필수 !