module이란?

What is module?

개발하는 어플리케이션의 크기가 커지면 파일을 여러 개로 분류해야하는 시점이 찾아온다. 이때 여러 개의 파일로 분리된 .js 파일을 모듈(module)이라고 부르는데. 대게 class 하나 혹은 특정한 목적으로 묶인 function들로 구성된 library들로 구성된다. 

JavaScript가 만들어지지 얼마되지 않았을 때에는 그 script의 크기도 작고 단순한 기능들이 주를 이루었기에 module 관련된 문법이 없이도 크게 성장할 수 있었다. 그러나 그 크기가 커지고 복잡해지면서 특별한 library들을 묶어서 보관하여 언제든지 꺼내쓸 수 있는 module이 필요해졌고 ES6(2015) 이후로 표준 등재되어 사용되게 된다. 

Html로 파일을 읽어올 때 module 방식으로 작성된 순서대로 코드를 읽어오기만 하면 코드들이 아무리 분산되어있다고 한들 하나의 코드로 불러올 수 있게 되었다. 

기본적으로 내보내기는 export를 불러오기는 import를 활용하게 된다. 

---

module 내보내기

무언갈 가져오고 싶다면 export { variableName } ;와 같은 방식으로 내보낼 수 있다.

export { someData } ;

---

선언부 앞에 exprot

// 배열 내보내기
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;
  }
} // 끝에 세미콜론(;)을 붙이지 않는다.

// 함수 내보내기
export function sayHi(user) {
  alert(`Hello, ${user}!`);
}  // 끝에 세미콜론(;)을 붙이지 않는다.

• class나 function을 export할 때에는 세미콜론(;)을 붙이지 않는다. 
• export를 붙인다고 해서 해당 함수 선언문이 함수 표현식으로 변하지 않기 때문이다.
• 물론 내보내지긴 하지만 여전히 함수 선언문이기 때문에 대부분의 JavaScript 가이드에서는 세미콜론을 붙이지 말라고 권한다. 

---

선언과 떨어져서 exprot

이미 선언되었다고 할지라도 내보내기할 수 있다.

function sayHi(user) {
  alert(`Hello, ${user}!`);
}

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

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

• 심지어 선언문 위에서 export하여도 내보낼 수 있다.

---

이름 바꿔서 export

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

export {someData as data, array as arr};

이때에 다른 module에서 가져올 이름이 변경되게 된다.

---

export default

항상 내보내진 것을 기본값으로 가져가라는 의미로 언제나 default한 값을 가져올 수 있다. 

사실상 export default를 사용하면 "해당 module에는 하나의 개체만 존재한다는 것을 의미한다. 

export default const someData = ...;

---

module 가져오기

무언갈 가져오고 싶다면 import { variableName } from 'Path' ;와 같은 방식으로 가져올 수 있다.

import { someData } from './path/to/file1.js';

import { someData1, someData2 } from './path/to/file2.js';

---

Import *

가져올 것이 많다면 *을 사용하여 object 형식으로 가져올 수 있다.

마찬가지로 as를 사용하여 이름을 할당한다.

import * as files from './path/to/file.js';

---

이름 바꿔서 import

import {someData as data, array as arr} from './path/to/file.js';

---

default & named module 가져오기

(default가 아닌) 일반적인 경우, 변수의 이름을 지정하여 export를 진행하는데, 이 경우 named export라고 말한다. 

가져오는 방식에는 약간의 차이가 존재한다. 

// default export인 경우
import person from './person.js'
import per from './person.js'
// default의 경우 {}를 사용하지 않아도 될 뿐만 아니라 
// 불러오는 변수의 이름도 새롭게 지정할 수 있다.

// named export인 경우
import { smth } from './utility.js'
import { smth as Smth } from './utility.js'
import * as bundled from './utility.js'