모듈 문법

서버>

--require--
const 변수(= {a, b...}) = require('폴더/파일 경로')
const 변수 = require('모듈이름')

--export--
export.변수(=속성) = 값
module.export = 객체

---

클라>

--export--

export const title = 'Module';

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

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

export { printer, arrPrinter };

+ 이름 변경
export { printer as namedPrinter, arrPrinter };

default 키워드를 통해 표현식을 export하는 방법도 있음.

const title = 'Module';

default 키워드는 한 모듈에 한 번만 가능함.
export default title;

default 키워드로 여러 값을 export 하고 싶으면,
export default { title, printer, arrPrinter };

위와 같이 export된 값들을 import 할 때, 
import한 하나의 객체의 title, printer, arrPrinter 라는 속성으로 접근해서 사용할 수 있음.

--import--
import 키워드 이후에 중괄호를 감싸면,
아래 코드 처럼 모듈 파일에서 export하는 항목들을 선택적으로 불러올 수 있음.

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

+ as 키워드로 이름 변경
import { title as moduleTitle, data } from './modules.js';

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

default export된 대상을 import할 때

이렇게 쓸 때는 as로 새로운 이름 붙여야 함.
import { defult as modules } from './modules.js';

+ 하지만 축약형으로 불러올 수 있음.
import modules from './modules.js';

일반적인 방식과 default 키워드 방식 혼합

import modules, { title, data } from './modules.js';
*modules가 default, title, data이 일반.

응용하면 다음과 같이 쓸 수 있다.

// (modules.js)
import module1 from './sub-module1.js';
import module2 from './sub-module2.js';
import module3 from './sub-module3.js';

export { module1, module2, module3 };

// index.js
import { module1, module2, module3 } from 'modules.js';

모듈 파일들(.js)은 import/export 방식으로 서로 연결되어 있어서, html파일에는 js 진입점 역할인 index.js 파일만 써주면 됨.

<script type="module" src="index.js"></script>

type="module" 속성을 안해주면 모듈은 모듈 스코프가 아닌 전역 스코프를 갖게되어 변수 사용시 여러 문제점을 일으킬 수 있음.