diff --git "a/docs/48_\353\252\250\353\223\210/\352\260\225\354\262\240\354\233\220B.md" "b/docs/48_\353\252\250\353\223\210/\352\260\225\354\262\240\354\233\220B.md" new file mode 100644 index 00000000..a0604e4a --- /dev/null +++ "b/docs/48_\353\252\250\353\223\210/\352\260\225\354\262\240\354\233\220B.md" @@ -0,0 +1,41 @@ +**TIL(Today I learn) 기록일** : 2024. 01. 24 + +# 48. 모듈 + +## 1. 모듈의 일반적 의미 + +모듈이란 애플리케이션을 구성하는 개별적 요소로 재사용 가능한 코드 조각을 말합니다. +모듈이 성립하려면 모듈은 자신만의 파일 **스코프(모듈 스코프)**를 가질 수 있어야 합니다. + +>자신만의 파일 스코프를 갖는 모듈의 자산9모듈에 포함되어 잇는 변수, 함수, 객체 등)은 기본적으로 비공개 상태입니다. +>쉽게말해 자신만의 파일 스코프를 갖는 모듈의 모든 자산은 캡슐화되어 다른 모듈에서 접근할 수 없습니다. + +- 모듈은 공개가 필요한 자산에 한정하여 명시적으로 선택적 공개가 가능하고 이를 `export`라 합니다. +- 모듈 사용자는 모듈이 공개한 자산 중 일부 도는 전체를 선택해 자신의 스코프 내로 불러들여 재사용할 수 있고 이를 `import`라고 합니다. + +![image](https://github.com/Ryan-Dia/Javascript-Deep-Dive-Study/assets/76567238/f94f4b6b-972f-44c0-aaea-8d83bd463f22) + +## 2. 자바스크립트와 모듈 + +자바스크립트 런타임 환경인 `Node.js`는 모듈 시스템의 사실상 표준인 `CommonJS`를 채택했고 독자적인 진화를 거쳐 기본적으로는 `CommonJS`사양을 따르고 있습니다. 따라서 `Node.js` 환경에서는 파일별로 독립적인 파일 스코프(모듈 스코프)를 갖습니다. + + +## 3. ES6 모듈(ESM) + +ES6에서는 클라이언트 사이트 자바스크립트에서 동작하는 모듈 기능을 추가했습니다. + +### 1) 모듈 스코프 + +- ESM은 독자적인 모듈 스코프를 갖습니다. +- ESM이 아닌 일반적인 자바스크립트 파일은 script 태그로 분리해서 로드해도 독자적인 모듈 스코프를 갖지 않습니다. + +### 2) export 키워드 + +- 모듈 내부에서 선언한 식별자를 외부에 공개하여 다른 모듈이 재사용할 수 있게 하려면 `export`키워드를 사용해야합니다. +- export 키워드는 선언문 앞에 사용합니다. 이러써 변수, 함수, 클래스 등 모든 식별자를 `export`할 수 있습니다. + +### 3) import 키워드 + +- 다른 모듈에서 공개한 식별자를 자신의 모듈 스코프 내부로 로드하려면 `import`키워드를 사용합니다. +- 다른 모듈이 `export`한 식별자 이름으로 `import`해야 하며 `ESM`의 경우 파일 확장자를 생략할 수 없습니다. +