Merge pull request #1267 from Ryan-Dia/ryan-dia

48장 모듈 - 강철원

docs/48_모듈/강철원B.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`의 경우 파일 확장자를 생략할 수 없습니다.
+