[백지연] 챕터 5: 최신 자바스크립트 문법과 기능

챕터_5/백지연.md

@@ -0,0 +1,66 @@
+# CHAPTER 05 최신 자바스크립트 문법과 기능
+
+## 애플리케이션 분리의 중요성
+
+ES5 이전 자바스크립트에는 모듈을 자연스럽게 가져오는 방법 X  
+AMD, CommonJS 모듈은 모듈화를 구현하기 위해 초기 자바스크립트에서 많이 사용한 패턴  
+이를 해결하기 위해 모듈 관련 기능이 추가되었음  
+자바스크립트 모듈은 ES2015 출시와 함께 표준화
+
+## 모듈 가져오기와 내보내기
+
+모듈형 언어가 되기 위해서는 의존성을 가진 모듈을 `import`, `export` 할 수 있어야 함
+
+- import
+  - export된 모듈을 지역 변수로 가져올 수 있음
+  - 기존 변수명과의 충돌을 피하도록 이름 바꿀 수 있음
+- export
+  - 지역 모듈을 외부에서 읽을 수 있지만, 수정할 수는 없음
+  - import문처럼 이름을 바꿔 내보낼 수 있음
+
+## 외부 소스로부터 가져오는 모듈
+
+ES2015부터 서드 파티 라이브러리를 쉽게 가져올 수 있음
+
+## 정적으로 모듈 가져오기
+
+static import는 메인 코드를 실행하기 전에 모듈부터 다운로드하고 실행함  
+초기 페이지 로드 시 많은 코드를 미리 로드해야 하므로 성능에 문제 생길 수도 있음
+
+## 동적으로 모듈 가져오기
+
+lazy loading을 사용해 모듈을 필요한 시점에 로드하는 것이 좋음  
+사용자 상호작용, 화면 노출 여부에 따라 dynamic import
+
+## 서버에서 모듈 사용하기
+
+Node는 type이 module이라면 `.mjs`와 `.js`로 끝나는 파일을 자바스크립트 모듈로 취급
+
+```json
+{
+  "type": "module"
+}
+```
+
+## 모듈을 사용하면 생기는 이점
+
+- 기존 스크립트는 DOM에 추가될 때마다 실행되는 반면에 모듈 스크립트는 한 번만 실행된다.
+- 즉시 로드를 피하기 위해 스크립트 파일에 defer 속성을 붙여야 하지만, 모듈은 자동으로 지연 로드된다.
+- 변수, 상수를 위한 개별 공간을 생성하여 글로벌 네임스페이스를 오염시키지 않고 모듈 참조를 통해 사용 가능하다.
+- 모듈 도입 전에는 사용하지 않는 코드를 수동으로 제거했는데, 이제는 번들러를 활용하면 자동으로 제거된다.
+
+## 생성자, 게터, 세터를 가진 클래스
+
+- 클래스는 프로토타입을 기반으로 하고 있으며, 사용 전에 미리 정의해야 함
+- `super` 키워드로 부모 클래스의 생성자 실행 → 자기 상속 패턴 사용할 때 유용
+- 최신 자바스크립트에서는 비공개 클래스 멤버 정의 가능
+  - 비공개 클래스 멤버는 선언된 클래스 내부에서만 사용
+  - `#`(해시)를 붙여 비공개 멤버로 만들 수 있음
+- `static` 키워드를 통해 정적 메서드/프로퍼티 정의
+  - 초기화하지 않고 사용 가능
+  - 설정이나 캐시 데이터를 보관하기 위해 사용
+
+## 자바스크립트 프레임워크와 클래스
+
+리액트 Hooks를 통해 클래스를 사용하지 않고도 컴포넌트의 상태와 라이프사이클 관리 가능  
+여전히 컴포넌트 개발에 클래스를 사용하는 경우 : 웹 컴포넌트