[JavaScript] 모듈화가 필요한 이유(Module)

Module이란?

코드를 해당 파일 내부에서만 한정할 수 있도록 모듈화하는 것

즉, 한 모듈이라고 하는 것은 한 파일 안에 작성돼있는 코드를 말한다.

 

모듈화를 하면 기본적으로는 서로 다른 모듈(즉 서로 다른 파일)에서는 다른 파일에 있는 것들을 접근하거나 볼 수 없다.

따라서 다른 모듈에서 어떤 모듈의 함수를 이용하고 싶다면 제공하고자 하는 모듈에서는 export를, 사용하고자 하는 모듈에서는 import를 사용해야한다.

---

Module의 필요성

여러 개의 파일이 있을 때 각각의 파일의 모든 코드들을 global scope로 측정된다.

즉 파일 안에 작성된 함수들은 브라우저 환경이라면 window에, 노드 환경이라면 global에 등록된다.

 

문제는 어떤 파일들에서 중복적인 이름의 함수가 구현돼있을 때 이름 충돌이 발생한다.

가져다가 사용하는 라이브러리에서 동일한 이름으로 사용하는 함수가 있을 수도 있을 것이다.

따라서 규모가 조금이라도 큰 프로젝트라면 모듈화하는 것이 안전하다.

---

Module 사용법

1️⃣ html에서 JS파일을 script로 연결할 때 type을 module로 지정해준다.

<script type=“module” src=“모듈파일이름.js”></script>

 

2️⃣ export에 default를 붙이면 default로 export되는 것을 의미하고, default는 단 하나의 함수나 변수에만 사용이 가능하다.

import할 때 default는 따로 명시하지 않아도 기본적으로 사용이 가능하고, 이외의 함수나 변수는 {  }를 사용해 import해준다.

 

calculator.js

export function add(a, b) {
  return a + b;
}

export const price = 1000;

export function printPrice() {
  console.log('price: ', price);
}

 

mathExam.js

import calcaulator, {printPrice}  from './10-3-module1.js';
console.log(calculator.add(1, 2));
calculator.printPrice();
calculator.price;