[JS] 자바스크립트 모듈 시스템 이해하기

💡 알게 된 것들

1. NodeJS에서 import문을 사용했을 때 SyntaxError: Cannot use import statement outside a module 에러를 내뱉은 이유

2. NodeJS에서 import 문이 아닌 require 문을 사용하는 이유

3. 클라이언트 사이드 자바스크립트에서 type = "module" 설정을 했던 이유

추가)

• 모듈은 독자적인 모듈(파일) 스코프를 갖는다.

키워드

1. CommonJS와 require

2. NodeJS와 브라우저의 모듈 시스템

3. import ~ export

들어가며

바닐라 자바스크립트로 한창 클라이언트 사이드 토이 프로젝트를 진행하면서 index.html 파일에 자바스크립트 파일을 연결할 때 습관처럼 붙인 키워드가 있었다. 바로 type = "module" 이라는 키워드였다. 단순히 html 파일에 자바스크립트 파일만 붙이면서 프로젝트를 하다가, 최근에 NodeJS 환경에서 간단한 프로젝트를 하면서 import ~ export 문을 사용하지 않고 require문을 통해 모듈을 불러오는 이유에 대해 궁금증이 생겼다. 꼬리에 꼬리를 무는 의문이 생기면서 모듈에 대한 공부를 하게됐다. 그리고 이해한 것을 정리해보려 한다.

자바스크립트 모듈의 역사

제목이 좀 거창하긴 하지만, 무엇이든지 그 배경을 알아야 이해가 쉽다. 자바스크립트는 단순히 웹 페이지를 보조 하기 위한 수단으로 만들어졌다. 그러다보니 여러가지 구멍이 많았는데, 이 글의 목적인 모듈 기능도 존재하지 않았다. C나 JAVA와 같은 대부분의 프로그래밍 언어는 모듈을 지원하고 있지만 자바스크립트는 그 모듈 기능을 가지고 있지 않았다.

그런 와중에 웹의 규모가 점점 커져 감에 따라 파일을 여러 개로 분리해야 하는 모듈 시스템은 필연적이었다. 모듈 시스템은 필요했고, 모듈을 구현하기 위한 다양한 시도가 일어났다. 대표적인 모듈 시스템에는 AMD, CommonJS, UMD가 있고, 자바스크립트 런타임 환경인 NodeJS는 CommonJS를 채택하여 독자적인 진화를 거쳤다. 브라우저 환경에서도 모듈 시스템을 사용하기 위해서는 CommonJS 또는 AMD를 구현한 모듈 로더 라이브러리를 사용해야 했다.

모듈

자바스크립트는 하나의 파일로서 동작한다. 하지만 모든 작업을 하나의 파일에서 하는 것은 거의 불가능하다. 물론 가능할 수는 있겠지만 매우 비효율적이고 그렇게 할 이유가 없다. 따라서 파일을 나눠주면 효율적인 작업이 가능하다. 이 경우 NodeJS와 브라우저 환경에서 문법이 약간 달라진다.

require와 import

NodeJS는 commonJS 사양을 따른다. 따라서 아직은 ES6 문법을 사용할 수 없다. 그래서 NodeJS는 import 문을 사용하지 못하는 것이다. Babel과 같은 트랜스파일러가 장착된 웹팩을 사용하지 않는다면 require문을 사용할 수 밖에 없다.

type = "module"

클라이언트 사이드 자바스크립트에서 import문을 사용하기 위해서는 자바스크립트를 불러오는 <script> 태그에 type = "module"을 명시해주어야 한다. 이렇게 attribute를 추가하면 자바스크립트 파일은 모듈로서 동작하고 ESM(ES6 모듈)이기 때문에 확장자는 .mjs를 사용할 것을 권장한다. (그런데 나는 아직까지 .js로 사용했는데도 일단 별 문제는 없었음..)

ES6 모듈(ESM)

html 파일에 script 파일을 붙여 넣는 식의 클라이언트 사이드 자바스크립트에서는 ES6 문법을 사용할 수 있다. 그래서 import 문을 사용할 수 있다. 하지만 클라이언트 사이드라 하더라도 로컬에서 file:// 프로토콜로 웹 페이지를 연다면 사용할 수 없고, HTTP 또는 HTTPS 프로토콜을 통해서만 동작한다.

require과 import의 간단한 차이

1. require은 스크립트 어느 위치에서나 불러올 수 있지만 import는 항상 맨 위에서 수행되어야 한다.

2. import는 사용자가 필요한 부분만 선택해서 로드할 수 있기 때문에 메모리 측면에서 더 우수하다.

🔗 참고자료

도서

• <모던 자바스크립트 딥 다이브 48장, 모듈> 이웅모, 위키북스

웹 링크 및 포스팅

• JAVASCRIPT INFO - 모듈 소개
• DelftStack - JavaScript import vs require
• DaleSeo - 자바스크립트 CommonJS 모듈 내보내기/불러오기 (require)
• 돔하디(dom_hxrdy) - 웹에서 자바스크립트 모듈 사용하기

제로초님의 블로그

• (NodeJS) Node 모듈 시스템 - common.js
• (ECMAScript) ES2015(ES6) 모듈 시스템 - import, export, default