Merge pull request #55 from codie0226/main

[4,5,6주차/코디] 워크북 제출합니다.

keyword/chapter04/keyword.md

@@ -0,0 +1,143 @@
+- ES
+    - ECMAScript - Ecma International에 의해 ECMA-262라는 기술 규격에 의해 정의 된 범용 스크립트 언어
+    - 스크립트 언어가 준수해야 하는 규칙, 세부 사항 및 지침을 제공함
+    - JavaScript가 바로 ECMAScript를 준수하는 스크립트 언어임
+- ES6
+    - ES6의 주요 변화 및 특징
+        - ES5 버전을 기반으로 된 웹 페이지가 동작 가능하도록 하위 호환성을 지원함
+        - 다양한 함수들의 추가
+        1. let & const : 변수 선언용 let과 상수 선언용 const 추가
+        2. 화살표 함수 : 함수 정의용 화살표 함수 추가
+
+            ```jsx
+            let func1 = (var1, var2) => {
+            	return var1 + var2;
+            };
+            ```
+
+        3. 클래스 키워드 추가 : 객체를 구현할 때 function 대신 class 사용. 이때 클래스 자신도 함수이고 생성자를 가지고 함수를 생성한다.
+
+            ```jsx
+            class Fruit {
+              constructor(name) {
+                this.name = name;
+                this.type = "apple";
+              }
+
+              getName() {
+                return this.name;
+              }
+            }
+            ```
+
+        4. 템플릿 문자열 추가 : 따옴표(’)를 상용한다. 문자열 내부에 ${}의 형태로 변수를 넣을 수 있다.
+
+            ```jsx
+            let a = 10;
+            let b = 20;
+            let str = `${a} 더하기 ${b}은 ${a + b} 이다`;
+            ```
+
+        5. 디스럭처링 : Object 객체를 개별 변수에 할당 가능.
+
+            ```jsx
+            const obj = {
+               name: "name"
+               job: "Software Engineer"
+            }
+            let {name, job} = obj;
+            console.log(name, job); // "name","Software Engineer"
+            ```
+
+        6. 함수 인자 기능 : 가변 인자 표현 가능한 …키워드 추가
+
+            ```jsx
+            const fruit1 = [10, 20];
+            const fruit2 = [30, 40];
+            const result = [0, ...fruit1, ...fruit2, 50];
+
+            console.log(result); // [0,10,20,30,40,50]
+            console.log(result.length); // 6
+            ```
+
+        7. Iterator & for-of : iterator 형태로 자료형 순환 가능
+
+            ```jsx
+            let fruit = [10, 20, 30, 40, 50];
+
+            for (let value of fruit) {
+              console.log(value);
+            }
+
+            // 출력 결과
+            10;
+            20;
+            30;
+            40;
+            50;
+            ```
+
+        8. Map & Set : Map과 Set 자료구조 사용 가능. Map은 key와 value로 이루어진 자료형이고, Set는 중복 없는 key-value 구조이다.
+    - ES6를 중요시 하는 이유
+        - 다양한 기능들의 추가로 가독성, 유지 보수 효율 증가
+        - 기존의 ES5 기반 웹페이지 하위 호환성
+        - 모듈 기능의 추가로 프로그램을 모듈 단위로 분리하여 구조화할 수 있음
+- ES Module
+    - ES6에 도입된 모듈 시스템
+    - import, export를 사용해 분리된 자바스크립트 파일끼리 서로 접근 가능
+    - 기존에는 각각의 스크립트 파일을 전역 스코프처럼 사용하고, html 파일에서 상위에 있는 스크립트 파일은 전역 스코프처럼 하위의 스크립트 태그에서 접근, 변경이 가능했음
+    - 근데 이러면 파일 순서가 뒤틀리면 에러가 발생하고 여러모로 유지보수가 힘듦
+    - 모듈화를 통해 함수와 변수를 모듈 스코프에 넣고 함수는 함수 스코프를 가짐
+    - export로 해당 변수, 함수를 다른 모듈에서 import를 통해 의존할 수 있도록 할 수 있음
+    - NodeJS는 CommonJS를 통해 모듈화를 해옴
+- 프로젝트 아키텍처
+    - 프로젝트 아키텍처가 중요한 이유
+        - 프로젝트 아키텍처는 개발을 할 때의 패턴을 프로젝트의 멤버들이 모두 이해하고 따를 수 있게하는 구조, 설계 계획임
+        - 이게 없으면 규모가 커지는 순간 코드의 정리가 어려워지고 새로운 기능 추가, 소스 코드 수정이 힘들어짐
+    - Service-Oriented Architecture(Service Layer Pattern)
+        - 서비스 인터페이스를 통해 소프트웨어 구성 요소의 재사용과 상호 운용성을 가능하게 하는 방법을 정의함
+        - 각 서비스는 완벽한 개별적 비즈니스 기능을 구현함
+        - 비즈니스 로직의 분리를 목적으로 하며 다른 계층과는 상관없이 특정 계층만 수정할 수 있으므로 확장과 유지보수가 편리함
+    - MVC 패턴
+        - Model, View, Controller의 약자 - 하나의 애플리케이션, 프로젝트를 구성할 때 그 구성 요소를 세가지의 역할로 구분한 패턴
+        - 모델 - 애플리케이션의 정보, 데이터를 나타냄. 처음 정의되는 상수, 초기화값, 변수 등을 의미함. 또한 이런 데이터를 가공하는 컴포넌트를 의미함.
+            - 3가지 규칙
+                - 사용자가 편집하길 원하는 모든 데이터를 가지고 있어야 함.
+                - 뷰나 컨트롤러에 대해서 어떠한 정보를 가지고 있지 않아야 함. 모델에서 뷰와 컨트롤러를 참조할 수 없음.
+                - 변경이 일어날 때에 변경 통지에 대한 처리방법을 구현해야 함. 모델의 속성 중 어떠한 값이 변경된다면, 이벤트를 발생시켜 누군가에게 전달하고 이것을 수신하여 처리하는 방법을 구현해야 한다.
+        - 뷰 - input텍스트, 체크박스와 같은 사용자 인터페이스 요소. 데이터와 객체의 입력, 화면에 보여주는 출력을 담당함. 사용자들이 볼 수 있는 화면임.
+            - 3가지 규칙
+                - 모델이 가지고 있는 정보를 따로 저장하면 안된다. 모델에서 전달받은 내용을 임의로 저장하면 안되고 명령을 받고 화면에 표시만 하면 된다.
+                - 모델과 컨트롤러에 대해서 정보를 가지고 있지 않아야 함. 이러한 요소를 참조할 수 없음
+                - 모델과 마찬가지로 변경이 일어나면 통지에 대한 처리방법을 구현해야 함.
+        - 컨트롤러 - 사용자 인터페이스 요소와 데이터를 잇는 중간다리 역할. 데이터를 클릭하고 수정하는 것에 대한 이벤트들을 처리하는 부분임. (서버 API 아님?)
+            - 3가지 규칙
+                - 모델이나 뷰에 대한 정보가 있어야 함. 컨트롤러는 모델과 뷰 사이를 컨트롤하기 때문에 둘의 작동에 대해 알고 있어야 함.
+                - 모델이나 뷰의 변경을 모니터링 해야 함. 변경 통지를 받았을 때 이벤트를 처리해야 함. 따라서 애플리케이션의 메인 로직을 담당하게 됨.
+        - 그래서 이게 왜 필요함? - 분업을 통해 하나의 요소의 구현에 집중할 수 있고, 코드의 중복이나 기능의 중복을 피할 수 있음. 협업에서 효율적이고 코드의 유지보수와 유연성이 좋아짐.
+    - 그 외 다른 프로젝트 구조
+        - 크게 도메인형 구조, 계층형 구조로 나누어짐
+        - 도메인형 - 프로젝트를 업무 영역에 따라 분류함. 예를 들어 서비스 개발, UI 디자인, 데이터베이스 설계 등으로 프로젝트 분류 가능. 각 도메인마다 별도의 패키지와 모듈을 개발하며 분업이 이루어짐. 코드가 분리되어서 수정과 확장이 용이하고, 유지보수하기 쉬워짐. 비즈니스 로직에 따라 구성되어서 자연스럽게 비즈니스 로직을 따라가고 개발자의 도메인에 대한 이해도가 높아짐.
+        - 계층형 - 업무의 진행 단계에 따라 분류함. 요구사항 분석, 설계, 개발, 테스트 등의 단계로 나누어짐. 프로젝트의 효율성이 증가하고 각 단계에서 일어날 수 있는 문제를 빠르게 파악할 수 있다. 그러나 각 계층 사이의 의존성이 높으므로 잘못 설계했다간 문제가 커짐. 그래서 명확한 인터페이스 설계와 구현이 필요함.
+- 비즈니스 로직
+    - 컴퓨터 프로그램에서 실세계의 규칙에 따라 데이터를 생성, 표시, 저장, 변경하는 부분이다.
+    - 그니까 현실 세상의 문제를 해결하는 코드임. 유저가 원하는 행위를 컴퓨터에게 전달하기 위해 짜여진 코드 로직임.
+- DTO
+    - Data Transfer Object - 프로세스 간에 데이터를 전달하는 객체를 의미. 데이터 전송용이라 비즈니스 로직같은 복잡한것 없고 전달해야 하는 것만 딱 있음.
+    - 주로 클라이언트와 서버가 데이터를 주고받을 때 사용함.
+    - 데이터 유효성 검사 등을 통해 안정성을 높이고 오류를 줄일 수 있어서 사용함.
+
+- 참고한 블로그, 사이트들
+https://blog.nextinnovation.kr/tech/ecmascript6/
+
+    https://velog.io/@jjunyjjuny/ES-Modules-%EC%A0%95%EB%A6%AC%ED%95%98%EA%B8%B0
+
+    https://www.ibm.com/kr-ko/topics/soa
+
+    https://m.blog.naver.com/jhc9639/220967034588
+
+    https://velog.io/@aorb/%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-%EA%B5%AC%EC%A1%B0
+
+    https://velog.io/@lihyeon/%EC%9A%A9%EC%96%B4-%EB%B9%84%EC%A6%88%EB%8B%88%EC%8A%A4-%EB%A1%9C%EC%A7%81
+
+    https://tristy.tistory.com/54

