자바스크립트 모듈(Module) 학습 내용 간단 요약

 

모듈(Module)이란?

자바스크립트 코드의 크기가 갈수록 커지고 기능도 복잡해지자 자바스크립트 커뮤니티는 코드 전체를 기능 단위의 코드 뭉치로 분해하고 필요에 따라 결합할 수 있도록 하는 시스템의 도입을 고민했습니다. 그 결과 도입된 것이 Module System입니다. 이 때 사용되는 코드 뭉치 각각을 Module이라고 합니다.

 

모듈 활용법

모듈을 내보낼 때는 export를, 가져올 때는 import를 활용합니다.

1. named export

모듈을 내보내는 가장 쉬운 방법은 내보내려는 항목 앞에 export 지시자를 배치하는 것입니다. 그 항목이 변수인지, 함수인지, 클래스인지는 상관없습니다. 최상위 항목이기만 하다면 이 방법으로 모두 내보낼 수 있습니다. 이런 방법을 named export라고 합니다.

 

위와 같이 각각 내보내지 않고 모듈 최하단에서 여러 항목을 중괄호로 묶어 내보낼 수도 있습니다.

 

as 를 활용해 이름을 바꿔 내보낼 수도 있습니다.

 

2. named export - import

named export로 내보낸 모듈은import지시자를 활용해 가져올 수 있습니다.
규칙은 아래와 같습니다.

 

 

import 뒤 중괄호안에 가져올 모듈을 적습니다. 여러개인 경우 , 로 구분합니다.
from 뒤엔 경로를 적습니다. .이 현재 경로를 의미합니다. .을 기준으로 경로를 작성하면 됩니다.
일부 모듈 시스템에선 확장명을 생략할 수 있지만 네이티브 자바스크립트에서는 확장명이 있어야 합니다.

 

import에서도 역시 as 지시자로 이름을 바꿀 수 있습니다.

 

 

또한 import 에서 * 를 활용하면 경로에서 export된 모든 모듈을 가져와 사용할 수 있습니다.
console.log를 활용해 확인한 all의 내용은 아래와 같습니다.

 

 

3. default export

named export를 설명하기 위해 예시를 든 방식과는 다르게, 대개는 한 파일에서 하나의 개체만 모듈로 넘기는 방식을 선호합니다. 그에 맞춰 유용하게 쓰이는 것이 default export 입니다.

 

내보내는 방법은 크게 다르지 않습니다. 위의 방식에서 export 뒤에 default만 더해주면 됩니다.

 

이 방식을 활용하면 어차피 하나의 파일에서 하나의 개체만 넘길 수 있기 때문에 이름없는 함수나 클래스, 배열도 넘길 수 있습니다

 

또한 기본 내보내기는

 

이와 같은 방식으로도 구현할 수 있습니다.

4. default export - import

default export로 내보낸 값을 가져올 때는 import 뒤에 중괄호를 적지 않아도 됩니다.
또한 넘어온 모듈의 이름은 import 한 페이지에서 원하는 대로 적어 사용할 수 있습니다.

 

흔치 않지만 만약 한 파일에서 default export 하나와 다수의 named export가 넘어오는 상황이라면

 

위와 같이 import 해서 사용할 수 있습니다.

5. export ... from 으로 다시 내보내기

받은 걸 바로 내보내야 하는 상황도 있을 수 있습니다. 이럴 경우

 

위와 같이 처리할 수 있습니다.

6. HTML에 module 적용하기

위에서 정리한 내용은 모듈과 모듈간의 결합. 그러니까 스크립트 파일과 스크립트 파일간의 결합이었습니다.
이걸 html 파일에 적용하려면 어떻게 해야 할까요?

 

위와 같이 script 태그에 type 속성값을 module로 줘서 활용하면 됩니다.
type 속성을 명시하지 않으면

 

Uncaught SyntaxError: Cannot use import statement outside a module

 

위와 같은 에러가 발생합니다.

 

참고로 하나 덧붙이자면, script태그에 type을 module로 준 모듈 스크립트는 defer 속성을 붙인 것 처럼 HTML 문서가 완전히 만들어진 이후 실행되고

 

모듈을 외부에서 불러오는 외부 모듈 스크립트를 다운로드 할 때는

 

브라우저가 외부 모듈 스크립트와 기타 리소스를 병렬적으로 불러옵니다.

참조

MDN - javascript 안내서 - Javascript modules
모던 JavaScript 튜토리얼 - 코어 자바스크립트 - 모듈 소개
모던 JavaScript 튜토리얼 - 코어 자바스크립트 - 모듈 내보내고 가져오기
doondoony - JavaScript Module System