[변수미] 챕터 4,5,6

챕터_4/변수미.md

@@ -0,0 +1,11 @@
+### 안티패턴이란?
+
+- 문제 상황에 대한 잘못된 해결책
+- 문제 상황에서 벗어나 올바른 해결책에 이르는 방법
+  > 해결이 되었는가가 중요하지 않고, 문제 상황에 잘 맞는 해결책인것이 중요
+
+안티패턴은 반면 교사로 활용하기 위한문서화하여 기록해야하는 나쁜디자인 패턴이다.
+
+### 자바스크립트 안티 패턴
+
+신속한 구현을 위해 임시방편을 선택하고, 결국 기술 부채가 되는 경우가 많다. 특히 자바스크립트는 느슨한 타입 언어이기 때문에 이런 경향이 두드러진다.

챕터_5/변수미.md

@@ -0,0 +1,82 @@
+### 애플리케이션 분리의 중요성
+
+- 확장 가능한 자바스크립트 생태계에서 애플리케이션이 모듈형이다 <- 잘게 분리된 모듈로 구성됨을 뜻한다.
+- 잘게 분리된 -> 느슨할 결함은 의존성을 낮추어 애플리케이션의 유지보수를 용이하게 만듭니다
+
+ES5 이전 자바스크립트에서는 모듈을 자연스럽게 가져오는 방법이 없었고, 정교한 모듈 시스템이 필요해지자 문제가 발생하기 시작했습니다.
+
+문제를 해결하기 위해 ES6, ES2015에서 모듈 기능이 추가되었습니다.
+오늘날 모든 주요 브라우저는 자바스크립트 모듈을 지원하며, 사실상 표준이 되었습니다.
+
+### 모듈 가져오기와 내보내기
+
+모듈을 사용하면 각 기능에 맞는 독립적인 단위로 코드를 분리할 수 있습니다.
+모듈형 언어가 되기위해서는 의존성을 가진 모듈을 import, export 할 수 있어야합니다.
+
+> `.mjs`는 모듈 파일과 기존 스크립트 `.js`를 구분하기 위해쓰이는 모듈 전용 확장자 입니다.
+
+- `<script>` 태그의 type에 "module"을 명시하여 브라우저에 알릴 수 있음
+- `nomodule` 속성을 통해 모듈이 아님을 알려줄 수 있음
+
+- 모듈을 객체로 가져오기
+- 외부 소스로부터 모듈가져오기
+- 정적으로 모듈 가져오기 (기본)
+  - 메인 코드를 실행하기 전에 먼저 모듈을 다운, 실행해야한다.
+    -> 초기 페이지 로드시 많은 코드를 미리 로드해야하므로 성능상의 문제가 있을 수 있다.
+- 동적으로 모듈 가져오기
+  - `import(url)`은요청된 모듈의 네임스페이스 객체에 대한 프로미스 객체를 반환합니다.
+    이 프로미스 객체는 모듈 자체와 모든 모듈 의존성을 가져온 후, 인스턴스화 하고 평가한 뒤에 만들어집니다
+- 사용자 상호 작용에따라 가져오기
+- 화면에 보이면 가져오기
+
+> 회사 코드에는 다른 신용카드사 sdk를 모듈로 가져오는 부분이 있는데, 전역적으로 선언되어있어 모든 페이지에서 불러오는 문제가 있습니다.. (react긴 하지만)
+> 이 부분을 필요한 페이지에서만 동적으로 가져오도록 리팩토링 하면 좋을 것 같네여
+
+### 모듈을 사용하면 좋은점
+
+- 한번만 실행된다
+- 자동을 지연 로드 된다 <- 이건 몰랐는데 좋은 정보네요
+  - 즉시 로드되지 않기 위해 다른 스크립트 파일은 defer 속성을 붙여야하지만, module은 자동으로 지연되어 로드됩니다.
+- 네임스페이스를 제공한다
+- 유지보수와 재사용이 쉽다
+- 사용하지 않는 코드 제거
+  - 트리쉐이킹
+
+### 생성자, 게터, 세터를 가진 클래스
+
+ES2015+에서 생성자와 내부를 숨기는 기능을 가진 Class가 추가되었습니다..
+
+> TC39에서 function 단어의 남용을 줄일려고 노력했다.
+> 왜??
+>
+> - 코드 가독성 향상:
+
+    - function 키워드는 길고 반복적으로 사용될 수 있어 코드를 장황하게 만들 수 있습니다.
+    - 화살표 함수(=>)와 같은 간결한 구문을 도입하여 코드를 더 읽기 쉽게 만들었습니다.
+
+> - 함수의 용도 명확화
+
+    - 다양한 상황에서 function 키워드를 사용하면 함수의 목적이 불분명해질 수 있습니다.
+    - 화살표 함수, 메서드 축약 표현 등을 통해 함수의 용도를 더 명확히 표현할 수 있게 되었습니다.
+
+> - this 바인딩 문제 해결
+
+    - function 키워드로 정의된 함수는 자체 this 바인딩을 가지며, 이는 종종 혼란을 야기했습니다.
+    - 화살표 함수는 렉시컬 this를 사용하여 이 문제를 해결했습니다.
+
+자바스크립트의 클래스는
+
+- super 키워드로 부모 클래스의 생성자를 실행할 수 있습니다
+  - 자기 상속 패턴을 사용할 때 유용
+- 클래스 내부 멤버를 비공개로 정의할 수 있습니다.
+  - #(해시)를 붙여 비공개 멤버로 만들 수 있습니다.
+- static 키워드를 통해 정적 메소드와 프로퍼티를 정의할 수 있습니다.
+  - 정적 멤버는 클래스를 초기화 하지 않고도 사용할 수 있습니다.
+
+### 자바스크립트 프레임워크와 클래스
+
+리액트는 react hooks를 통해 클래스를 사용하지 않고도 react의 상태와 라이프사이클을 다룰 수 있도록 만들어졌습니다. (클레스의 대체제를 도입)
+
+> react hooks가 도입되기 전에는 상태와 라이브사이클을 도입하기 위해 어쩔 수 없이 클래스 컴포넌트를 사용해야했고, 까다롭고 어려운 작업이였습니다.
+
+여전히 클래스 컴포넌트는 사용되고 있으며, 특히 `Web Components`와 같은 다양한 시도들을 클래스 기반으로 해오고 있습니다.

