자바스크립트 모듈 시스템 | Notion

모듈(Module) 이란?

개발하는 애플리케이션의 규모가 커지면 파일을 여러 개로 분리해야 하는 시점이 옵니다. 이때 분리된 하나의 파일을 모듈(module)이라고 부르는데, 모듈은 대개 클래스 하나 혹은 특정한 목적을 가진 여러개의 함수를 포함하는 라이브러리로 구성되어 있습니다.

모듈 장점

유지보수용이 - 기능들이 모듈화가 잘 되어 있는 경우, 의존성을 줄일 수 있기 때문에 기능을 개선이나 수정이 용이합니다.
네임스페이스화 - 코드의 양이 많아질수록 전역스코프에 존재하는 변수명이 겹치는 경우가 존재합니다. 이때 모듈로 분리하면 모듈만의 네임스페이스를 갖기 때문에 그 문제를 해결할 수 있습니다.
재사용성 - 같은 코드를 반복하지 않고 모듈로 분리시켜서 필요할 때마다 재활용할 수 있다.

그리고 이러한 모듈을 필요시에 언제든지 불러올 수 있도록 하는 다양한 방법들이 있습니다. 이렇게 모듈을 불러오는 방법을 모듈 시스템이라고 하며, 그 모듈 시스템은 다음과 같은 방법들이 있습니다.

모듈 시스템 종류

AMD - 가장 오래된 모듈 시스템 중 하나로 require.js라는 라이브러리를 통해 처음 개발되었습니다.
CommonJS - NodeJS 환경을 위해 만들어진 모듈 시스템 입니다.
UMD - AMD와 CommonJS와 같은 다양한 모듈 시스템을 함께 사용하기 위해 만들어졌습니다.
ES Module - ES6(ES2015)에 도입된 자바스크립트 모듈 시스템 입니다

ES Module 방식

ES6(ES2015)에 도입된 자바스크립트 모듈 시스템 입니다. <script> 태그에 type="module" 속성을 추가해주면, 이 파일은 모듈로서 동작합니다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>ES Modules</title>
    <script type="module" src="module/index.js"></script>
  </head>
  <body></body>
</html>

모듈을 외부에서 사용할 수 있도록 내보낼 때는 named export, default export와 같은 키워드를 사용하며, 외부에서 모듈을 불러올 때는 import를 사용하여 모듈을 불러올 수 있습니다.

내보내기