[박기환] Week 18

Week18/Chapter48/기환.md

@@ -1 +1,38 @@
-파이팅!
+# 48장 모듈
+
+## 48.1 모듈의 일반적 의미
+- 모듈 : 애플리케이션을 구성하는 개별적 요소로서 재사용 가능한 코드 조각
+  - 모듈이 성립하려면 자신만의 파일 스코프(모듈 스코프)를 가질  수 있어야함.
+  - 모듈은 기능 별로 분리되어 있기 때문에 코드의 단위를 명확히 분리하여 애플리 케이션을 구성할 수 있꼬, 재사용성이 좋아 개발 효율성과 유지 보수성을 높일 수 있음
+- export : 공개가 필요한 자산에 한정하여 명시적으로 선택적 공개가 가능
+- import : 모듈이 공개한 자산 중 일부 또는 전체를 선택해 자신의 스코프 내로 불러들여 재사용할 수 있음
+
+## 48.2 자바스크립트와 모듈
+- 자바스크립트는 웹페이지의 단순한 보조 기능을 처리하기 위한 제한적인 용도를 목적으로 태남
+  - 모듈이 성립하기 위해 필요한 파일 스코프와 import, export를 지원하지 않았음
+- 클라이언트 사이드, 즉 브라우저 환경에 국한하지 않고 범용적으로 사용하려는 움직임이 생기면서 CommonJS와 AMD가 제안됨
+- 자바스크립트 런타임 환경인 Node.js는 CommonJs를 채택하여, 모듈 시스템을 지원
+
+## 48.3 ES6 모듈(ESM)
+- script 태그에 type="module" 어트리뷰트를 추가하면 로드된 자바스크립트 파일은 모듈로서 동작
+- 일반적인 자바스크립트 파일이 아닌 ESM임을 명확히 하기 위해 확장자는 mjs를 사용할 것을 권장
+
+### 48.3.1 모듈 스코프
+- ESM은 독자적인 모듈 스코프를 가짐 -> 일반적인 자바스크립트 파일은 script 태그로 분리해서 로드해도 독자적인 모듈 스코프를 갖지 않음.
+- 모듈 내에서 선언한 식별자는 모듈 외부에서 참조할 수 없음
+
+### 48.3.2 export 키워드
+- 모듈은 독자적인 스코프를 가지기 때문에 외부에 공개하여 다른 모듈들이 재사용할 수 있게하려면 export 키워드를 사용해야함
+- 선언문 앞에 사용 -> 변수, 함수, 클래스 등 모든 식별자를 export할 수 있음
+- export할 대상들을 하나의 객체로 구성하여 한 번에 export할 수 있음
+
+### 48.3.3 import 키워드
+- 다른 모듈에서 공개한 식별자를 자신의 모듈 스코프 내부로 로드하려면 import 키워드를 사용해야함
+- 다른 모듈이 export한 식별자 이름으로 import 해야 하며 ESM의 경우 파일 확장자를 생략할 수 없음
+- 모듈이 export한 식별자 이름을 일일이 지정하지 않고 하나의 이름으로 한 번에 import할 수도 있음
+  - import되는 식별자는 as 뒤에 지정한 이름의 객체에 프로퍼티로 할당된다.
+- 모듈이 export한 식별자 이름을 변경하여 import할 수 있음
+- 모듀에서 하나의 값만 export 한다면 default 키워드를 사용할 수 있음
+  - 기본적으로 이름 없이 하나의 값을 export함
+  - var, let, const 키워드는 사용할 수 없음
+  - {} 없이 임의의 이름으로 import함

Week18/Chapter49/기환.md

