Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[11,12주차/지나] 워크북 제출합니다. #85

Open
wants to merge 3 commits into
base: jina/main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
120 changes: 120 additions & 0 deletions keyword/chapter11/keyword.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,120 @@
# CI/CD (Continuous Integration/Continuous Deployment)

**정의**

- **CI/CD**는 소프트웨어 개발 파이프라인을 자동화하여 개발, 테스트, 배포 과정을 효율적으로 수행하도록 돕는 방법론.

### **Continuous Integration (CI)**:

개발자들이 작성한 코드를 중앙 저장소에 자주 병합하여, 자동으로 빌드 및 테스트를 실행합니다.

- **목표**: 코드 변경 사항의 품질을 빠르게 검증.
- **장점**:
- 코드 충돌 조기 발견.
- 품질 유지.
- 개발 속도 향상.

### **Continuous Deployment (CD)**:

테스트를 통과한 코드를 자동으로 프로덕션 환경에 배포합니다.

- **목표**: 사용자에게 신속하게 업데이트 제공.
- **장점**:
- 신속한 배포.
- 사람의 개입 최소화.
- 더 나은 피드백 루프 형성.

### **Pipeline 예시**:

1. 코드 푸시(Git Push).
2. CI 도구가 빌드, 테스트 실행.
3. 테스트 성공 시 CD 도구가 프로덕션 배포.

# GitHub Actions

**정의**

- GitHub에서 제공하는 **CI/CD 자동화 도구**로, GitHub 저장소에서 **워크플로(Workflow)**를 설정해 이벤트 기반 작업을 실행합니다.

### **특징**:

- **이벤트 기반**: 코드 푸시, PR 생성, Issue 열기 등의 이벤트를 트리거로 사용.
- **YAML 파일로 설정**: `.github/workflows/` 디렉토리에 YAML 파일로 작업 정의.
- **확장성**: 다양한 커뮤니티 액션(Action)을 재사용 가능.
- **통합성**: GitHub 환경과 완벽하게 통합.

### **예시 워크플로**:

```yaml
name: CI Pipeline

on:
push:
branches:
- main

jobs:
build:
runs-on: ubuntu-latest

steps:
- name: Checkout Code
uses: actions/checkout@v3

- name: Install Dependencies
run: npm install

- name: Run Tests
run: npm test
```

# Reverse Proxy (리버스 프록시)

**정의**

- **Reverse Proxy**는 클라이언트 요청을 백엔드 서버로 전달하고, 백엔드 서버의 응답을 클라이언트로 다시 전달하는 **중간 서버**.

### **주요 역할**:

1. **로드 밸런싱**: 다수의 백엔드 서버로 요청을 분산하여 성능 향상.
2. **캐싱**: 정적 콘텐츠를 캐싱해 요청 속도 증가.
3. **보안 강화**: 실제 백엔드 서버의 IP 주소를 숨기고 방화벽 역할 수행.
4. **SSL 종료**: HTTPS 요청을 처리하고 백엔드와 HTTP로 통신.

### **대표적인 Reverse Proxy 소프트웨어**:

- **NGINX**: 고성능 웹 서버 및 리버스 프록시.
- **Apache**: 오래된 전통의 리버스 프록시.
- **HAProxy**: 로드 밸런싱에 특화된 도구.
- **Traefik**: 클라우드 네이티브 환경에 적합.

# HTTPS

**정의**

- **HTTPS**는 HTTP에 **SSL/TLS** 암호화 계층을 추가하여 데이터의 기밀성과 무결성을 보장하는 프로토콜입니다.

### **HTTPS의 특징**:

1. **암호화**: 클라이언트와 서버 간의 데이터를 암호화해 도청 방지.
2. **인증**: 서버의 신원을 인증(SSL 인증서 사용)하여 신뢰성 제공.
3. **데이터 무결성**: 데이터가 전송 중에 변경되지 않도록 보호.

### **HTTPS 작동 방식**:

1. 클라이언트가 서버에 HTTPS 요청을 보냄.
2. 서버가 SSL 인증서를 클라이언트에 전달.
3. 클라이언트는 인증서를 검증 후 대칭 키를 생성하고 서버와 공유.
4. 암호화된 통신이 시작됨.

### **SSL 인증서 종류**:

- **DV (Domain Validation)**: 도메인 소유권만 인증.
- **OV (Organization Validation)**: 조직 정보와 도메인 소유권 인증.
- **EV (Extended Validation)**: 가장 높은 수준의 인증.

