ES (ECMAScript) 모듈 기준으로 작성하였다.

왜 모듈을 쓸까?

기본적으로 같은 html 파일이 script 태그로 불려온 js 파일의 경우 전역 스코프의 변수/함수를 공유하게 된다. 이런 상황을 방지하기 위해 모듈을 사용하면 모듈 스코프 덕분에 파일 간의 의도치 않은 변수/함수 공유를 막을 수 있다.

사용할 준비

js module을 html에서 사용하려면 script 태그에 type="module"을 추가해주어야 한다.

<script type="module" src="파일 경로"></script>

관련 키워드

export

특정 변수/함수 등을 다른 파일에서 가져갈 수 있도록 하는 키워드.

export 내보낼_내용;

import

특정 변수/함수 등을 다른 모듈에서 가져오는 하는 키워드.

import 가져올_내용 from "파일 경로";
import 가져올_내용 from "모듈 이름"; //서드파티 모듈(라이브러리)일 경우

as

import 키워드를 통하여 가져오거나 export 키워드를 통해 내보내는 변수, 함수의 이름 뒤에 as 키워드를 붙이고 원하는 이름을 적으면 이름을 바꿔서 내보내거나 가져올 수 있다.

default

default export를 위해 사용하는 키워드. 한 파일에 한 번만 사용할 수 있다. 함수 선언 앞에 쓸 수 있다. (변수는 선언에서 쓸 수는 없다.)

사용법

Named Export

변수나 함수의 이름으로 export 하는 방법.

export

export const/let/var 변수명 ~ ;
export function 함수명(~) { ~ }

변수나 함수 선언 앞에 export 키워드를 붙여준다.

export { 변수명, 변수명 as 이름, 함수명, 함수명 as 이름, ~ };

혹은 export할 대상들을 중괄호로 묶어 한번에 export할 수 있다.

import

import { 변수명, 변수명 as 이름, 함수명, 함수명 as 이름, ~ } from "파일 경로";

import할 대상들을 중괄호 내부에 적어 import한다.

import * as 이름 from "파일 경로";

모두 불러오고 싶다면 별표(*)를 사용하면 된다. 다만 주의할 점이 있다.

• 전체를 가져올 때는 as 키워드를 통해 따로 이름을 붙여주어야 한다.
• 전체를 불러왔을 때는 객체처럼 점 표기법을 활용하여 이름.변수/함수명처럼 사용해야 한다.

Default Export

default 키워드를 통하여 하나의 대상만 export하는 방법.

export

export 키워드 뒤에 default 키워드를 붙여주면 된다.

export default 변수명/함수명/값;

Named Export와는 다르게 중괄호가 필요하지 않으며, 값도 export할 수 있다.

export default { 변수명, 함수명, ~ };

중괄호로 여러 변수/함수를 묶은 경우, default 객체 형태로 export한다.

import

import { default as 이름, ~ } from "파일 경로";

중괄호 안에서 import 할 때는 as 키워드로 꼭 이름을 붙어주어야 한다.

import 이름, { ~ } from "파일 경로";

중괄호 밖에서 할 때는 default as 부분을 생략하고 이름 이름을 가지게 할 수 있다.

import * as 이름 from "파일 경로";

별표(asterisk)로 전체를 import했을 때, default 값은 이름.default와 같이 객체의 default라는 property로서 들어간다.