JavaScript_ES6_Study [ Module ]

2022-03-13 노션페이지,
2022-04-20 노션페이지
기록된 노션을 다시 정리

1. 모듈이란

파일을 분리 시킬 때 사용한다.
JavaScript는 파일을 나누어 작성하고 분리하여도 똑같이 하나의 전역스코프를 가진다.
그렇기에 전역변수를 공용하여 전역 변수가 중복되는 등의 문제가 발생할 수 있다

이때 ES6의 모듈기능을 사용하면 독자적인 모듈 스코프를 갖는다.
script 태그에 type="module"
어트리뷰트를 추가하면 로드된 자바스크립트 파일은 모듈로서 동작한다. ES6 모듈의 파일 확장자는 모듈임을 명확히 하기 위해 mjs를 사용하도록 권장한다.

<script type="module" src="lib.js"></script>
<script type="module" src="app.js"></script>
// lib.js
var x =1;
// app.js
console.log(window.x); // 1
console.log(x); // 1 출력됨 똑같은 전역객체를 공유하기 때문

--------------------------------------------------------

<script type="module" src="lib.mjs"></script>
<script type="module" src="app.mjs"></script>

// lib.mjs (모듈)
var x =1;
console.log(window.x); // 에러발생
console.log(x); // 1

// app.mjs (모듈)
var y = 2
console.log(x);  // 에러발생
console.log(y);  // 2
console.log(window.y);  // 에러발생

2. export 키워드

모듈을 공개하려면 선언문 앞에 export 키워드를 사용한다. 여러 개를 export할 수 있는데 이때 각각의 export는 이름으로 구별할 수 있다.

// lib.mjs
const pi = Math.PI;

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

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

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

3. import 키워드

모듈에서 공개(export)한 대상을 로드하려면 import 키워드를 사용한다.
모듈이 export한 식별자로 import하며 ES6 모듈의 파일 확장자를 생략할 수 없다.
=> 확장자 생략 시 파일을 js로 판단함

// app.mjs
// lib.mjs 모듈이 export한 식별자로 import한다.
import { pi, square, Person } from './lib.mjs';
// import { pi as PI, square as sq, Person as P } from './lib.mjs';
// 이름을 마음대로 바꿔서 가능

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

--------------------------------------------
// export default pi; 하나만 했을 경우
import pi from './lib.mjs';

참조: poiemaweb.com