[Javascript] 모듈 Module

작성일: 2021.06.10, Ver1

 

1. 모듈이란?

- 애플리케이션을 구성하는 개별적 존재. 즉, 애플리케이션과 분리되어 존재 (애플리케이션 내에 있는 독립적인 존재)

- 재사용가능한 코드조각, 자신만의 파일 스코프(모듈 스코프)를 가짐

 

 

- 모듈 내부에서 선언한 모든 식별자는 해당 모듈 내부에서만 참조할 수 있음.

(즉, 남친이 나를 애칭으로 '귀요미'라고 부르면 그건 남친과 나와의 관계(모듈)에서만 해당되는 호칭이고

다른 곳에선 그 누가 '귀요미'라고 불러도 나는 반응하지 않는다.)

 

 

- 공개가 필요한 자산에 한정하여 명시적으로 선택적 공개가 가능 -> export

- 모듈 사용자는 공개한 자산 중 일부, 전체를 자신의 스코프 내로 불러들여 재사용 -> import

(누군가 나를 '귀요미'라고 부를 수 있도록 허락하고, 내가 그 애칭을 타인에게 알려준다면 그 타인도 나를 '귀요미'라고 부를 수 있고, 나는 그 애칭에 반응한다.)

 

(아, 마치 함수의 매개변수는 함수 몸체 내부에서만 참조할 수 있는 것 처럼, 모듈은 (export하지 않는 이상) 모듈 내에서만 참조가 가능한 것과 같은 이치인 듯._

 

 

2. 자바스크립트에도 모듈이 있다.

1) 원래 자바스크립트엔 모듈이 없다고?

- 모든 자바스크립트 파일은 하나의 전역을 공유 We are all Java! 

- script태그로 로드는 가능하나 파일마다 독립적인 파일스코프를 갖지 않음

즉, 자바스크립트 파일을 분리해도 script 태그로 로드하면 결국 하나의 자바스크립트 파일 내에 있는 것 처럼 동작. (독자적 모듈스코프 없음

 

2) 하지만! 나도 갖고싶어 모듈!

- 브라우저 환경에 국한되지 않고 범용적 사용 움직임 -> ESM이라는 모듈등장 -> JS도 독자적인 모듈스코프 갖게 됨.

 

자바스크립트 모듈시스템

- CommonJS, AMD

 

런타임환경

- Node.js -> CommonJS사용

 

로드

- type="module"

 

 

3. 키워드 설명

(1) export;

- 모듈 내부에서 선언한 식별자를 외부의 다른 모듈들이 재사용할 수 있도록 하는 키워드

(너도 나를 '귀요미'라 부를 수 있도록 허락해줄게. 남친과 사용하던 '귀요미'라는 호칭을 공개하면서 사용을 허락함.)

 

(2) default

- 모듈에서 하나의 값만 export 시 사용, 해당 키워드 사용 시 var, let, const 사용불가

 

(3) import

- 공개된 식별자를 다른 모듈 스코프 내부로 로드하는 키워드 (ESM은 파일 확장자 생략 불가)

(타인이 '귀요미'라고 부르는 것)

 

 

Q. library랑 뭐가 다른가?

- 같다고 보면 됨.

 

 

해당 글은 책, '모던 자바스크립트 DEEP DIVE'를 읽고 정리한 내용입니다.

---

2021.06.10, Ver1 Comment.

 

책을 순서대로 안 읽고 막 섞어가며 읽기에 (마치 '짱구는 못말려 게임북'처럼) 읽으면서도 모르는 개념과 표현이 많이 있다. 그런 부분은 일단 모르는 대로 넘어간다. 그렇기에 위 글에선 모르는 내용을 그냥 그대로 옮겨 적어놓은 것도 있기에 추후 책을 다 읽고나면 좀 더 명확한 정리가 될 것이라 생각된다.