[Part2-2주차] 모듈 , 모듈 내보내고,가져오기 - 최희락

Part2/02-모듈 소개,내보내고 가져오기.md

@@ -0,0 +1,130 @@
+# 모듈 #
+
+## 개발하는 애플리케이션의 크기가 커지면 파일을 여러개로 분리해야 하는데 이때 분리된 파일을 각각 '모듈'이라고 부른다. ##
+
+모듈을 불러오기 위해선 특수한 지시자 export와 import를 적용하면 된다.
+불러운 모듈에 있는 함수를 호출하는것과 같은 기능 공유가 가능하다.
+
+export지시자 : 변수나 함수 앞에 붙이면 외부 모듈에서 해당 변수나 함수에 접근할수 있다.(모듈 내보내기).
+
+import지시자 : 사용하면 외부 모듈의 기능을 가져올 수 있습니다.(모듈 가져오기).
+
+모듈은 로컬 파일에서 동작하지 않고, HTTP 또는 HTTPS 프로토콜을 통해서만 동작한다.
+로컬에서 FILE:// 프로토콜을 사용해 웹페이지를 열면 import,export지시자가 동작하지 않습니다.
+
+## 모듈의 핵심 기능 ##
+일반 스크립트와 모듈의 차이점 
+1. 엄격 모드로 실행됨 모듈은 항상 엄걱 모드로 실행되며 선언되지 않은 변수에 값을 할당하는 등의 코드는 에러를 발생시킴.
+2. 모듈은 자신만의 스코프가 있으므로 모듈 내부에서 정의한 변수나 함수는 다른 스크립트에서 접근할 수 없다.
+3. 동일한 모듈이 여러 곳에서 사용되더라도 모듈은 최초 호출 시 단 한번만 실행되며 실행 후 결과는 이 모듈을 가져가려는 모든 모듈에 내보내 짐
+4. this는 undefinde 모듈 최상위 레벨의 this는 undfined , 일반 스크립트의 this는 전역객체
+
+## 브라우저의 특정 기능 ##
+브라우저 환경에서 type="module"이 붙은 스크립트와 일반 스크립트와 다른점
+1. 지연실행 : 모듈 스크립트는 항상 지연 실행된다. 외부스크립트,인라인 스크립트와 관계없이 마치 defer 속성을 붙인것처럼 실행된다.
+2. 일반 스크립트에서 async속성은 외부 스크립트를 불러올 때만 유효함. async속성이 붙은 스크립트는 로딩이 끝나면 다른 스크립트나 HTML이 처리되길 기다리지 않고 바로 실행됨. 모듈 스크립트에선 anync 속성을 인라인 스크립트 에도 적용할수 있다.
+3. type="module"이 붙은 외부 모듈 스크립트는 src 속성값이 동일한 외부 스크립트는 한번만 실행된다
+4. import는 반드시 상대 혹은 절대 URL 앞에 와야한다. '경로가 없는'모듈은 허용되지 않음. 위치에 맞지 않게 작성하면 무효가됨.
+5. 구식 브라우저는 type="module"를 해석하지 못해서 모듈 타입의 스클비트를 만나면 이를 무시하고 넘어감 -> nomodule속성을 사용하면 상황대비가능.
+
+## 빌드 툴 ##
+모듈을 '단독'으로 사용하는 경우는 흔치 않다. 대게 웹팩과 같은 특별한 툴을 사용해 모듈을 한데 묶어(번들링)프로덕션서버에 올리는 방식을 사용함.
+번들러를 사용하게 되면 모듈 분해를 통제할 수 있게됨. 경로가 없는 모듈이나 css,hteml 포맷의 모듈을 사용할 수 있게 해준다는 장점이 있다.
+
+빌드 툴의 역할
+1. HTML의 <script type="module">에 넣을 진입점 역할을 하는 모듈을 선택
+2. '주요'모듈에 의존하고 있는 모듈 분석을 시작으로 모듈 간의 의존 관계를 파악
+3. 모듈 전체를 한데 모아 하나의 큰 파일을 만듦 이 과정에서 import문이 번들러 내 함수로 대체됨으로 기존 기능 그대로 유지
+4. 변형이나 최적화도 함께 수행됨 (도달 가능하지 않은 코드 삭제,쓰임처가 없는 모듈을 삭제, console,debugger같은 개발관련 코드 삭제,최신 자바스크립트 문법이 사용된 경우 바벨을 사용해 동일한 기능을 하는 낮은 버전의 스크립트로 변환,공백 제거, 변수이름 줄이기 등으로 산출뭉릐 크기를 줄인다.
+
+
+# 모듈 내보내고 가져오기 #
+클래스나 함수를 내보낼 땐 세미콜론을 붙이지 말것.
+1. 선언부 앞에 export 붙이기 
+
+//배열 내보내기 export let months = ['Jan', 'Feb', 'Mar','Apr', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+
+//상수 내보내기 export const MODULES_BECAME_STANDARD_YEAR = 2015;
+
+//클래스 내보내기
+export class User {
+  constructor(name) {
+    this.name = name;
+  }
+}
+
+2. 선언부와 떨어진 곳에 export 붙이기 
+
+// 📁 say.js
+function sayHi(user) {
+  alert(`Hello, ${user}!`);
+}
+
+function sayBye(user) {
+  alert(`Bye, ${user}!`);
+}
+
+export {sayHi, sayBye}; // 두 함수를 내보냄
+
+export문을 함수 선언부 위에 적어주는 것도 동일하게 동작한다.
+
+3. import *
+
+//무언갈 가져오고 싶다면 이에 대한 목록을 만들어 import{...}작성
+
+import {sayHi, sayBye} from './say.js';
+
+//한꺼번에 모든 걸 가져오는 방식 (사용하면 코드가 짧아진다. 어떤걸 가져올땐 그 대상을 구체적으로 명시필요)
+
+import * as say from './say.js';
+
+4. import ‘as’ ( as를 사용하면 이름을 바꿔서 모듈을 가져올 수 있다. )
+
+// sayHi를 hi로 , sayBye를 bye로 이름을 바꿔서 가져오기
+
+import {sayHi as hi, sayBye as bye} from './say.js';
+
+5. Export ‘as’ ( import와 동일하게 이름을 바꿔서 적용할수 있다.)
+
+// sayHi를 hi로 , sayBye를 bye로 이름을 바꿔서 가져오기
+
+export {sayHi as hi, sayBye as bye};
+
+6.export default
+
+export default를 사용하면 '해당 모듈엔 개체가 하나만 있다’는 사실을 명확히 나타낼 수 있습니다.
+
+7.‘default’ name
+
+default 키워드는 기본 내보내기를 참조하는 용도로 종종 사용됩니다.
+
+1.가져오기 할 때 개발자가 원하는대로 이름을 지정해 줄 수 있다. (자유롭게 이름을 짓다 보면 같은 걸 가져오는데도 이름이 달라 혼란의 여지가 생길수 있음 프로젝트 시작시 파일 이름과 동일한 이름을 사용하도록 내부규칙을 정하고 시작하면 예방할수 있음)
+
+8.모듈 다시 내보내기
+export ... from ... 문법을 사용하면 가져온 개체를 즉시 '다시 내보내기'할 수 있다.-> 이름을 바꿔서 다시 내보낼 수 있다.
+
+export {sayHi} from './say.js'; 
+
+// sayHi를 다시 내보내기 함
+
+export {default as User} from './user.js'; 
+
+// default export를 다시 내보내기 함
+
+default export 다시 내보내기
+
+// 📁 user.js
+export {default as User}{
+  // ...
+}
+
+// 두 가지를 동시에 다시 내보내고 싶다면 두 문을 동시에 사용해야함 .
+
+export * from './user.js'; 
+
+// named export를 다시 내보내기
+
+export {default} from './user.js'; 
+
+// default export를 다시 내보내기
+