[JavaScript] 자바스크립트 모듈(module)이란?

자바스크립트 모듈 (module)

하나의 파일에 많은 코드를 작성하게 되면 각 코드를 이해하는데 어렵고, 기능 수정이 필요할 때 그 부분을 찾기 쉽지 않기 때문에 하나의 파일에 관리하는 것이 아닌, 기능별로 여러 개의 파일로 분리해서 관리하는 것을 모듈화라고 합니다.

 

자바스크립트 모듈화는 코드를 효율적으로 관리할 수 있고, 다른 프로그램에서 재사용이 가능하다는 장점이 있습니다.

---

type="module"

`script` 태그에 `type="module"`을 적용하지 않으면 여러 파일에 각각 작성된 코드가 하나의 파일에 작성된 것처럼 공유가 됩니다. 이렇게 공유가 되어 버리면 문제가 없어보일 수 있지만 같은 함수명을 가진 함수는 덮어써질 수도 있고, 중복된 변수나 상수를 선언하여 의도치 않은 결과와 에러를 발생시킬 수 있습니다.

 

이런 문제를 방지하려면 각각의 모듈 파일이 다른 파일과는 스코프를 함부로 공유할 수 없도록 모듈 스코프를 가지고 있어야 하고, 모듈 스코프는 `script` 태그에 `type` 속성을 `module`로 적용하면 독립적으로 스코프를 가지게 되어, 다른 파일과 스코프를 공유하지 않도록 합니다.

<script type="module" src="index.js"></script>

 

`type="module"`을 적용하게 되면 콘솔에 에러가 발생하는 경우가 있는데 이 문제는 서버를 통해 `HTML` 파일을 실행하면 해결할 수 있다.

---

모듈 문법

export

// export 사용 예시

export const title = "시니철";

export function print(value) {
	console.log(value);
}

 

다른 파일에서 사용하게 할 변수와 함수명 앞에 `export`라는 키워드를 붙여주면 다른 파일에서 사용할 수 있게 됩니다.

하지만 `export`를 해서 모든 파일에서 제한 없이 사용되는 것이 아니라 변수나 함수를 사용하려고 하는 파일에서 모듈 문법으로 불러오는 과정을 거쳐야 사용이 가능합니다.

 

import

// import 사용 예시
import { title, print } from "./printer.js";

print(title);

 

사용하려는 모듈 파일의 가장 상단에 `import` 키워드를 쓰고, 사용할 변수나 함수명을 중괄호 안에 적어준 다음, `from` 키워드와 모듈 파일의 경로를 적어주면 `export`한 파일의 변수와 함수를 사용할 수 있습니다.

---

import로 불러온 변수, 함수명 변경

import { title as subTitle } form "./printer.js"

 

모듈 파일에서 사용하고 있는 변수, 함수명을 현재 파일에서 사용하려고 할 때, `as` 키워드를 통해 이름을 변경해서 사용할 수 있습니다.

`as` 키워드를 기준으로 왼쪽에 `import`한 변수와 함수명, 오른쪽이 변경할 변수, 함수명을 적어주면 됩니다.

---

한 번에 import하는 방법

와일드카드 문자(Wildcard Character)

import * as printerJS from "./printer.js";

 

`import` 다음 `*`을 붙여주고 `as` 키워드 다음에 새로운 이름을 붙여주면 `printer.js`에서 `export`한 모든 대상이 새로운 이름에 전달이 됩니다.

 

한 번에 import한 대상 사용 방법

console.log(printerJS.title);

 

사용 방법은 객체 형식으로 사용이 가능하다. 

 

한 번에 `import`하는 방식은 모든 파일에서 변수나 함수를 가지고 올 때 간결하게 가져올 수 있고, 프로퍼티 형식의 값을 불러오기 때문에 이름이 중복될 경우가 없습니다.

하지만 필요 없는 대상들도 모두 불러오기 때문에 효율적인 면에서는 단점이 될 수 있습니다.

---

한 번에 export하는 방법

// 한 번에 export하는 방법 예시

const title = "시니철";

function print(value) {
	console.log(value);
}

export { title as printerTitle, print };

 

한 번에 `export`를 하면 `as` 키워드를 사용하여 모듈 파일에서 미리 이름을 변경하고 `export`도 할 수 있다.

---

GitHub : 자바스크립트 모듈(module) 정리

 

Codeit/JavaScript 중급/모던 자바스크립트/자바스크립트 모듈/2. 모듈 파일의 조건/종합 정리.md at main