Javascript & ES6 모듈화

모듈이란

• 애플리케이션을 구성하는 개별적인 요소로서 재사용 가능한 코드의 모음
• 모듈은 세부 사항을 캡슐화하고 필요한 API만을 노출한다.
• 모듈은 파일 단위로 분리되어 있고, 명시적으로 모듈을 로드하여 사용한다.
• 모듈은 개별적으로 존재하다가 애플리케이션의 로드에 의해 애플리케이션의 일원이 된다.

---

모듈의 장점
1. 재사용성
2. 효율성
3. 유지보수

---

ES6 모듈화

1.모듈 스코프

// foo.js
let x = 'foo';

// x는 전역변수이다.
console.log(window.x) // foo

// bar.js
// foo.js에서 선언한 변수 x와 중복선언
let x = 'bar';

console.log(window.x); // bar

<script src="foo.js"/>
<script src="bar.js"/>

// 선언 시에 foo에서 선언한 x와 bar에서 선언한 전역변수를 공유하기 때문에 의도치 않게 foo의 변수x는 bar의 변수 x로 덮어씌워진다.

2.export
모듈은 독자적인 모듈 스코프를 갖기 때문에 모든 식별자는 해당 모듈내에서만 참조할 수 있으며, 외부로 부터 모듈을 참조시키고 싶다면 export를 사용하면 된다.

export const pi = Math.pi;

export const square = (x) => {
  return x*x;
}

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

3.import
모듈에서 공개한 대상을 load하기 위해서 import 키워드를 사용한다.
모듈이 export한 식별자로 import하며 ES6 모듈의 파일 확장자를 생략할 수 없다.

import { pi, square, Person } from './lib.js';

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