keyword/chapter05/keyword.md

@@ -0,0 +1,24 @@
+- 환경 변수
+    - Environment Variable - 프로세스가 컴퓨터에서 동작하는 방식에 영향을 미치는 동적인 값들의 모임
+    - 프로세스가 어떠한 작업을 할 때 필요로 하는 정보를 손쉽게 접근/처리할 수 있도록 해주는 것
+    - 윈도우 환경변수 PATH에 디렉토리 추가하고 하는 거 생각하면 좀 이해가 될 듯하다.
+    - node.js 실습환경에서의 환경변수에는 DB에 연결하기 위한 값들이 들어있다. 따라서 환경변수를 바꾸면 곧바로 코드에 변경이 된다. 또 한가지의 역할은 .gitignore에 포함시켜서 git에 올리고 싶지 않은 민감한 DB정보를 따로 보관하고 숨길 수 있다.
+- CORS
+    - Cross Origin Resource Sharing - 서버가 다른 출처로부터의 액서스를 허용하거나 제한할 수 있게 하는 HTTP 헤더 기반의 메커니즘이다. 현재의 페이지 주소와 상이한 URL을 요청하는 프로토콜, 도메인 이름, 포트 또는 체계가 교차 출처 요청이 된다.
+    - 기본적으로 브라우저는 보안 상의 이유로 동일 출처 정책을 구현하며, 교차 출처 HTTP 요청을 제한한다.
+    - cors는 이러한 기본 정책을 완화하고 간단한 교차 출처 접근을 가능하게 함.
+- DB Connection, DB Connection Pool
+    - DB Connection - 데이터베이스 연결. 애플리케이션과 DB 간의 통신을 가능하게 하는 수단임.
+    - DB Connection Pool - 웹 컨테이너가 실행될 때 일정량의 Connection 객체를 미리 만들어서 pool에 저장하고 클라이언트 요청이 오면 Connection 객체를 빌려주고 임무가 완료되면 다시 pool에 반환한다.
+    - DB 접속 객체를 미리 만들어 연결하므로 불필요한 작업(connection 생성과 삭제)이 없어져서 클라이언트가 빠르게 DB에 접속 가능하다.
+    - 필요에 따라 Connection 수를 제한할 수 있어서 서버 과열을 방지할 수 있다.
+    - DB 접속 모듈을 통일해서 DB 서버 환경이 바뀌어도 유지 보수가 가능하게 할 수 있다.
+    - Connection의 크기는 Thread를 고려하여 정해야 한다. Thread Pool 크기가 Connection Pool 크기보다 작으면 남는 Connection은 컴퓨터의 메모리만 차지하게 된다. 크기가 너무 커지면 DB 성능에 악영향을 미친다.
+- 비동기 (async, await)
+    - 비동기-어떤 작업을 실행할 때 그 작업이 완료되지 않더라도 다음 코드를 실행하는 방식을 의미한다. 즉 작업이 완료되지 않았더라도 결과를 기다리지 않고 다음 코드를 실행하는 것. 작업 시간을 줄이고 병렬적인 작업 처리가 가능함.
+    - 자바스크립트는 싱글 스레드 언어라 한번에 하나의 작업만 할 수 있음. 근데 서버에서 그랬다간 수많은 요청을 처리하기 위한 시간이 너무 오래 걸릴 것이다. 그래서 비동기 처리가 필요함.
+    - async 와 await - async는 함수 앞에 붙어서 해당 함수가 비동기 함수임을 나타내고 await 는 비동기 함수의 실행 결과를 기다리는 키워드임. async안에 await 키워드를 사용하면 해당 비동기 작업이 완료될 때까지 코드 실행을 일시 중지하고 결과를 기다린 다음 결과를 반환함.
+- try/catch/finally
+    - 자바스크립트의 예외처리 방식. try 절은 예외가 발생할 수 있는 코드 부분을 정의하고,  catch 절에서 예외가 발생할 경우 호출되는 코드 부분이다. finally 부분은 try 이후 결과에 상관없이 반드시 실행되는 코드 부분이다.
+    - try는 혼자 쓸 수 없고 catch가 오거나 finally가 와야 함.
+    - 실습에서는 DB처리할 때 일어날 수 있는 오류를 try하고 catch로 오류 내용을 출력해낸다. finally문에서는 connection을 반환하여 db와의 연결을 종료하고 있다.

