📚 Reference

• 공식 문서 1: import
• 참고 자료 1
• 참고 자료 2

📜 Chapter

Async Component

‣

ESM (ECMAScript Modules)

‣

Vue Router

모듈

• 관련된 코드들을 모아놓은 독립된 파일
• 모듈 시스템은 2가지이다. "내보내기"와 "가져오기"이다.
• 모듈은 크게 2 종류로 나뉜다.
  1. 복수의 함수가 있는 라이브러리 형태의 모듈(위 예시의 say.js)
  2. 개체 하나만 선언되어 있는 모듈(아래의 user.js. class User 하나만 내보내기 함)
• 대개는 두 번째 방식으로 모듈을 만드는 걸 선호하기 때문에 함수, 클래스, 변수 등의 개체는 전용 모듈 안에 구현된다.
• 그런데 이렇게 모듈을 만들다 보면 자연스레 파일 개수가 많아질 수밖에 없다.
• 그렇더라도 모듈 이름을 잘 지어주고, 폴더에 파일을 잘 나눠 프로젝트를 구성하면 코드 탐색이 어렵지 않으므로 이는 전혀 문제가 되지 않는다.

export & import

• 내보내기 (Export): 다른 파일에서 쓸 수 있도록 허용하는 단계이다.

  // math.js
  export const PI = 3.14;
  export function add(a, b) { return a + b; }
  

• 가져오기 (Import): 허용된 기능을 내 파일로 불러오는 단계이다.

  // main.js
  import { PI, add } from './math.js';
  console.log(add(PI, 10));
  

• export 문은 JavaScript 모듈에서 함수, 객체, 원시 값을 내보낼 때 사용한다.

• 내보낸 값은 다른 프로그램에서 import 문으로 가져가 사용할 수 있다.

• 내보내는 모듈은 "use strict"의 존재 유무와 상관없이 무조건 엄격 모드이다.