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

모듈이란

별도로 분리된 재사용 가능한 코드 조각을 의미한다
쉽게 말하면 파일 하나를 의미한다.
모듈은 세부사항을 캡슐화하고 필요한 API만을 외부에 공개한다.
모듈은 기능별로 분리되고 재사용성이 좋아 개발 효율성과 유지보수성을 높인다.

최초의 자바스크립트 모듈 시스템

<head>
	<script src="/src/foo.js" />
	<script src="/src/bar.js" />
	<script src="/src/baz.js" />
	<script src="/src/qux.js" />
</head>

HTML에서 Javascript 원본 소스를 제공하고, 브라우저에서 이를 순서대로 로드하는 방식
스크립트를 로드한 전역 컨텍스트에서 각 모듈 간의 충돌이 발생하는 문제가 있음
- 모듈 간의 스코프가 구분되지 않아 다른 파일을 오염시키는 경우가 발생
- 파일들을 로드하는 순서가 중요했음

CommonJS(CJS)

module.exports = foo

const foo = require("./foo")

CommonJS는 Javascript를 브라우저뿐만 아니라 서버 사이드 애플리케이션이나 데스크톱 어플리케이션 등 좀 더 범용적인 용도로 사용하기 위한 모듈 시스템을 만들기 위해 고안된 방법이다.
CommonJS는 blocking 방식(동기 방식)이라 브라우저에서 활용할 시 너무 느리다

ES6 Module(ESM)

import foo from "bar";

export default qux;

<head>
	<script type="module" src="lib.js"></script>
	<script type="module" src="app.js"></script>
</head>