[Javascript] 모듈 기능으로 살펴보는 자바스크립트

자바스크립트는 웹의 보조적인 기능을 수행하기 위해서 설계되었다는 태생적인 한계 때문에 모듈 기능을 지원하지 않았습니다.

모듈 기능을 지원하지 않는다는 뜻은 각각의 파일들이 독자적인 스코프를 가지고 있지 않고 동일한 전역 객체를 공유하고 있다는 뜻입니다. 그렇기 때문에 전역변수의 사용을 상당히 조심했어야 했습니다.

<html>
  <script src="/src/foo.js"></script>
  <script src="/src/bar.js"></script>
</html>

foo.js와 bar.js에서 동일한 전역 변수를 선언했다면, foo의 변수가 bar의 변수로 재정의되면서 foo의 파일이 의도대로 동작하지 않는 문제가 발생하게 됩니다.

시간이 흘러서, 모듈 지원을 해결하기 위해서 CommonJS와 AMD 진영으로 나뉘게 되었고,

ES6에 이르러서 module 기능은 표준화가 되었습니다.

script 태그에 type="module" 어트리뷰트를 추가하면 로드된 자바스크립트 파일은 모듈로서 동작한다. ES6 모듈의 파일 확장자는 모듈임을 명확히 하기 위해 mjs를 사용하도록 권장한다.

<script type="module" src="lib.mjs"></script>

하지만 대부분은 mjs를 파일 확장자로 명시한 기억이 없을 것입니다.

그 이유는 Node.js 환경에서 package.json에 type을 module로 명시하여 프로젝트 단위로 모듈 적용 설정을 해주었기 때문입니다.

{
	// ...
	"type": "module"
    // ...
}

우리가 package.json 안에서 보았던 사소한 한 줄에 이런 의미가 숨어있었네요.

JavaScript 번들러로 본 조선시대 붕당의 이해 - 재그지그의 개발 블로그

JavaScript 모듈 표준화의 제안부터 현대 모듈 번들러 등장까지의 역사를 정리해봅니다.

wormwlrm.github.io

Module | PoiemaWeb

모듈이란 애플리케이션을 구성하는 개별적 요소로서 재사용 가능한 코드 조각을 말한다. 모듈은 세부 사항을 캡슐화하고 공개가 필요한 API만을 외부에 노출한다. ES6 모듈은 단 두 개의 키워드 e

poiemaweb.com

Node.js에서 ES 모듈(import/export) 사용하기

Engineering Blog by Dale Seo

www.daleseo.com

[ESLint / Prettier] 레퍼런스 모아보기 (0)	2022.12.10
자바스크립트 객체 부수기 (0)	2022.12.04
[Javascript] 이번에야말로 regex를 써보자 (0)	2022.12.03
[Javascript] Array filter 맛깔나게 써보기 (0)	2022.11.13

티스토리툴바