모듈이란?

개발하는 어플리케이션의 규모가 커지면서 파일을 여러 개로 분리해야 하는 시점이 온다. 이때 분리된 하나의 파일을 모듈이라고 한다.

모듈의 장점

• 유지보수가 용이 : 의존성 줄여
• 네임 스페이스화 : 코드의 양이 많아질수록 전역 스코프에 존재하는 변수명이 겹치는 경우가 존개한다. 이때 모듈로 분리하면 모듈안의 네임 스페이스를 갖기 때문에 그 문제를 해결할 수 있음
• 재사용성 : 모듈로 분리시켜 필요할때마다 재활용

이러한 모듈을 필요시에 언제든지 불러올 수 있도록 하는 다양한 방법들이 있다. 이렇게 모듈을 불러오는 방법을 모듈 시스템이라고 한다.

모듈 시스템의 종류

• AMD : requere.js라는 라이브러리를 통해 처음 개발
• Common JS : Node.js환경을 위해 만들어진 모듈 시스템
• UMD : AMD, Common JS와 같은 다양한 모듈 시스템을 함께 사용하기 위해 만들어짐
• ES Module : ES6에 도입된 자바스크립트 모듈 시스템

ES Module 방식

export와 import를 적용해 다른 모듈을 불러올 수 있음

사용방법

export

1. named export

• 하나씩 내보내기

export const a = 1
export function fn(){}
export class Class{}

• 한번에 내보내기

const a = 1
function fn(){}
class Class{}

export { a, fn, Class }

2. default export

• 함수 앞에 export default 붙이기
  (default export는 모듈당 하나만 가능)

// fn.js
export default function fn(){}
// Class.js
export default class Class{}

• 선언 후 내보내기

//a.js
const a = 1
export default a

// fn.js
function fn(){}
export default fn

// Class.js
class Class{}
export default Class

import

1. named export를 import 하는 경우

<script>
  import {a} from 'a.js'
  import {fn} from 'fn.js'
  import {Class} from 'class.js'
</script>

2. defualt export를 import 하는 경우

<script>
  import a from 'a.js'
  import fn from 'fn.js'
  import Class from 'class.js'

  //default의 경우 변수명은 원하는대로 바꿔도 된다.
  import 변경가능 from 'class.js'
</script>

(출처 : ES Module 정리하기)[https://velog.io/@jjunyjjuny/ES-Modules-%EC%A0%95%EB%A6%AC%ED%95%98%EA%B8%B0]