### **HTTPS의 장점**:

- 사용자 데이터 보호.
- SEO 개선(검색 엔진은 HTTPS를 선호).
- 사용자 신뢰도 증가(브라우저는 HTTPS를 권장).
57 changes: 57 additions & 0 deletions keyword/chapter12/keyword.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
# TypeScript

**정의**

- TypeScript는 JavaScript의 상위 집합으로, Microsoft가 개발한 프로그래밍 언어
- JavaScript 코드에 **정적 타입 시스템과** **객체 지향 프로그래밍의 기능**을 추가하여 코드를 더 안전하고 유지보수하기 쉽게 만들어 현업에서 많이 사용되는 언어

**특징**

- 정적 타입 검사: 컴파일 단계에서 타입 오류를 확인할 수 있습니다.
- JavaScript 호환성: TypeScript 코드는 JavaScript로 트랜스파일되며, 기존 JavaScript 코드와 함께 사용할 수 있습니다.
- 강력한 개발 도구 지원: IDE에서 코드 자동 완성, 리팩토링, 오류 탐지가 가능합니다.

# 강타입과 약타입

**타입 시스템**은 프로그래밍 언어에서 변수나 표현식에 허용되는 값의 종류를 정의하는 방식

### 강타입(Strong Typing)

- **타입 간의 변환이 엄격하게 제한**됩니다.
- 잘못된 타입 간의 연산은 컴파일 또는 실행 단계에서 오류를 발생시킵니다.
- 예: Java, TypeScript
```tsx
let a: number = 5;
a = "hello"; // 오류 발생
```

### 약타입(Weak Typing)

- 타입 변환이 유연하게 이루어지며, 암묵적 형 변환이 자주 발생합니다.
- 잘못된 타입 간의 연산이 실행될 수 있지만, 예기치 않은 동작이 발생할 가능성이 있습니다.
- 예: JavaScript
```jsx
let a = 5;
a = "hello"; // 허용됨
console.log(5 + "5"); // "55"
```

# 번들러 (Bundler)

**정의**

- 여러 개의 자바스크립트 파일, CSS 파일, 이미지 등을 하나의 파일 또는 몇 개의 파일로 결합(bundle)하는 도구입니다. 웹 애플리케이션 개발에서 중요한 역할을 합니다.

**주요 번들러 예시**:

- **Webpack**: 가장 널리 사용되는 번들러로, 강력한 플러그인과 설정 가능성을 제공합니다.
- **Rollup**: 모듈 크기가 작고, 성능이 중요한 라이브러리 제작에 유리합니다.
- **Parcel**: 설정이 거의 필요 없고, 빠른 번들링 속도를 제공합니다.
- **Vite**: 최신 기술로 빠른 개발 환경을 제공합니다.

**번들러의 장점**:

- 여러 파일을 하나로 묶어 **네트워크 요청을 줄임**.
- 최신 JavaScript 코드를 브라우저 호환성을 위해 **트랜스파일**.
- 코드 **압축(uglification)** 및 최적화를 통해 파일 크기를 줄임.
- CSS, 이미지 등 다양한 리소스를 모듈처럼 처리.
Binary file added mission/chapter11/images/success.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
34 changes: 34 additions & 0 deletions mission/chapter11/mission.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
## 문제 상황

**상황**

- git action 도중에 과부화가 오는 부분이 있어 램 메모리가 부족하여 서버가 다운되는 현상이 발생함.
- Not connect port 22 에러가 남. => SSH

**해결 방법**

- EC2 인스턴스를 삭제.
- EC2 인스턴스 재생성 및 탄력적 IP 재연결
- EC2 인스턴스 연결 기능을 mysql 등등 설정 후, **스왑 메모리 생성**
- https://diary-developer.tistory.com/32
- 스왑 메모리 생성 후, 테스트 코드 : free
- SSH 시도 후 서버 성공.
- workflow에 딜레이 시간 설정 (해당 위치에 알아서.)

```yml
StartLimitIntervalSec=60
StartLimitBurst=5
RestartSec=10
```

- git action 후 성공

**주의 사항**

- 키 페어에 기록이 남는 현상이 발생하여 서버 에러가 날 것.
- ssh 폴더에 kwown_hosts에 이전 키 기록이 남아있기 때문.
- 해당 기록들 모두 삭제 후 재시작

## 성공 기록

<img alt="성공" src="./images/success.png">
Binary file added mission/chapter12/images/컴파일 시 성공.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.