Modules

Module이란 무엇인가?

---

모듈이란, 애플리케이션을 구성하는 개별적 요소로서, 재사용이 가능한 코드 조각을 말한다.

모듈은 세부 사항을 캡슐화하고, 공개가 필요한 API만을 외부에 노출한다. 일반적으로, 각 모듈은 파일 단위로 분리되어 있고, 애플리케이션은 필요에 따라 모듈을 로드하여 재사용한다. 즉, 모듈은 애플리케이션에 분리되어 개별적으로 존재하다가 애플리케이션의 로드에 의해 비로소 애플리케이션의 로드에 의해 비로소 애플리케이션의 일원이 된다.

모듈은 기능별로 분리되어 작성되므로, 코드의 단위를 명확히 분리하여 애플리케이션을 구성할 수 있고, 재사용에 좋기 때문에, 개발을 효율적으로 할 수 있고, 유지보수 또한 좋다.

ES6에서 모듈을 사용할 때, export와 import 두 개의 키워드를 사용한다.

Module 사용의 이점

---

• Javascript 애플리케이션을 여러 개의 파일로 분할하여 작성할 수 있다.
• 재사용이 가능한 코드를 작성하기 때문에, 개발 효율과 유지보수에 좋다.

Export

---

모듈은 기본적으로 독립적인 스코프를 가지고 있어서, 모듈안에 선언된 모든 것들은 해당 모듈 내에서만 참조 할 수 있다.

어떤 모듈안에서 선언한 항목(변수/함수/클래스 등)을 외부에 공개하여 다른 모듈들이 사용할 수 있게 하려면, export를 해야한다. 이때, 선언된 변수, 함수, 그리고 클래스 모두를 export 할 수 있고, 키워드는 export를 사용한다.

// module.js
// 변수의 공개
export const num = 10;

// 함수의 공개
export function square(x) {
  return x * x;
}

// 클래스의 공개
export class Person {
  constructor(name) {
    this.name = name;
  }
}

각 선언문(변수/함수/클래스) 앞에 export를 붙이는 대신, export 대상을 하나의 객체로 구성하여, 한번에 export를 할 수 있다.

// module.js
const num = 10;

function square(x) {
  return x * x;
}

class Person {
  constructor(name) {
    this.name = name;
  }
}

// 변수, 함수 클래스를 하나의 객체로 구성하여 공개
export { num, square, Person };

Import

---

다른 모듈에서 어떤 export된 모듈을 가져와 사용하려면, 키워드 import를 사용해 로드하여 사용할 수 있다.

// main.js
// 같은 폴더 내의 module.js 모듈을 로드. 확장자 js는 생략 가능.
import { num, square, Person } from './module';

console.log(num);         // 10
console.log(square(10)); // 100
console.log(new Person('Lee')); // Person { name: 'Lee' }

각각의 이름을 지정하지 않고 하나의 이름으로 한꺼번에 import할 수도 있다. 이때 import되는 항목은 as 뒤에 지정한 이름의 변수에 할당된다.

// main.js
// lib라는 이름으로 임포트
import * as lib from './module';

console.log(module.num);         // 10
console.log(module.square(10)); // 100
console.log(new module.Person('Lee')); // Person { name: 'Lee' }

이름을 변경하여 import할 수도 있다.

// main.js
import { num as n, square as sq, Person as P } from './module';

console.log(n);    // 10
console.log(sq(2)); // 4
console.log(new P('Kim')); // Person { name: 'Kim' }

모듈에서 하나만을 export할 때는 default 키워드를 사용할 수 있다. 다만, default를 사용하는 경우, var, let, const는 사용할 수 없다.

// lib.js
function (x) {
  return x * x;
}

export default;

위 코드를 아래와 같이 축약 표현할 수 있다.

// module.js
export default function (x) {
  return x * x;
}

default 키워드와 함께 export한 모듈은 {} 없이 임의의 이름으로 import한다.

// main.js
import square from './module';

console.log(square(3)); // 9

Vue에서의 Modules 사용하는 방법

---