diff --git a/keyword/chapter04/keyword/keyword.md b/keyword/chapter04/keyword/keyword.md new file mode 100644 index 0000000..f5e2f3c --- /dev/null +++ b/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가 존재할 경우 관리가 복잡해질 수 있습니다. diff --git a/keyword/chapter05/keyword.md b/keyword/chapter05/keyword.md new file mode 100644 index 0000000..6217ef4 --- /dev/null +++ b/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: + Access-Control-Allow-Origin: + 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(); // 리소스 정리 + } + } + ``` + - 모범 사례 + - 구체적인 예외 처리 + - 적절한 로깅 + - 리소스 해제 보장 + - 예외 전환 및 래핑 diff --git a/keyword/chapter06/keyword.md b/keyword/chapter06/keyword.md new file mode 100644 index 0000000..c432d86 --- /dev/null +++ b/keyword/chapter06/keyword.md @@ -0,0 +1,138 @@ +- ORM + - 정의 + - 객체 지향 프로그래밍의 **객체**와 관계형 데이터베이스의 **테이블**을 자동으로 매핑해주는 기술 + - 프로그래밍 언어의 객체와 데이터베이스의 관계를 연결해주는 다리 역할 + - 등장 배경 + - 객체 지향적 설계와 관계형 데이터베이스 간의 **패러다임 불일치** 해결 필요성 + - SQL 쿼리 작성의 반복적인 작업 감소 및 생산성 향상 요구 + - 데이터베이스 벤더(MySQL, Oracle 등) 종속성 해결 필요 + - 주요 특징 + - **객체-테이블 매핑** + - 클래스는 테이블과 매핑 + - 객체의 필드는 테이블의 컬럼과 매핑 + - 기본키(Primary Key)와 외래키(Foreign Key) 관계도 객체 간의 참조로 매핑 + - **영속성(Persistence) 관리** + - 데이터의 상태 변화를 자동으로 감지하고 데이터베이스에 반영 + - 캐싱을 통한 성능 최적화 지원 + - **트랜잭션 관리** + - 데이터베이스 작업의 원자성(Atomicity) 보장 + - 일관성 있는 데이터 처리 지원 +- Prisma 문서 살펴보기 + - 정의 + - Node.js와 TypeScript를 위한 **차세대 ORM**으로, 직관적인 데이터 모델링과 타입 안전성을 제공하는 데이터베이스 툴킷 + - **선언적 스키마 정의**와 자동 생성되는 타입-세이프 클라이언트가 특징 + - 주요 구성 요소 + - **Prisma Schema** + - 데이터 모델을 정의하는 선언적 파일 + - 데이터베이스 연결 설정과 모델 정의를 단일 파일에서 관리 + - **Prisma Client** + - 자동 생성되는 타입-세이프 데이터베이스 클라이언트 + - intellisense와 자동완성 지원으로 개발 생산성 향상 + - **Prisma Migrate** + - 데이터베이스 스키마 버전 관리 도구 + - 스키마 변경 이력을 마이그레이션 파일로 관리 + - CRUD 작업 특징 + - **Create** + - 단일 레코드 생성은 `create` 메서드로 직관적 수행 + - 다중 레코드 생성은 `createMany`로 벌크 작업 지원 + - **Read** + - `findUnique`로 단일 레코드 조회 + - `findMany`로 필터링, 정렬, 페이지네이션 지원 + - 관계 데이터는 `include`나 `select`로 세밀한 제어 + - **Update** + - `update`로 단일 레코드 수정 + - `updateMany`로 조건에 맞는 다수 레코드 일괄 수정 + - 트랜잭션 내에서 원자적 업데이트 보장 + - **Delete** + - `delete`로 단일 레코드 삭제 + - `deleteMany`로 조건부 대량 삭제 수행 + - 참조 무결성 자동 처리 + - ex. Prisma의 Connection Pool 관리 방법 + Connection Pool 관리 + - **정의** + - 데이터베이스 연결을 효율적으로 재사용하기 위한 관리 시스템 + - **주요 설정** + - `connection_limit`: 최대 동시 연결 수 설정 + - `pool_timeout`: 연결 대기 시간 제한 + - `idle_timeout`: 유휴 연결 유지 시간 + - **최적화 전략** + - 애플리케이션 규모에 따른 적절한 풀 사이즈 설정 + - 부하 테스트를 통한 최적 값 도출 + - 모니터링을 통한 연결 상태 관리 + - ex. Prisma의 Migration 관리 방법 + Migration 관리 + - **작동 방식** + - 스키마 변경 사항을 감지하여 마이그레이션 파일 자동 생성 + - 변경 이력을 SQL 파일로 버전 관리 + - **주요 명령어 개념** + - `migrate dev`: 개발 환경에서 마이그레이션 생성 및 적용 + - `migrate deploy`: 프로덕션 환경에서 보류 중인 마이그레이션 적용 + - `migrate reset`: 데이터베이스 초기화 및 모든 마이그레이션 재적용 + - **모범 사례** + - 마이그레이션 파일의 버전 관리 시스템 통합 + - 롤백 계획 수립 + - 데이터 손실 방지를 위한 백업 전략 수립 +- ORM(Prisma)을 사용하여 좋은 점과 나쁜 점 + ORM(Prisma) 사용의 장단점 + - 장점 + - **타입 안전성** + - TypeScript와의 완벽한 통합으로 컴파일 타임에 오류 감지 + - 자동 완성과 인텔리센스 지원으로 개발 생산성 향상 + - **직관적인 API** + - SQL 작성 없이 메서드 체이닝으로 쿼리 작성 가능 + - 복잡한 관계 데이터도 단순한 문법으로 처리 + ```tsx + typescript; + Copy; + // 예: user와 관련된 posts를 조회 + const userWithPosts = await prisma.user.findUnique({ + include: { posts: true }, + }); + ``` + - **스키마 관리 용이** + - 단일 스키마 파일로 데이터베이스 구조 파악 용이 + - 마이그레이션 자동화로 버전 관리 편리 + - 단점 + - **성능 오버헤드** + - 복잡한 쿼리의 경우 자동 생성된 SQL이 비효율적일 수 있음 + - 특히 대량의 데이터 처리 시 Raw SQL보다 느릴 수 있음 + - **학습 곡선** + - Prisma만의 독특한 스키마 문법 학습 필요 + - 관계 설정과 마이그레이션 관리에 대한 이해 필요 + - **제한된 유연성** + - 특정 데이터베이스 기능 사용에 제약이 있을 수 있음 + - 커스텀 SQL 실행 시 별도의 처리 필요 +- 다양한 ORM 라이브러리 살펴보기 + - ex. Sequelize + - 정의 + - Node.js 생태계에서 가장 오래되고 안정적인 ORM + - **Promise 기반**의 비동기 작업 처리 특화 + - 주요 특징 + - **다양한 데이터베이스 지원** + - MySQL, PostgreSQL, SQLite, Microsoft SQL Server 등 + - 데이터베이스 전환이 용이 + - **모델 정의 방식** + - JavaScript 클래스 기반의 모델 정의 + - 데코레이터 없이 순수 JS/TS 객체로 정의 가능 + - **쿼리 인터페이스** + - 체이닝 방식의 직관적인 쿼리 빌더 + - Raw SQL 쿼리 지원으로 유연성 제공 + - ex. TypeORM + - 정의 + - TypeScript로 작성된 **객체 지향적 ORM** + - 데코레이터 패턴을 활용한 선언적 모델 정의 + - 주요 특징 + - **강력한 타입 지원** + - TypeScript와의 완벽한 통합 + - 컴파일 타임 타입 체크 + - **Entity 관계 설정** + - JPA 스타일의 데코레이터 기반 관계 매핑 + - 양방향 관계 설정 용이 + - **마이그레이션 시스템** + - 자동 마이그레이션 생성 + - CLI 도구를 통한 마이그레이션 관리 +- 페이지네이션을 사용햐는 다른 API 찾아보기 + - 커서 기반 페이지네이션 + - 오프셋 기반 페이지네이션 + - ex. https://docs.github.com/en/rest/using-the-rest-api/using-pagination-in-the-rest-api?apiVersion=2022-11-28 + - ex. https://developers.notion.com/reference/intro#pagination diff --git a/keyword/chapter07/keyword.md b/keyword/chapter07/keyword.md new file mode 100644 index 0000000..c3ce7d5 --- /dev/null +++ b/keyword/chapter07/keyword.md @@ -0,0 +1,33 @@ +- 미들웨어 + + 미들웨어란 운영체제와 응용 프로그램 사이에서 작동하는 소프트웨어 계층으로, 서로 다른 애플리케이션, 데이터, 사용자들을 연결하고 데이터를 관리하는 역할 + + **주요 특징** + + - 투명성: 사용자와 애플리케이션은 미들웨어의 내부 동작을 알 필요 없음. 시스템의 복잡성을 숨기고 단순한 인터페이스 제공 + - 확장성: 시스템 규모가 커져도 성능 저하 없이 처리 가능 + - 시스템 통합: 서로 다른 플랫폼, 언어, 프로토콜 간의 통신 지원 + +- HTTP 상태 코드 + 1xx (정보 응답) + - 100 Continue: 지금까지의 진행 상태가 양호하며 클라이언트가 계속 요청하거나 이미 요청을 완료한 경우에는 무시해도 되는 것을 알려줌 + - 101 Switching Protocols: 클라이언트가 보낸 Upgrade 요청 헤더에 따라 서버가 프로토콜을 변경할 것임을 알려줌 + 2xx (성공) + - 200 OK: 요청이 성공적으로 처리됨 + - 201 Created: 요청이 성공적이었으며 그 결과로 새로운 리소스가 생성됨 + - 204 No Content: 요청이 성공적으로 처리되었지만 제공할 컨텐츠가 없음 + 3xx (리다이렉션) + - 301 Moved Permanently: 요청한 리소스의 URI가 영구적으로 변경됨 + - 302 Found: 요청한 리소스의 URI가 일시적으로 변경됨 + - 304 Not Modified: 클라이언트의 캐시된 리소스가 최신 상태임 + 4xx (클라이언트 오류) + - 400 Bad Request: 잘못된 문법으로 인하여 서버가 요청을 이해할 수 없음 + - 401 Unauthorized: 인증이 필요한 리소스에 대한 인증 정보가 없음 + - 403 Forbidden: 접근이 금지됨 + - 404 Not Found: 요청한 리소스를 찾을 수 없음 + - 405 Method Not Allowed: 허용되지 않은 HTTP 메서드 + 5xx (서버 오류) + - 500 Internal Server Error: 서버 내부 오류 + - 502 Bad Gateway: 게이트웨이나 프록시 작업 시 잘못된 응답을 수신 + - 503 Service Unavailable: 서버가 일시적으로 서비스를 제공할 수 없음 + - 504 Gateway Timeout: 게이트웨이 또는 프록시 서버에서 타임아웃 발생 diff --git a/keyword/chapter08/keyword.md b/keyword/chapter08/keyword.md new file mode 100644 index 0000000..468fcd4 --- /dev/null +++ b/keyword/chapter08/keyword.md @@ -0,0 +1,99 @@ +- Swagger + - 정의 + - **REST API를 설계, 빌드, 문서화 및 사용**하는 데 도움이 되는 OpenSource 도구들의 모음 + - 개발자가 REST 웹 서비스를 문서화, 설계, 테스트할 수 있게 도와주는 프레임워크 + - 주요 기능 + - **API 명세 작성** : YAML 또는 JSON 형식으로 API 정의 + - **시각화된 문서** : 작성된 명세를 웹 UI로 시각화 + - **API 테스트** : 문서 상에서 직접 API 호출 테스트 가능 + - **코드 생성** : 서버 스텁과 클라이언트 SDK 자동 생성 + - 구성 요소 + - **Swagger Editor** : API 문서 편집기 + - **Swagger UI** : API 문서 뷰어 + - **Swagger Codegen** : 서버/클라이언트 코드 생성기 + - 사용 예시 + ```java + @ApiOperation(value = "사용자 정보 조회") + @GetMapping("/users/{id}") + public UserResponse getUser( + @ApiParam(value = "사용자 ID") @PathVariable Long id + ) { + return userService.getUser(id); + } + ``` +- OpnAPI + - 정의 + - REST API를 **표준화된 방식으로 기술**하기 위한 명세 + - Swagger Specification이 **2016년에 OpenAPI Initiative로 이관**되며 이름 변경 + - 특징 + - **벤더 중립적** : 특정 회사나 기술에 종속되지 않음 + - **확장 가능** : 사용자 정의 확장 지원 + - **언어 독립적** : 모든 프로그래밍 언어에서 사용 가능 + - 구조 + - **Info** : API 메타데이터 + - **Paths** : API 엔드포인트와 동작 정의 + - **Components** : 재사용 가능한 API 컴포넌트 + - **Security** : 인증/인가 방식 정의 +- OpenAPI 버전 별 특징 및 주요 차이점 + - **2.0 (Swagger)** + - JSON과 YAML 형식 지원 + - 단순한 구조로 시작하기 쉬움 + - 제한된 재사용성과 모듈화 + ```yaml + swagger: "2.0" + info: + title: "사용자 API" + version: "1.0.0" + ``` + - **3.0** + - 향상된 재사용성과 모듈화 + - 컴포넌트 개념 도입 + - 링크 기능으로 HATEOAS 지원 + ```yaml + openapi: "3.0.0" + info: + title: "사용자 API" + version: "1.0.0" + ``` + - **3.1** + - JSON Schema 2020-12 지원 + - 웹훅 지원 강화 + - 확장된 보안 스키마 +- OpenAPI Component + - 정의 + - API 명세에서 **재사용 가능한 부분을 정의**하는 섹션 + - DRY(Don't Repeat Yourself) 원칙 실현 + - 주요 구성요소 + - **schemas** : 데이터 모델 정의 + ```yaml + components: + schemas: + User: + type: object + properties: + id: + type: integer + name: + type: string + ``` + - **parameters** : API 매개변수 정의 + - **requestBodies** : 요청 본문 정의 + - **responses** : 응답 정의 + - **securitySchemes** : 보안 방식 정의 + - 사용 이점 + - **코드 중복 감소** + - **일관성 유지** + - **유지보수성 향상** + - 실제 적용 + ```yaml + paths: + /users: + get: + responses: + "200": + description: "성공" + content: + application/json: + schema: + $ref: "#/components/schemas/User" + ``` diff --git a/keyword/chapter09/keyword.md b/keyword/chapter09/keyword.md new file mode 100644 index 0000000..cd799b8 --- /dev/null +++ b/keyword/chapter09/keyword.md @@ -0,0 +1,100 @@ +- OAuth 2.0 + + - 정의 + - **인증을 위한 개방형 표준 프로토콜** + - 제3의 서비스에게 **사용자의 인증/인가 권한을 위임**하는 방식 + - 주요 용어 + - **Resource Owner** : 사용자 (실제 계정의 주인) + - **Client** : 애플리케이션 (OAuth를 사용해 인증하려는 서비스) + - **Resource Server** : 자원 서버 (사용자의 보호된 자원을 가진 서버) + - **Authorization Server** : 인증 서버 (토큰 발행/검증) + - 인증 흐름 + + 1. **권한 부여 요청** (Authorization Request) + + ``` + GET /oauth/authorize? + client_id=CLIENT_ID& + response_type=code& + redirect_uri=REDIRECT_URI& + scope=read + ``` + + 2. **권한 부여 승인** (Authorization Grant) + - Authorization Code + - Implicit Grant + - Resource Owner Password Credentials + - Client Credentials + 3. **액세스 토큰 요청** (Access Token Request) + 4. **액세스 토큰 발급** (Access Token Response) + + ```json + { + "access_token": "ISSUED_ACCESS_TOKEN", + "token_type": "Bearer", + "expires_in": 3600, + "refresh_token": "ISSUED_REFRESH_TOKEN" + } + ``` + + - 토큰 종류 + - **Access Token** : 실제 인증에 사용되는 토큰 + - **Refresh Token** : Access Token 갱신용 토큰 + - **ID Token** : 사용자 인증 정보를 포함한 JWT (OpenID Connect) + +- HTTP Cookie + - 정의 + - 웹사이트가 사용자의 브라우저에 저장하는 **작은 텍스트 파일** + - **상태 유지**를 위한 데이터 저장소 역할 + - 특징 + - **이름=값** 형태로 구성 + - **도메인, 경로, 만료일** 등의 속성 보유 + - 최대 **4KB**까지 저장 가능 + - 주요 속성 + - **Domain** : 쿠키가 전송될 도메인 지정 + - **Path** : 쿠키가 전송될 경로 지정 + - **Expires/Max-Age** : 쿠키 만료 시간 + - **Secure** : HTTPS 연결에서만 전송 + - **HttpOnly** : JavaScript에서 접근 불가 + - **SameSite** : CSRF 공격 방지 + - 종류 + - **Session Cookie** + - 브라우저 종료시 삭제 + - 만료 시간 미지정 + - **Persistent Cookie** + - 지정된 만료 시간까지 유지 + - 사용자 설정 저장 등에 활용 + ``` + Set-Cookie: user=john; + Domain=example.com; + Path=/; + Expires=Wed, 21 Oct 2024 07:28:00 GMT; + Secure; + HttpOnly + ``` + - 보안 고려사항 + - **XSS 공격** 방지 + - HttpOnly 플래그 사용 + - 민감 정보 저장 제한 + - **CSRF 공격** 방지 + - SameSite 속성 활용 + - CSRF 토큰 사용 + - **암호화** + - 중요 정보는 암호화하여 저장 + - HTTPS 사용 강제 + - 활용 사례 + - **로그인 상태 유지** + ```jsx + // 서버 응답 헤더 + Set-Cookie: sessionId=abc123; HttpOnly; Secure + ``` + - **사용자 선호도 저장** + ```jsx + // 클라이언트에서 쿠키 설정 + document.cookie = "theme=dark; expires=Fri, 31 Dec 2024 23:59:59 GMT"; + ``` + - **장바구니 기능** + ```jsx + // 장바구니 아이템 저장 + Set-Cookie: cart=item1,item2,item3; Path=/shop + ``` diff --git "a/mission/chapter05/Screenshot 2024-11-08 at 12.17.47\342\200\257AM.png" "b/mission/chapter05/Screenshot 2024-11-08 at 12.17.47\342\200\257AM.png" new file mode 100644 index 0000000..f488c48 Binary files /dev/null and "b/mission/chapter05/Screenshot 2024-11-08 at 12.17.47\342\200\257AM.png" differ diff --git "a/mission/chapter05/Screenshot 2024-11-08 at 12.29.55\342\200\257AM.png" "b/mission/chapter05/Screenshot 2024-11-08 at 12.29.55\342\200\257AM.png" new file mode 100644 index 0000000..9ac105b Binary files /dev/null and "b/mission/chapter05/Screenshot 2024-11-08 at 12.29.55\342\200\257AM.png" differ diff --git "a/mission/chapter05/Screenshot 2024-11-08 at 12.34.34\342\200\257AM.png" "b/mission/chapter05/Screenshot 2024-11-08 at 12.34.34\342\200\257AM.png" new file mode 100644 index 0000000..c4fab42 Binary files /dev/null and "b/mission/chapter05/Screenshot 2024-11-08 at 12.34.34\342\200\257AM.png" differ diff --git a/mission/chapter05/github_link.md b/mission/chapter05/github_link.md new file mode 100644 index 0000000..6812f2a --- /dev/null +++ b/mission/chapter05/github_link.md @@ -0,0 +1 @@ +https://github.com/NekoGroove01/UMC-NodeJS-Repo/tree/feature/mission05 diff --git a/mission/chapter06/github_link.md b/mission/chapter06/github_link.md new file mode 100644 index 0000000..fe69718 --- /dev/null +++ b/mission/chapter06/github_link.md @@ -0,0 +1 @@ +https://github.com/NekoGroove01/UMC-NodeJS-Repo/tree/feature/mission06 diff --git "a/mission/chapter07/Screenshot 2024-11-16 at 7.50.19\342\200\257PM.png" "b/mission/chapter07/Screenshot 2024-11-16 at 7.50.19\342\200\257PM.png" new file mode 100644 index 0000000..1ae1b40 Binary files /dev/null and "b/mission/chapter07/Screenshot 2024-11-16 at 7.50.19\342\200\257PM.png" differ diff --git "a/mission/chapter07/Screenshot 2024-11-16 at 7.50.33\342\200\257PM.png" "b/mission/chapter07/Screenshot 2024-11-16 at 7.50.33\342\200\257PM.png" new file mode 100644 index 0000000..63158fb Binary files /dev/null and "b/mission/chapter07/Screenshot 2024-11-16 at 7.50.33\342\200\257PM.png" differ diff --git a/mission/chapter07/Unti222tled.png b/mission/chapter07/Unti222tled.png new file mode 100644 index 0000000..f1fc355 Binary files /dev/null and b/mission/chapter07/Unti222tled.png differ diff --git a/mission/chapter07/Untitled.png b/mission/chapter07/Untitled.png new file mode 100644 index 0000000..a54ee7a Binary files /dev/null and b/mission/chapter07/Untitled.png differ diff --git a/mission/chapter07/code.png b/mission/chapter07/code.png new file mode 100644 index 0000000..1d4fc77 Binary files /dev/null and b/mission/chapter07/code.png differ diff --git a/mission/chapter07/github_link.md b/mission/chapter07/github_link.md new file mode 100644 index 0000000..b746b8c --- /dev/null +++ b/mission/chapter07/github_link.md @@ -0,0 +1 @@ +https://github.com/NekoGroove01/UMC-NodeJS-Repo/tree/feature/mission07 \ No newline at end of file diff --git a/mission/chapter08/SCR-20241119-ptqp.png b/mission/chapter08/SCR-20241119-ptqp.png new file mode 100644 index 0000000..f00cef8 Binary files /dev/null and b/mission/chapter08/SCR-20241119-ptqp.png differ diff --git a/mission/chapter08/Swagger UI.jpeg b/mission/chapter08/Swagger UI.jpeg new file mode 100644 index 0000000..1f8fb9c Binary files /dev/null and b/mission/chapter08/Swagger UI.jpeg differ diff --git a/mission/chapter08/github_link.md b/mission/chapter08/github_link.md new file mode 100644 index 0000000..9011b10 --- /dev/null +++ b/mission/chapter08/github_link.md @@ -0,0 +1 @@ +https://github.com/NekoGroove01/UMC-NodeJS-Repo/tree/feature/mission08 diff --git a/mission/chapter09/github_link.md b/mission/chapter09/github_link.md new file mode 100644 index 0000000..24eacdc --- /dev/null +++ b/mission/chapter09/github_link.md @@ -0,0 +1 @@ +https://github.com/NekoGroove01/UMC-NodeJS-Repo/tree/feature/mission09