자바스크립트 모듈

1. 모듈 스코프

<!-- 모듈 파일의 조건 -->
<!-- 모듈 스코프 -->
<script type="module" src=""></script>

2. 모듈 문법

// 모듈 문법
// printer.js
export const title = 'Cracked_Egg';

export function print(value) {
  console.log(value);
};

// index.js
import { title, print } from './printer.js';

3. 이름 바꾸기

// 이름 바꾸기
import { title as printerTitle, print } from './printer.js';

const title = 'Hello';

4. 한번에 다루기

// 한꺼번에 다루기
import * as printerJS from './printer.js'; // 와일드카드 문자(Wildcard Character)
import {
  title as membersTitle,
  data as memeberData
} from './members.js';

console.log(printerJS.title);
printerJS.print(membersTitle);
printerJS.print(membersData);

// --------------------- //
export { title, print }; // as 키워드 가능

5. default export

// default export (한번만 사용 가능)
export default title;

import { default as name } from './';

6. 활용

export const title = 'Module';

// 선언된 변수나 함수를 코드 블록으로 export
const printer = (value) => {
  console.log(value);
};

const arrPrinter = (arr) => {
  arr.forEach((el, i) => {
    console.log(`${i + 1}. ${el}`);
  })
};

export { printer, arrPrinter };

// as 키워드로 export
const printer = (value) => {
  console.log(value);
};

const arrPrinter = (arr) => {
  arr.forEach((el, i) => {
    console.log(`${i + 1}. ${el}`);
  })
};

export { printer as namedPrinter, arrPrinter };

// 여러 대상을 객체 값으로 모아 내보내기
const title = 'Module';

const printer = (value) => {
  console.log(value);
};

const arrPrinter = (arr) => {
  arr.forEach((el, i) => {
    console.log(`${i + 1}. ${el}`);
  })
};

export default { title, printer, arrPrinter };

import { title, data } from './modules.js';

// as 키워드
import { title as moduleTitle, data } from './modules.js';

// 와일드카드 문자(*)
import * as modules from './modules.js';

// default export 대상 import
import { defult as modules } from './modules.js';
import modules from './modules.js';