keyword/chapter06/keyword.md

@@ -0,0 +1,65 @@
+- ORM
+    - Object Relational Mapping - 객체로 연결은 해준다 - 어플리케이션과 데이터베이스 연결 시 SQL 언어가 아닌 어플리케이션 개발언어로 데이터베이스를 접근할 수 있게 해주는 툴이다.
+    - SQL 대신 어플리케이션의 개발언어를 그대로 사용할 수 있음. 일관성과 가독성을 올려줌.
+    - Django - ORM cookbook, Node.js - Sequalize, Java - Hibernate, JPA 등이 있음
+- Prisma 문서 살펴보기
+    - 프리즈마 - 오픈소스 ORM. 크게 다음과 같은 기능들이 있음
+        - Prisma Client - Node.js와 TypeScript에서 사용가능한 쿼리빌더
+        - Prisma Migrate - 마이그레이션 시스템
+        - Prisma Studio - 데이터베이스 관리할 수 있는 GUI
+    - Prisma schema - 어플리케이션 모델을 직관적인 데이터 모델 언어로 표현 가능함. 데이터베이스 연결과 클라이언트 생성을 관리할 수 있다.
+    - ex. Prisma의 Connection Pool 관리 방법
+        - 프리즈마 클라이언트가 데이터베이스에 첫 커넥션을 하는 순간 풀이 생성됨. - connect() 함수를 호출하거나 쿼리문을 실행(자동으로 connect()호출)하면 됨.
+        - 풀에는 접속 제한과 제한 시간이 정해져 있음.
+        - connection limit(접속 제한)은 기본값이 (하드웨어의 cpu 개수)*2 + 1이다. 바꾸려면 데이터베이스 접속 URL 파라미터에 데이터를 입력해야 한다.
+
+        ```jsx
+        datasource db {
+          provider = "postgresql"
+          url      = "postgresql://johndoe:mypassword@localhost:5432/mydb?connection_limit=5"
+        }
+        ```
+
+        - time out(제한 시간)은 기본값이 10초이다. 이 시간동안 데이터베이스와 성공적인 통신이 되지 않으면 예외를 발생시킨다. 이것도 파라미커에 값을 넣어서 설정 가능하다.
+        - 아예 0으로 만들면 timeout을 없앨 수도 있다. 큰 데이터값(오래 걸리는 값)을 불러 올 때 사용한다.
+
+        ```jsx
+        datasource db {
+          provider = "postgresql"
+          url      = "postgresql://johndoe:mypassword@localhost:5432/mydb?connection_limit=5&pool_timeout=2"
+        }
+        ```
+
+    - ex. Prisma의 Migration 관리 방법
+        - Migration - 데이터베이스 스키마의 구조를 수정하고 진화시키는 변경 사항 집합. 데이터베이스 스키마를 업데이트하는 데 도움이 됨. 테이블 열 추가 변경, 제약 조건등을 정할 수 있다. Prisma schema를 사용할 때 압도적으로 편리함.
+        - 데이터베이스의 상태를 추적할 수 있는 상태 관리 기능을 제공하고 특정 시점의 데이터베이스 상태를 복제해올 수 있다. 살짝 데이터베이스 버전 깃헙이랑 비슷하다고 보면 될 듯.
+- ORM(Prisma)을 사용하여 좋은 점과 나쁜 점
+    - 장점: 간단한 문법으로 데이터베이스를 관리할 수 있고 복잡한 쿼리문을 쓰지 않기 때문에 코드 가독성이 높아진다.
+    - Migration으로 데이터베이스의 관리를 쉽게할 수 있고 데이터베이스의 상태를 쉽게 알아내고, 원하는 데이터베이스의 상태를 불러오거나 변경할 수 있다.
+    - TypeScript를 지원하여 타입 안정성을 보장함.
+    - 단점: 복잡한 쿼리문의 경우 프리즈마가 만들어내는 쿼리 레이어가 성능 저하를 불러올 수 있다. 데이터베이스 응답 시간이 늦어지며 빠른 연산이 필요한 어플리케이션일수록 이러한 단점이 두드러진다.
+    - 프리즈마 쿼리 함수의 반환 결과값의 데이터 구조가 쓸데없이 복잡하다. 경우에 따라 중첩 객체 형태로 받아오며, 이렇게 되면 따로 해당 데이터를 가공해주는 기능을 구현해야 하고, 유지보수가 더 어려워진다.
+- 다양한 ORM 라이브러리 살펴보기
+    - ex. Sequelize
+        - Promise 기반의 ORM. 비동기 로직을 편리하게 작성 가능하다. 프리즈마와 유사하게 자바스크립트 문법처럼 쿼리를 보낼 수 있다. model을 정의하여 데이터베이스와 객체 간의 매핑을 설정할 수 있다. 데이터 모델링, 연관 관계 설정, 소프트 deletion과 같은 기능을 제공한다.
+    - ex. TypeORM
+        - Active Record 페턴과 Data Mapper 패턴 형식이 있다. Active Record는 모델 그 자체에 쿼리 메소드를 정의하고 모델의 메소드를 사용하여 객체를 저장, 제거, 불러오기를 할 수 있다.
+        - Data Mapper는 분리된 클래스에 쿼리 메소드를 정의하고 Repository를 이용하여 객체에 접근한다. 모델에 접근하지 않고 Repository를 통하여 데이터에 접근한다.
+
+    얘네 다 Migration은 기본으로 탑재되어 있음.
+
+- 페이지네이션을 사용햐는 다른 API 찾아보기
+    - ex. https://docs.github.com/en/rest/using-the-rest-api/using-pagination-in-the-rest-api?apiVersion=2022-11-28
+        - link 헤더 방식
+            - 헤더에 아래와 같은 link 헤더를 추가한다. 이전 페이지, 다음 페이지, 마지막 페이지, 첫 번째 페이지로 갈 수 있는 URL 정보를 담고 있다.
+            - 여기에 per_page와 같은 파라미터를 더 넣어서 페이지당 게시글 수를 정할 수도 있다.
+            - octokit과 같은 라이브러리를 이용하여 페이지네이션을 구현할 수도 있다.
+
+            ```jsx
+            link: <https://api.github.com/repositories/1300192/issues?page=2>; rel="prev", 
+            <https://api.github.com/repositories/1300192/issues?page=4>; rel="next", 
+            <https://api.github.com/repositories/1300192/issues?page=515>; rel="last", 
+            <https://api.github.com/repositories/1300192/issues?page=1>; rel="first"
+            ```
+
+    - ex. https://developers.notion.com/reference/intro#pagination