[5,6,7,8주차/케리] 워크북 제출합니다.

keyword/chapter04/keyword/keyword.md

@@ -0,0 +1,177 @@
+- ES
+
+  ## ECMAScript(ES)
+
+  ECMAScript는 JavaScript의 표준 사양을 정의하는 스크립팅 언어로, ECMA International에서 관리하고 있습니다. ECMAScript는 JavaScript의 핵심 기능과 문법을 명세하며, 다양한 브라우저와 환경에서 일관된 동작을 보장합니다.
+
+  ### 주요 버전
+
+  1. **ES1 (1997년)**: 최초의 ECMAScript 표준.
+  2. **ES3 (1999년)**: 주요 개선 사항과 버그 수정 포함
+  3. **ES5 (2009년)**: 엄격 모드(strict mode) 도입, JSON 지원 등
+  4. **ES6 (2015년)**: 대규모 업데이트로 현대 JavaScript의 기반을 마련함
+  5. **ES7/ES2016 이후**: 매년 새롭고 다양한 기능 추가
+
+- ES6
+  ## ES6
+  ES6는 ECMAScript의 6번째 주요 버전으로, 2015년에 출시되었습니다. ES6는 JavaScript의 개발을 크게 향상시킨 많은 새로운 기능과 문법을 도입하여 개발자들이 더 간결하고 효율적인 코드를 작성할 수 있도록 만들어졌습니다.
+  - ES6의 주요 변화 및 특징
+
+    ### ES6의 주요 특징
+
+    1. **블록 스코프 변수 선언 (`let`, `const`)**
+    2. **화살표 함수 (Arrow Functions)**
+    3. **클래스 (Classes)**
+    4. **Template Strings (Template Literals)**
+    5. **비구조화 할당 (Destructuring Assignment)**
+    6. **기본 매개변수 및 나머지 매개변수 (Default & Rest Parameters)**
+    7. **모듈화 (Modules)**
+    8. **Promises**
+    9. **Iterators & Generators**
+    10. **Maps & Sets**
+
+    ## ES와 ES6의 차이점
+
+    | **특징**    | **ES5 이전**                   | **ES6**                                                      |
+    | ----------- | ------------------------------ | ------------------------------------------------------------ |
+    | 변수 선언   | `var`만 사용                   | `let`, `const` 추가                                          |
+    | 함수 선언   | 전통적인 함수 선언 방식        | 화살표 함수 도입                                             |
+    | 클래스 지원 | 프로토타입 기반 상속           | `class` 키워드를 사용한 클래스 문법 추가                     |
+    | 문자열 처리 | 문자열 연결 시 `+` 연산자 사용 | 템플릿 리터럴을 사용한 다중 행 문자열 및 내장 변수 사용 가능 |
+    | 모듈화      | 외부 라이브러리 필요           | `import`, `export` 키워드를 사용한 모듈 시스템 도입          |
+    | 비동기 처리 | 콜백 함수 사용                 | Promise 도입                                                 |
+    | 기타        | 기능이 제한적                  | 다양한 새로운 기능과 문법 추가                               |
+
+  - ES6를 중요시 하는 이유
+    ES6는 JavaScript 생태계에서 중요한 전환점이 되었으며, 현대적인 웹 개발에서 필수적인 역할을 합니다. ES6가 중요해진 이유는 다음과 같습니다.
+    **1. 개선된 코드 가독성 및 유지보수성**
+    **2. 향상된 기능과 성능**
+    **3. 모듈화 및 코드 재사용성**
+    **4. 최신 브라우저와의 호환성**
+    **5. 개발자 생산성 향상**
+- ES Module
+  # ES Module
+  현대 JavaScript 개발에서 모듈화는 코드의 재사용성과 유지보수성을 높이기 위해 필수적인 요소입니다. ES Module은 JavaScript에서 표준화된 모듈 시스템으로, 코드를 더 깔끔하고 조직적으로 관리할 수 있게 해줍니다.
+  이전에는 CommonJS(Node.js)나 AMD(Asynchronous Module Definition) 같은 다양한 모듈 시스템이 존재했지만, ES 모듈은 브라우저와 Node.js 환경 모두에서 지원되며, 표준화된 방식으로 동작합니다.
+  ## ES 모듈 사용 방법
+  ### 모듈 내보내기 (Export)
+  모듈 내보내기는 `export` 키워드를 사용하여 특정 변수, 함수, 클래스 등을 외부에 공개하는 방법입니다.
+  ```jsx
+  export const add = (a, b) => a + b;
+  export const subtract = (a, b) => a - b;
+
+  export function multiply(a, b) {
+  	return a * b;
+  }
+
+  export class Calculator {
+  	constructor() {
+  		// ...
+  	}
+  }
+  ```
+  ### Default Export
+  하나의 모듈에서 하나의 기본(export default) 값을 내보낼 수 있습니다.
+  ```jsx
+  export default function () {
+  	console.log("Default export function");
+  }
+  ```
+  ### 모듈 가져오기 (Import)
+  모듈을 가져올 때는 `import` 키워드를 사용합니다.
+  ### Named Import
+  ```jsx
+  // main.js
+  import { add, subtract, multiply, Calculator } from "./math.js";
+
+  console.log(add(5, 3)); // 8
+  const calc = new Calculator();
+  calc.sayHello();
+  ```
+  ### Default Import
+  ```jsx
+  // main.js
+  import utils from "./utils.js";
+
+  utils(); // Default export function
+  ```
+  ### 전체 모듈 가져오기
+  모든 내보내기를 하나의 객체로 가져올 수도 있습니다.
+  ```jsx
+  // main.js
+  import * as math from "./math.js";
+
+  console.log(math.add(2, 3)); // 5
+  console.log(math.subtract(5, 2)); // 3
+  ```
+- 프로젝트 아키텍처
+  ## 프로젝트 아키텍처
+  프로젝트 아키텍처는 소프트웨어 시스템의 구성 요소와 이들 간의 상호작용을 설계하는 청사진입니다. 이는 시스템이 어떻게 구성되고, 각 구성 요소가 어떤 역할을 하며, 어떻게 상호 작용하는지를 정의합니다. 좋은 아키텍처는 시스템의 확장성, 유지보수, 성능, 보안성 등을 향상시키며, 복잡한 요구 사항을 체계적으로 관리할 수 있게 해줍니다.
+  - 프로젝트 아키텍처가 중요한 이유
+    프로젝트 아키텍처는 단순한 코드 구조를 넘어, 전체 시스템의 품질과 성공에 직접적인 영향을 미칩니다. 다음은 프로젝트 아키텍처가 중요한 이유들입니다.
+    ### 1. 유지보수성 향상
+    잘 설계된 아키텍처는 코드의 가독성과 이해도를 높여 버그 수정이나 기능 추가 시 효율성을 극대화합니다. 모듈화된 구조는 특정 부분에 집중할 수 있게 해주어 전체 시스템에 미치는 영향을 최소화합니다.
+    ### 2. 확장성 보장
+    시스템이 성장함에 따라, 새로운 기능을 추가하거나 트래픽 증가에 대응할 수 있어야 합니다. 유연한 아키텍처는 이러한 확장 요구 사항을 수용할 수 있는 기반을 제공합니다.
+    ### 3. 성능 최적화
+    아키텍처 설계는 시스템의 성능에 직접적인 영향을 미칩니다. 효율적인 데이터 흐름과 자원 관리는 시스템의 응답 속도와 처리량을 향상시킵니다.
+    ### 4. 재사용성 증대
+    일관된 아키텍처 패턴은 코드의 재사용성을 높여 개발 시간을 단축하고 중복을 줄일 수 있습니다. 공통 기능을 모듈화하여 여러 프로젝트에서 재사용할 수 있습니다.
+    ### 5. 팀 협업 지원
+    명확한 아키텍처는 팀원 간의 역할과 책임을 분명히 하여 협업을 원활하게 합니다. 공통의 구조와 규칙은 코드의 일관성을 유지하게 도와줍니다.
+  - Service-Oriented Architecture(Service Layer Pattern)
+    서비스 지향 아키텍처(SOA)는 기능을 독립적인 서비스 단위로 분리하여, 이러한 서비스들이 네트워크를 통해 상호작용하는 아키텍처 스타일입니다. 서비스 레이어 패턴은 이러한 SOA를 구현하기 위한 구조적 접근 방식 중 하나로, 비즈니스 로직을 분리된 서비스 계층에 배치하여 조직화합니다.
+    ### 주요 특징
+    1. **모듈화**: 각 서비스는 독립적으로 배포, 업데이트, 확장할 수 있습니다.
+    2. **재사용성**: 공통 기능을 서비스로 분리하여 다른 애플리케이션에서 재사용할 수 있습니다.
+    3. **유연성**: 서비스 간의 의존성이 낮아 변경이 용이합니다.
+    4. **확장성**: 특정 서비스에 대한 트래픽 증가 시 해당 서비스만 확장할 수 있습니다.
+    ### 구현 방법
+    서비스 레이어 패턴을 구현하기 위해 애플리케이션을 다음과 같은 계층으로 나눌 수 있습니다.
+    - **프리젠테이션 레이어 (Presentation Layer)**: 사용자 인터페이스와 상호작용
+    - **서비스 레이어 (Service Layer)**: 비즈니스 로직을 처리
+    - **데이터 액세스 레이어 (Data Access Layer)**: 데이터베이스와의 통신을 담당
+  - MVC 패턴
+    MVC 패턴은 사용자 인터페이스를 구축할 때 널리 사용되는 아키텍처 패턴으로, 애플리케이션을 세 가지 주요 컴포넌트로 분리하여 구조화합니다. 이를 통해 각 컴포넌트가 독립적으로 개발되고 유지보수될 수 있습니다.
+    ### 주요 구성 요소
+    1. **모델 (Model)**: 애플리케이션의 데이터 및 비즈니스 로직을 관리합니다.
+    2. **뷰 (View)**: 사용자 인터페이스 요소를 담당하며, 모델의 데이터를 시각적으로 표시합니다.
+    3. **컨트롤러 (Controller)**: 사용자 입력을 처리하고, 모델과 뷰 간의 상호작용을 관리합니다.
+    ### 작동 원리
+    - **사용자 입력**이 컨트롤러로 전달됩니다.
+    - **컨트롤러**는 입력을 처리하고, 필요한 경우 모델을 업데이트 또는 조회합니다.
+    - **모델**이 변경되면, 모델의 상태 변화에 따라 뷰가 업데이트됩니다.
+    - **뷰**는 모델의 데이터를 사용자에게 표시합니다.
+  - 그 외 다른 프로젝트 구조
+    ### 1. 계층형 아키텍처 (Layered Architecture)
+    각 기능을 독립된 계층으로 분리하여, 각 계층이 특정 역할을 담당합니다. 일반적으로 프리젠테이션, 비즈니스 로직, 데이터 액세스 등으로 나뉩니다.
+    - **장점**: 구조가 명확하고 이해하기 쉬움.
+    - **단점**: 계층 간의 의존성으로 인한 유연성 부족.
+    ### 2. 마이크로서비스 아키텍처 (Microservices Architecture)
+    애플리케이션을 독립적인 서비스들로 분리하여, 각 서비스가 특정 도메인 또는 기능을 담당합니다. 서비스 간 통신은 API 또는 메시지 버스를 통해 이루어집니다.
+    - **장점**: 독립적인 배포와 확장, 장애 격리.
+    - **단점**: 복잡한 서비스 간 통신 관리, 데이터 일관성 유지 어려움.
+    ### 3. 이벤트 중심 아키텍처 (Event-Driven Architecture)
+    시스템이 이벤트를 기반으로 동작하며, 이벤트 생산자와 소비자가 비동기적으로 통신합니다. 실시간 데이터 처리에 적합합니다.
+    - **장점**: 높은 유연성, 확장성, 실시간 처리 가능.
+    - **단점**: 디버깅과 모니터링의 어려움, 이벤트 관리 복잡성.
+- 비즈니스 로직
+  애플리케이션의 핵심 기능을 구현하는 코드로, 사용자 요구사항을 충족시키기 위한 비즈니스 규칙과 프로세스를 처리합니다. 이는 데이터의 처리, 계산, 검증, 트랜잭션 관리 등 비즈니스 관련 작업을 담당하며, 프리젠테이션 계층(예: 사용자 인터페이스)과 데이터 액세스 계층 사이에서 중개자의 역할을 합니다.
+  비즈니스 로직은 일반적으로 **서비스 레이어(Service Layer)** 또는 **비즈니스 계층(Business Layer)**에 구현됩니다. 이는 애플리케이션의 다양한 구성 요소 간의 의존성을 줄이고, 비즈니스 규칙을 중앙 집중화하여 관리할 수 있게 합니다.
+  ### 장점
+  - **모듈화**: 비즈니스 규칙이 독립적으로 관리되어 코드의 모듈화가 촉진됩니다.
+  - **유지보수 용이**: 비즈니스 로직의 변경이 필요할 때 서비스 계층만 수정하면 되므로 유지보수가 용이합니다.
+  - **테스트 가능성**: 비즈니스 로직이 분리되어 있어 단위 테스트가 용이합니다.
+  ### 단점
+  - **초기 설계 복잡성**: 비즈니스 로직을 명확하게 분리하고 설계하는 데 시간이 걸릴 수 있습니다.
+  - **과도한 추상화**: 지나치게 추상화할 경우 코드가 복잡해지고 이해하기 어려워질 수 있습니다.
+- DTO
+  **DTO(Data Transfer Object)**는 계층 간 데이터 교환을 위해 사용되는 객체로, 주로 데이터 전송을 단순화하고 최적화하기 위해 사용됩니다. DTO는 데이터의 표현을 목적으로 하며, 비즈니스 로직을 포함하지 않습니다. 이는 주로 컨트롤러와 서비스, 데이터베이스 사이에서 데이터를 주고받을 때 활용됩니다.
+  ### 장점
+  - **명확한 데이터 구조**: 데이터 전송 방식을 명확하게 정의하여 코드의 가독성을 높입니다.
+  - **보안 강화**: 필요한 데이터만 전달하여 보안을 강화할 수 있습니다.
+  - **계층 간 독립성 유지**: 각 계층이 DTO를 통해 통신함으로써 결합도를 낮춥니다.
+  - **유연성 향상**: 데이터 형식이나 구조가 변경되더라도 DTO를 수정하여 유연하게 대응할 수 있습니다.
+  ### 단점
+  - **추가적인 코드 작성**: DTO를 정의하고 변환하는 과정에서 추가적인 코드 작성이 필요합니다.
+  - **복잡성 증가**: 많은 DTO가 존재할 경우 관리가 복잡해질 수 있습니다.

