JS 모듈 (PurpleCode Study)

개발하는 애플리케이션의 크기가 커지면 언젠가 파일을 여러 개로 분리해야 하는 시점이 옵니다.

이때 분리된 파일 각각을 모듈(module)이라고 부릅니다.

모듈은 대개 클래스 하나 혹은 특정한 목적을 가진 복수의 함수로 구성된 라이브러리 하나로 구성됩니다.

모듈이란?

모듈은 단지 파일 하나에 불과합니다. 스크립트 하나가 곧 모듈 하나입니다.

모듈에 특수한 지시자인 export, import 키워드를 적용하면 다른 모듈을 불러와 모듈에 있는 함수를 호출하는 것과 같은 기능 공유가 가능합니다.

• export: 외부 모듈에서 해당 변수나 함수에 접근 가능하게 모듈을 밖으로 내보냅니다.
• import: export로 내보낸 모듈을 불러올 수 있습니다.

모듈을 브라우저에서 사용할 경우 <script type="module"> 같은 속성을 설정해서 해당 스크립트가 모듈이란 걸 브라우저가 알 수 있게 해야합니다.

모듈의 핵심 기능

Q. 일반적인 스크립트와 모듈의 차이점은 무엇일까요?

1.엄격모드로 실행됨
모듈은 항상 엄격 모드(use strict)로 실행됩니다.
선언되지 않은 변수에 값을 할당하는 등의 코드는 에러를 발생 시킵니다.

<script type="module">
  a=5;//Error
</script>

2.모듈 레벨 스코프
모듈은 자신만의 스코프를 가지고 있습니다.
따라서 모듈 내부에서 정의한 변수나 함수는 다른 스크립트에서 접근이 불가능합니다.

외부에 공개하려는 모듈은 export 해야 하고, 이렇게 공개된 모듈을 import 지시자를 사용해서 가져와 사용합니다.

3.단 한 번만 평가됨
동일한 모듈이 여러 곳에서 사용되더라도 모듈은 최초 호출 시 한 번만 실행됩니다. 실행 후 결과는 이 모듈을 가져가려는 모든 모듈에 내보내집니다.

//hello.js
console.log("hello");

//a.js
import "./hello.js";//hello

//b.js
import "./hello.js"; //아무일도 일어나지 않음

이런 식의 특성을 이용하면 객체로 상태관리가 가능해집니다.

//store.js
export let user = {
  id: "annie1004619"
};

//a.js
import { user } from "./store.js";
user.id = "jiwon";

//b.js
import { user } from "./store.js";
console.log(user.id);//jiwon

모듈은 단 한 번만 실행되고 실행된 모듈은 필요한 곳에 공유되므로 어느 한 모듈에서 user라는 객체를 수정하면 이 변경사항을 다른 곳에서도 확인이 가능한 것입니다.

4.import.meta
import.meta 객체는 현재 모듈에 대한 정보를 제공해줍니다.

호스트 환경에 따라 제공하는 정보의 내용은 다른데, 브라우저 환경에선 스크립트의 url 정보를 얻을 수 있습니다.

<script type="module">
  alert(import.meta.url);//script URL(인라인 스크립트가 위치해 있는 html 페이지의 URL)
</script>

export 와 import의 다양한 사용

먼저 간단하게 export는 변수나 함수, 클래스 선언 시 맨앞에 export를 붙이면 내보낼 수 있습니다.

export const coffee = ["아이스 아메리카노", "카페 라떼", "카푸치노"];

export class Ediya {
  constructor(menu) {
    this.menu = menu;
  }
}

선언을 해주고 나서 exprot도 가능합니다.

const hello = (name) => {
  console.log(`hello ${name}`);
};

const bye = (name) => {
  console.log(`bye ! ${name}`);
};

export { hello, bye };

import 지시자는 어떤 것을 가져올 때 사용한다고 했습니다.
import { hello, bye } from "./test.js";

import * as <obj>로도 사용 가능합니다.

import * as test from "./test.js";

test.hello("지원");
test.bye("지원");

import 지시자를 사용할 때 as를 사용하면 이름을 바꿔서 모듈을 가져올 수 있습니다.

import { hello, bye as greet } from "./test.js";

greet();

export도 똑같이 사용 가능합니다.

모듈은 크게 큰 두 종류로 나뉩니다.
첫번째는 복수의 함수가 있는 라이브러리 형태의 모듈로 위에서 코드를 짠 방식입니다.

두번째는 개체 하나만 선언되어 있는 모듈이 있습니다.

하나만 선언된 것을 내볼낼 때는 exprot default를 사용합니다.

export default () => {
  console.log("안녕");
};

이렇게 export dafault로 내보낸 모듈은 import로 이렇게 불러올 수 있습니다.

import test from "./test.js";

{} 중괄호 없이 모듈을 불러올 수 있습니다.