자바스크립트_04 모듈이란?

4 주차

[ 2023.01.23 - 2023.01.29 ]

 

🎉주제: 모듈

1. 모듈이란?

모듈이란, 하나의 분리된 자바스크립트 파일이다.

개발하고 있는 어떤 것의 크기가 커지면 커질수록

확장성과 유지보수 측면에서 파일을 여러 개로 분리하는 시점이 오게 된다.

이때, 분리된 파일을 모듈이라고 한다.

 

1-1. 모듈을 사용하는 이유

1. 프로그램의 효율적인 관리 및 성능 향상
2. 전체적인 소프트웨어 이해의 용이성 증대 및 복잡성 감소
3. 소프트웨어 디버깅, 테스트, 통합, 수정 시 용이성 제공
4. 기능의 분리가 가능하고 인터페이스가 단순
5. 오류의 파급효과를 최소화
6. 모듈의 재사용 가능으로 개발과 유지보수가 용이

등등,,, 여러가지 이유가 있지만 가장 큰 이유는 효율적인 관리이다.

 

 

2. 모듈의 포맷 사용하기

ES6부터 제공하는 모듈의 포맷들이다.

• CommonJS
• 비동기 모듈 정의(AMD, Asynchronous Module Definition)
• 만능 모듈 정의(UMD, Universal Module Definition)
• System.register
• ES6 모듈 포맷

2-1. ES6 모듈 포맷

/* sayHi.js */

export const sayHi = (name) => {
	console.log(`안녕하세요. 저는 ${name}입니다.`);
};

/* index.js */

import { sayHi } from './sayHi.js';
sayHi('kkan');

// 안녕하세요. 저는 kkan입니다.

/* 혹은 as를 통해 별명을 붙일 수 있다. */
import { sayHi as say } from './sayHi.js';

say('kkan');  
// 안녕하세요. 저는 kkan입니다.

/* 해당 파일에 있는 전체 함수를 불러오려면 '*'를 사용한다. */
import * as hi from './sayHi.js';

hi.sayHi('kkan');
// 안녕하세요. 저는 kkan입니다.

브라우저에서 import/export 지시자를 사용하려면 <script type="module"> 같은 속성이 필요합니다.

 

2-2. CommontJS

const test1 = require('./test1');  
const test2 = require('./test2');

module.exports = function(){  
  // ...
}

2-3. 비동기 모듈 정의(AMD, Asynchronous Module Definition)

//Calling define with a dependency array and a factory function
define(['test1', 'test2'], function (test1, test2) {

  //Define the module value by returning a value.
  return function () {};
});

 

3. 주의할 점

import 구문과 export 구문은 모듈 간 의존 관계를 나타내는 것일 뿐, 코드를 실행시키라는 명령이 아니다.

• 같은 모듈을 여러 다른 모듈에서 불러와도, 모듈 내부의 코드는 단 한 번만 실행된다.
• import 구문과 export 구문은 모듈의 가장 바깥쪽 스코프에서만 사용할 수 있다.
• ECMAScript 공식 명세에는 모듈을 불러오는 방법에 대한 내용이 포함되어있지 않고, 이와 관련된 내용을 전적으로 모듈 구현체에 맡겼습니다. 따라서, 모듈을 어떤 환경에서 실행하느냐에 따라서 구체적인 로딩 순서나 동작방식이 조금씩 달라질 수 있다.