keyword/chapter05/keyword.md

@@ -0,0 +1,124 @@
+- 환경 변수
+  - 정의
+    - 프로세스가 컴퓨터에서 동작하는 방식에 영향을 미치는, **동적인 값들의 모임**
+    - 운영체제가 참조하는 동적인 값들의 집합
+  - 종류
+    - **사용자 변수**
+      - 로그인한 사용자에게만 적용
+      - 다른 사용자와 독립적으로 설정/관리
+      - 시스템 변수보다 **우선 적용**
+    - **시스템 변수**
+      - 시스템을 사용하는 모든 사용자에게 적용
+      - 공통으로 사용되는 설정값들 포함
+    - **PATH 변수**
+      - 실행 파일을 찾는 기본 경로 지정
+      - 사용자/시스템 변수 모두에 존재
+      - 특이사항: 시스템 PATH가 사용자 PATH보다 우선 적용
+  - 활용 사례
+    - 개발 환경별 설정 분리
+      - 개발(Development)
+      - 테스트(Test)
+      - 운영(Production)
+    - 민감 정보 관리
+      - DB 접속 정보
+      - API 키
+      - 비밀번호
+- CORS
+  - 정의
+    - 다른 출처(도메인, 프로토콜, 포트)의 리소스를 공유하기 위한 **HTTP 헤더 기반 메커니즘**
+    - 웹 브라우저에서 보안상의 이유로 적용하는 정책
+  - 작동 방식
+    - **1단계**: 브라우저가 요청 헤더에 Origin 포함
+    - **2단계**: 서버가 Access-Control-Allow-Origin 응답
+    - **3단계**: 브라우저가 정책 위반 여부 검사
+  - 주요 헤더
+    ```
+    Origin: <https://frontend.com>
+    Access-Control-Allow-Origin: <https://api.backend.com>
+    Access-Control-Allow-Methods: GET, POST, PUT, DELETE
+    Access-Control-Allow-Headers: Content-Type
+    ```
+  - 해결 방법
+    1. 서버 설정
+       - 허용할 출처 명시
+       - 와일드카드(\*) 사용 가능 (보안상 좋지 않음)
+    2. 프록시 서버 활용
+       - 동일 출처에서 요청하는 것처럼 우회
+    3. 개발 환경 설정
+       - webpack dev server 설정
+       - package.json proxy 설정
+- DB Connection, DB Connection Pool
+  - 정의: **데이터베이스와 애플리케이션 간의 연결 세션**
+    - 특징
+      - 연결 생성은 비용이 큰 작업
+      - 동시 연결 수 제한 존재
+  - **Connection Pool**
+    - 정의: **미리 생성해둔 Connection들을 관리하는 공간**
+    - 장점
+      - 연결 생성/종료 오버헤드 감소
+      - 리소스 재사용으로 성능 향상
+      - 동시 접속자 관리 용이
+    - 설정 요소
+      ```
+      # 예시 설정
+      maximumPoolSize=10
+      minimumIdle=5
+      maxLifetime=1800000
+      connectionTimeout=30000
+      ```
+- 비동기 (async, await)
+  - 정의
+    - **비동기 작업을 동기식 코드처럼 작성**할 수 있게 해주는 문법
+    - Promise를 기반으로 동작
+  - 주요 특징
+    - **async 함수**
+      - 항상 Promise를 반환
+      - await 키워드 사용 가능
+    - **await 키워드**
+      - Promise 완료까지 대기
+      - 비동기 작업의 결과값 반환
+  - 예시 코드
+    ```jsx
+    async function fetchData() {
+    	try {
+    		const response = await fetch("api/data");
+    		const data = await response.json();
+    		return data;
+    	} catch (error) {
+    		console.error("데이터 조회 실패:", error);
+    	}
+    }
+    ```
+- try/catch/finally
+  - 정의
+    - **예외 처리를 위한 구문**
+    - 프로그램의 안정성과 신뢰성 보장
+  - 구조
+    - **try 블록**
+      - 예외 발생 가능성이 있는 코드
+      - 정상적인 흐름 처리
+    - **catch 블록**
+      - 예외 발생 시 처리할 코드
+      - 에러 로깅, 대체 로직 실행
+    - **finally 블록**
+      - 예외 발생 여부와 관계없이 실행
+      - 리소스 정리 등에 사용
+  - 실제 예시
+    ```java
+    try {
+        connection = dataSource.getConnection();
+        // DB 작업 수행
+    } catch (SQLException e) {
+        logger.error("DB 연결 실패", e);
+        throw new DatabaseException("데이터베이스 오류 발생");
+    } finally {
+        if (connection != null) {
+            connection.close();  // 리소스 정리
+        }
+    }
+    ```
+  - 모범 사례
+    - 구체적인 예외 처리
+    - 적절한 로깅
+    - 리소스 해제 보장
+    - 예외 전환 및 래핑