@@ -1 +1,67 @@
-파이팅!
+# 49장 Babel과 Webpack을 이요한 ES6+/ES.NEXT 개발 환경 구축
+- 브라우저마다 ES6와 그 이상의 버전의 지원율이 제각각임
+- 경우에 따라 모든 브라우저에서 동작시키기 위한 개발 환경을 구축해야함
+- 대부분의 프로젝트가 모듈을 사용하므로 모듈 로더도 필요
+  - ESM은 대부분의 모던 브라우저에서 사용할 수 있지만, 다음과 같은 이유로 아직까지는 별도의 모듈 로더를 사용하는 것이 일반적
+    - IE를 포함한 구형 브라우저는 ESM을 지원하지 않음
+    - ESM 사용하더라도 트랜스파일링이나 번들링이 필요한 것은 변함이 없음
+    - ESM이 아직 지원하지 않는 기능이 있고 점차 해결되고는 있지만 아직 몇 가지 이슈가 존재.
+  - 트랜스 파일러 : Babel
+  - 모듈 번들러 : Webpack
+
+## 49.1 Babel
+- IE 같은 구형 브라우저에서는 ES6의 화살표 함수와 ES7의 지수 연산자를 지원하지 않을 수 있음
+  - Babel을 사용하면 ES5 사양으로 변환 가능
+  - Babel은 ES6+/ES.NEXT로 구현된 최신 사양의 소스코드를 IE 같은 구형 브라우저에서도 동작하는 ES5 사양의 소스코드로 변환(트랜스 파일링)가능
+
+### 49.1.1 Babel 설치
+- npm에서 설치 가능, 몇 가지 명령어를 통해 Babel 설치(책 참조)
+
+### 49.1.2 Babel 프리셋 설치와 babel.config.json 설정 파일 작성
+- Babel을 사용하려면 @babel/preset-env(Babel 프리셋)를 설치해야함
+- @babel/preset-env는 필요한 프러그인들을 프로젝트 지원 환경에 맞춰 동적으로 결정해줌
+  - 프로젝트 지원 환경은 Browserlist 형식으로 .browserlistrc 파일에 상세히 설정 가능
+  - 프로젝트 지원 환경 설정 작업을 생략하면 기본값으로 설정된다.
+- 설치 후 프로젝트 루트 폴더에 babel.config.json 설정 파일을 생성, 다음과 같이 작성(@babel/preset-env를 사용하겠다는 의미)
+  - `{ "presets" : ["@babel/preset-env"] }`
+
+### 49.1.3 트랜스파일링
+- npm scripts에 Babel CLI 명령어 등록
+- 트랜스파일링 테스트 진행(ES6+/ES.NEXT 사양의 자바스크립트 파일 작성, 실행)
+- 2021년 9월 기준 private 필드 정의 제안에서 에러 발생으로 인한 별도의 플러그인 설치 필요
+
+### 49.1.4 Babel 플러그인 설치
+- Babel 홈페이지에서 public/private 클래스 필드를 지원하는 @babel/plugin-proposal-class-properties 설치
+- `$ npm install __save-dev @babel/plugin-proposal-class-properties`
+- 설치 후 babel.config.json 설 정 파일에 추가
+
+### 49.1.5 브라우저에서 모듈 로딩 테스트
+- 브라우저는 CommonJS 방식의 require 함수를 지원하지 않으므로 트랜스파일링된 결과를 그대로 브라우저에서 실행하면 에러가 발생
+- Webpack을 통해 문제 해결
+
+## 49.2 WebPack
+- Webpack : 의존 관계에 있는 자바스크립트, CSS, 이미지 등의 리소스들을 하나(또는 여러 개)의 파일로 번들링 하는 모듈 번들러
+- 의존 모듈이 하나의 파일로 번들링 되므로 별도의 모듈 로더가 필요 X
+- 여러 개의 자바스크립트 파일을 하나로 번들링하므로 HTML 파일에서 script 태그로 여러 개의 자바스크립트 파일을 로드해야 하는 번거로움도 사라짐
+
+### 49.2.1 Webpack 설치
+- 터미널에서 명령어를 입력하여 Webpack 설치
+- `$ npm install --save-dev webpack webpack-cli`
+
+### 49.2.2 babel-loader 설치
+- Webpack이 모듈을 번들링할 때 Babel을 사용하여 최신 사양의 소스코드를 ES5 사양의 소스코드로 트랜스파일링 하도록 babel-loader를 설치
+- `$ npm install --save-dev babel-loader`
+- npm script를 변경하여 Babel 대신 Webpack을 실행하도록 수정
+  - package.json 파일의 script를 변경
+
+### 49.2.3 webpack.config.js 설정 파일 작성
+- webpack.config.js : Webpack이 실행될 때 참조하는 설정 파일
+- 프로젝트 루트 폴더에 webpack.config.js 파일을 생성하고 알맞게 작성(책 참조)
+
+### 49.2.4 bable-polyfill 설치
+- Babel을 사용해 트랜스파일링해도 지원하지 않는 코드가 남아 있을 수 있음(ex. Promise, Object.assign, Array.from 등)
+- 남아 있는 코드를 사용하기 위해 @babel/polyfill 설치
+  - `$ npm install @babel/polyfill`
+  - 개발 환경이 아닌 실제 운영 환경에서도 사용해야 하므로 --save-dev 옵션 지정 X
+
+