[스터디] 자바스크립트 모듈

모듈이란?

자바스크립트로 개발하는 애플리케이션이 커지면서, 파일을 분리하여 사용하게 되었고, 이 때 분리된 파일을 모듈이라고 한다.

즉, 클래스 하나/ 복수의 함수로 구성된 라이브러리 하나로 구성된 파일이라고 보면 된다.

 

역사

이전에는 자바스크립트 자체적으로 모듈 시스템을 지원하지 않아서 아래의 모듈 시스템들이 사용되었었다.

• AMD 
• CommonJS
• UMD

2015년, 모듈 시스템이 표준으로 등재되었고, 아래에서 모듈을 사용하는 방법을 소개하도록 하겠다.

 

 

모듈 내보내기 / 가져오기

모듈은 export / import 지시자를 통해서 내보내고 가져올수 있다.

그 방법은 개체가 여러개일때와 한개일때의 경우로 나눠서 소개하겠다.

 

1. 여러개의 함수가 있는 라이브러리 형태의 모듈

1.1 내보내기

 1) 선언부 앞에 export 붙이기

// 배열 내보내기
export let months = ['Jan', 'Feb', 'Mar','Apr', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];

// 상수 내보내기
export const MODULES_BECAME_STANDARD_YEAR = 2015;

// 클래스 내보내기
export class User {
  constructor(name) {
    this.name = name;
  }
}

 

 2) 선언부와 떨어진 곳에 export 붙이기 

  - 이때 여러개의 객체를 내보내려면 중괄호 { } 로 감싸주어야 한다.

// 📁 say.js
function sayHi(user) {
  alert(`Hello, ${user}!`);
}

function sayBye(user) {
  alert(`Bye, ${user}!`);
}

export {sayHi, sayBye}; // 두 함수를 내보냄

 3) Export 'as'

  - as 를 사용하면 이름을 바꿔서 내보낼 수 있습니다.

// 📁 say.js
...
export {sayHi as hi, sayBye as bye};

// 📁 main.js
import * as say from './say.js';

say.hi('John'); // Hello, John!
say.bye('John'); // Bye, John!

** 주의 : 클래스나 함수를 내보낼 때는 세미콜론을 붙이지 않는다.

 

 

2.2 가져오기

 1) import {....} from '경로' 의 형식으로 작성하면 된다.

 2) 이때, import * as <obj> 의 형식으로 객체형태로 원하는 것을 가져올 수 있다.

// 📁 main.js
import {sayHi, sayBye} from './say.js';

sayHi('John'); // Hello, John!
sayBye('John'); // Bye, John!


// 📁 main.js
import * as say from './say.js';

say.sayHi('John');
say.sayBye('John');

 3) import as

  - as를 사용해서 이름을 바꿔서 가져올 수 있다.

// 📁 main.js
import {sayHi as hi, sayBye as bye} from './say.js';

hi('John'); // Hello, John!
bye('John'); // Bye, John!

 

 

 

2. 개체가 하나만 있는 모듈

- export default 라는 문법을 사용하여 모듈에 개체가 하나라는 사실을 명시할 수 있다.

- 이때 내보내기, 가져오기 모두 중괄호가 필요하지 않다.

// 📁 user.js
export default class User { // export 옆에 'default'를 추가해보았습니다.
  constructor(name) {
    this.name = name;
  }
}


// 📁 main.js
import User from './user.js'; // {User}가 아닌 User로 클래스를 가져왔습니다.

new User('John');

 

 

 

---

References

1) https://ko.javascript.info/modules-intro