챕터_6/변수미.md

@@ -0,0 +1,22 @@
+### 배경 (Gof 디자인 패턴)
+
+> 23개의 패턴을 수록한 'GoF'(Gang of Fours). Design Patterns: Elements of Reusable Object-Oriented Software. (1995)
+
+- 공통 설계 구조의 핵심 요소를 이름 짓고 추상화 하여 **재사용할 수 있는 객체지향 설계**를 만드는데 유용한 역할을 함
+- 유용한 클래스와 인스턴스를 제공하여 각각의 역할과 협업, 책임의 분배를 실현
+
+어떤 문제를 해결하느냐에 따라 세가지 유형으로 분류됩니다.
+
+- 생성 패턴
+  - 주어진 상황에 적합한 **객체 생성**을 제어하여 문제를 해결하는 것을 목표로 (프로젝트의 복잡성을 증가시키지 않게)
+  - ex) 생성자, 팩토리, 추상, 프로토타입, 싱글톤 패턴 등
+- 구조 패턴
+  - **객체의 구성**과 각 객체간의 관계를 인식하는 방법에 중점을 둠
+  - 시스템의 어느 한 부분이 변경되더라도 다른 부분에는 영향이 가지 않도록 도움
+  - 설계 목적에 맞지 않는 부분을 개선
+  - ex) 데코레이터, 어댑터 패텅 등
+- 행위 패턴
+  - 시스템 내의 **객체 간 커뮤니케이션** 개선, 간소화하는 방법에 중점
+  - 객체간의공통적인 커뮤니케이션 패턴을 감지하고, 책임을 분배
+    -> 커뮤니케이션의 유연성 증가, 객체의 행위를 추상화
+  - ex) 이터레이터, 방문자 패턴 등