Skip to content

Commit

Permalink
Update README.md
Browse files Browse the repository at this point in the history
  • Loading branch information
@Doosies
Doosies authored Mar 17, 2024
1 parent ad37478 commit d174079
Showing 1 changed file with 54 additions and 174 deletions.
228 changes: 54 additions & 174 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@
- [[BE] 야 너두 무중단 배포 할 수 있어 🫵](#be-야-너두-무중단-배포-할-수-있어-🫵)
- [[BE] SWAG하게 Swagger 사용하는 법 🤟 (Feat. Swagger 데코레이터를 위한 패키지 만들기)](#be-swag하게-swagger-사용하는-법--feat-swagger-데코레이터를-위한-패키지-만들기)
- [FE](#fe)
- [[FE] 인터랙티브 웹: 카드 애니메이션](#fe-인터랙티브-웹--카드-애니메이션)
- [[FE] 인터랙티브 웹: 카드 애니메이션](#fe-인터랙티브-웹-카드-애니메이션)
- [[FE] 🐻 Context API, Provider 지옥 그리고 귀여운 곰돌이 🐻](#fe--context-api-provider-지옥-그리고-귀여운-곰돌이-)
- [[FE] 🚀 복잡함을 단순하게, 더 나은 경험으로 🚀](#fe--복잡함을-단순하게-더-나은-경험으로-)
- [FE / BE](#fe--be)
Expand All @@ -74,24 +74,54 @@
- [🔮🥛 타로 밀크티 소개](#-타로-밀크티-소개)





## 🚀 핵심기능
### 친절한 AI가 고민상담을 들어줘요
### AI와의 채팅을 통해 타로점을 볼 수 있어요.
> 사용자가 AI에게 자신의 고민을 자유롭게 이야기하면, 고민 내용을 바탕으로 타로 상담을 진행합니다.
> 고민 상담 후 사용자가 타로 카드를 뽑으면, AI가 해당 결과를 설명합니다.
> 사용자는 타로점 결과를 링크나 카카오톡으로 공유할 수 있습니다.
![Mar-17-2024 19-31-06](https://github.com/boostcampwm2023/web09-MagicConch/assets/43428643/431b4bb2-0637-48a7-a6b6-ce4ee7e4ff5a)

### 화려한 애니메이션으로 카드를 뽑을 수 있어요
https://github.com/boostcampwm2023/web09-MagicConch/assets/43428643/4d0f49fc-ed00-4083-8855-983b178779ea

### 카드를 뽑은 후에는 결과를 들어볼 수 있어요
![2](https://github.com/boostcampwm2023/web09-MagicConch/assets/43428643/13e7072a-3850-4b21-839e-506529008cb1)

### 타로리더(사람)와 화상채팅으로 상담을 할 수 있어요

### 화상채팅뿐 아니라 메세지를 보낼수도 있어요
### 실제 타로 전문가에게 화상 타로 상담을 받을 수 있어요.
> 타로 전문가와 직접 대면으로 만나지 않고 온라인 상에서 편하게 상담을 받을 수 있습니다.
> 전문가는 상담을 위한 채팅방을 생성하여 사용자를 초대합니다.
> 사용자는 해당 채팅방에 접속하여 타로 상담을 받을 수 있습니다.
(사진 추가)

## 기술적 도전
### 멀티 어플리케이션 구축

- 도커 컴포즈로 멀티 어플리케이션 환경을 구성하여 여러 개의 서비스를 한 번에 실행하고 관리합니다.
- nginx를 활용하여 URL에 따라 서로 다른 서비스를 프록시합니다.

### 블루/그린 무중단 배포

- 블루/그린 무중단 배포를 통해 신규 버전의 배포 과정에서 발생하는 다운타임을 최소화합니다.
- 도커의 캐싱 옵션을 활용하여 빌드 시간을 최적화합니다. 이전 빌드 캐시를 재사용하여 빌드 시간을 단축합니다.
- graceful shutdown으로 파일 입출력과 데이터베이스 커넥션 작업을 안전하게 종료합니다.
- health check로 새로운 어플리케이션이 정상적으로 실행되고 정상적인 응답을 제공할 수 있는지 확인한 후에 트래픽을 전환하여 서비스 중단을 방지합니다.
- 배포를 수행하는 쉘 스크립트를 에러 핸들링하여 시스템 안정성을 확보합니다. 배포 과정에서 오류가 발생하면 즉시 중단되어 기존 시스템에 영향을 미치지 않습니다.

### 클로바 API를 이용한 AI 채팅

- 클로바 API로부터 응답을 받아올 때, 기존의 요청-응답 방식 대신 스트림 형태로 받아옵니다. 이를 통해 사용자가 처음 응답을 받기까지 걸리는 시간을 최소화 합니다.
- 스트림을 토큰 단위로 클라이언트에게 전달하여 AI와 실시간으로 채팅하는 듯한 사용자 경험을 제공합니다.

### WebRTC를 이용한 P2P 통신

- WebRTC API를 활용하여 서버에 부담을 주지 않고 실시간 P2P 커뮤니케이션을 지원합니다.
- 데이터 채널을 통해 이미지, 메세지 등 다양한 종류의 파일을 주고 받습니다.

### 인터렉티브한 애니메이션

- 카드가 펼쳐지고 회전하는 등의 생생한 애니메이션으로 실제로 타로를 보는 듯한 현장감을 제공합니다.

<br/>

## 우당탕탕 이슈 해결기 💦
> 타로 밀크티의 기술적 도전과 이슈 해결 기록
Expand Down Expand Up @@ -185,173 +215,23 @@ https://github.com/boostcampwm2023/web09-MagicConch/assets/43428643/4d0f49fc-ed0
</td>
</tr>
</table>
<p>
🔗 <a href="https://github.com/boostcampwm2023/web09-MagicConch/wiki/%EA%B8%B0%EC%88%A0-%EC%8A%A4%ED%83%9D#-%EA%B8%B0%EC%88%A0-%EC%84%A0%ED%83%9D-%EC%9D%B4%EC%9C%A0">기술 선택 이유</a>
</p>
<br>


## 💬 기술 선택 이유

### 공통

<table>
<th>기술</th>
<th>선택 이유</th>
<tr>
<td align="center"><b>socket.io</b></td>
<td>
<ul>
<li>웹소켓을 이용할 수 없는 환경에서 폴링 방식 등 다른 방식으로 연결을 시도함</li>
<li>연결이 끊어진 경우, 일정 기간 딜레이 후 재연결을 시도함</li>
<li>객체를 전송할 수 있고, 여러 개의 파라미터를 전송할 수 있음</li>
</ul>
</td>
</tr>
<tr>
<td align="center"><b>Jest</b></td>
<td>
<ul>
<li>테스트를 병렬로 실행하기 때문에 테스트 실행 속도가 빠름</li>
<li>자동 목업과 spyOn을 제공하여 의존성을 쉽게 테스트할 수 있음</li>
<li>실패한 테스트를 먼저 실행하여 빠른 피드백을 제공함</li>
<li>다양한 기능을 내장하고 있기 때문에 별도의 라이브러리를 추가로 설치할 필요가 없음</li>
<li>NestJS에서 기본 테스트 프레임워크로 Jest를 지원하기 때문에 별도의 설정이 필요하지 않음</li>
</ul>
</td>
</tr>
</table>


### FE

<table>
<th>기술</th>
<th>선택 이유</th>
<tr>
<td align="center"><b>React</b></td>
<td>
<ul>
<li>Next.js를 도입하면 제한된 기한 내에 마무리를 할 수 없을 것이라 판단하여 React를 사용하기로 결정함</li>
</ul>
</td>
</tr>
<tr>
<td align="center"><b>Vite</b></td>
<td>
<ul>
<li>빌드 속도가 빠름</li>
<li>Webpack과 비교해서 설정파일을 많이 만지지 않아도 괜찮음</li>
</ul>
</td>
</tr>
<tr>
<td align="center"><b>Zustand</b></td>
<td>
<ul>
<li>ContextAPI로 전역 상태를 관리하다가 한계를 느끼고 도입함</li>
<li>Redux나 Recoil에 비해 러닝커브가 낮음</li>
<li>🔗<a href='https://github.com/boostcampwm2023/web09-MagicConch/wiki/%F0%9F%90%BB-Context-API%EC%99%80-Provider-%EC%A7%80%EC%98%A5%EA%B3%BC-%EA%B7%80%EC%97%AC%EC%9A%B4-%EA%B3%B0%EB%8F%8C%EC%9D%B4-%F0%9F%90%BB'>Zustand 도입과정(+ 다른 전역 상태 관리 라이브러리와의 비교)</a></li>
</ul>
</td>
</tr>
<tr>
<td align="center"><b>WebRTC</b></td>
<td>
<ul>
<li>P2P 커뮤니케이션을 지원하여 서버에 오버로드가 발생하지 않음</li>
<li>별도의 플러그인이나 서드 파티 어플리케이션이 필요하지 않음</li>
</ul>
</td>
</tr>
<tr>
<td align="center"><b>TailwindCss</b></td>
<td>
<ul>
<li>스타일과 로직의 관심사 분리가 안된다는 단점이 존재하지만, 빠른 개발을 위해 도입함</li>
</ul>
</td>
</tr>
<tr>
<td align="center"><b>Cloudflare</b></td>
<td>
<ul>
<li>무료로 사용할 수 있음</li>
<li>빠르게 배포할 수 있고, SSL 인증서도 자동으로 연결해줌</li>
</ul>
</td>
</tr>
</table>


### BE

<table>
<th>기술</th>
<th>선택 이유</th>
<tr>
<td align="center"><b>NestJS</b></td>
<td>
<ul>
<li>NestJS의 CLI를 사용하면 프로젝트, 모듈, 컨트롤러 생성 등의 작업을 간편하게 수행할 수 있음</li>
<li>기본적으로 express 위에서 동작하기 때문에 express의 모든 기능을 그대로 사용할 수 있음</li>
</ul>
</td>
</tr>
<tr>
<td align="center"><b>TypeORM</b></td>
<td>
<ul>
<li>(ORM) 모델 클래스와 테이블을 매핑할 수 있기 때문에 유지보수가 용이함</li>
<li>(ORM) 개발자가 직접 SQL 쿼리를 작성하지 않기 때문에 SQL 인젝션을 예방할 수 있음</li>
</ul>
</td>
</tr>
<tr>
<td align="center"><b>Nginx</b></td>
<td>
<ul>
<li>자체적으로 SSL/TLS를 지원하기 때문에 별도의 모듈을 설치할 필요없이 간단하게 HTTPS를 설정할 수 있음</li>
<li>무료로 SSL 인증서를 발급하는 Let's Encrypt 서비스와의 통합을 지원함</li>
<li>경로 기반 라우팅을 지원하기 때문에 단일 서버에서 여러 어플리케이션을 호스팅 할 수 있음</li>
</ul>
</td>
</tr>
<tr>
<td align="center"><b>Docker</b></td>
<td>
<ul>
<li>컨테이너라는 독립된 공간을 사용하기 때문에 내부에서 일어나는 일이 호스트 서버에 영향을 미치지 않음</li>
<li>프로그램에 필요한 환경을 이미지로 빌드하기 때문에 더 이상 코드 변경사항을 pull 받아오지 않아도 되고, 어디서든 일관된 동작으로 프로그램을 수행할 수 있음</li>
</ul>
</td>
</tr>
<tr>
<td align="center"><b>GitHub Actions</b></td>
<td>
<ul>
<li>Jenkins는 상대적으로 러닝 커브가 높아 프로젝트 마감에 영향을 미칠 것으로 판단했고, 주기적인 스케줄링의 필요도 느끼지 못함</li>
<li>GitHub Actions는 레포지토리와 통합되어 있기 때문에 소스코드와 CI/CD를 한 곳에서 관리할 수 있음</li>
</ul>
</td>
</tr>
<tr>
<td align="center"><b>winston</b></td>
<td>
<ul>
<li>다양한 로깅 레벨을 지원하기 때문에 각 레벨에 따라 로그 메시지와 형식을 서로 다르게 지정할 수 있음</li>
<li>winston-daily-rotate-file을 이용하면 날짜별로 로그를 작성할 수 있고, 일정 기간 후 삭제하여 디스크 공간 낭비를 방지할 수 있음</li>
</ul>
</td>
</tr>
<tr>
<td align="center"><b>Supertest</b></td>
<td>
<ul>
<li>다양한 HTTP 메서드를 제공하여 간편하게 HTTP 요청을 생성할 수 있기 때문에 API 테스가 용이함</li>
<li>체이닝을 통해 여러 동작을 한 번에 수행할 수 있음</li>
</ul>
</td>
</tr>
</table>

## 기술스택 세부사항
| Category | Tech Stack | Description | 기술 블로그 링크 |
|----------|------------|-------------|-----------------|
| 인프라 | VPC, Server | 가상 네트워크 환경으로 보안상 안전한 환경에서 서버 운영하기 | [NCP 인프라 구축하기](https://season-broccoli-784.notion.site/NCP-e10722589ba444a7a179494e372fac5d?pvs=74) |
| DB | MySQL, Redis, TypeORM | - 인덱스를 활용하여 조회 성능 높이기<br>- 트랜잭션으로 연관된 작업을 하나의 작업으로 묶어줘 일관성 보장하기<br>- 적절한 자료형을 사용하여 디스크 공간 최적화하기 | [데이터베이스 최적화하기](https://season-broccoli-784.notion.site/274585c019584ad293f9133c1f70b523) |
| CI/CD | Docker, Nginx, Shell Script, GitHub Actions | - Docker Compose를 활용하여 일관된 방식으로 멀티 어플리케이션 실행하기<br>- Nginx를 이용하여 URL 정보에 따라 적절한 서비스 프록시하기<br>- GitHub Actions와 Shell Script로 자동화된 배포 프로세스 구축하기<br>- 블루/그린 무중단 배포 전략으로 서비스의 중단없이 업데이트하기 | [GitHub Actions로 CI/CD 자동화하기](https://season-broccoli-784.notion.site/GitHub-Actions-CI-CD-6c607b37cea24e5db0b20a39e30df154)<br>[블루/그린 무중단 배포 구현하기](https://season-broccoli-784.notion.site/882ef31d564449668a343acfc58d1c1f)<br>[graceful shutdown으로 사용자 경험 저하 방지하기](https://season-broccoli-784.notion.site/graceful-shutdown-917bb34932994cad884cfac86f0e67f4)<br>[health check로 서버 상태 확인하기](https://season-broccoli-784.notion.site/health-check-f6bbb34f71834781ba1312690731a4fd) |
| 테스트 | Jest, supertest, Vitest | 단위 테스트와 e2e 테스트를 진행하여 코드가 예상대로 동작하는지 확인하기 | [Jest와 Supertest로 코드 동작 테스트하기](https://season-broccoli-784.notion.site/Jest-Supertest-d4291e1dbdd84f36956c5eb4c65fcf82) |
| 로깅 | Winston | 로그를 체계적으로 기록하여 개발 및 유지보수성 향상하기 | [winston과 sentry로 서버가 터지는 이유 분석하기](https://www.notion.so/winston-sentry-slack-webhook-0a3f3d6ec066430ca49090e23eccdafb?pvs=4) |
| 상태 관리 | Zustand | - 용량이 작은 상태 관리 라이브러리를 사용하여 청크 용량 최소화하기<br>- Context API보다 더 효과적으로 리렌더링을 줄이면서 상태 관리하기 | [ContextAPI에서 Zustand로 변경한 이유](https://github.com/boostcampwm2023/web09-MagicConch/wiki/%F0%9F%90%BB-Context-API%EC%99%80-Provider-%EC%A7%80%EC%98%A5%EA%B3%BC-%EA%B7%80%EC%97%AC%EC%9A%B4-%EA%B3%B0%EB%8F%8C%EC%9D%B4-%F0%9F%90%BB) |
| P2P 통신 | WebRTC, socket.io | - WebRTC를 이용하여 서버의 부하 없이 실시간 P2P 커뮤니케이션 구현하기<br>- 데이터 채널을 활용하여 이미지, 메시지 등 다양한 종류의 데이터 주고받기<br>- 공통 소켓 이벤트를 정의하여 오용을 방지하고 시스템 확장성 보장하기 | - |

## 🔮🥛 타로 밀크티 소개
> 타로 밀크티는 **FE 3명 & BE 1명** 으로 구성되어 있어요!!
>
Expand Down

0 comments on commit d174079

Please sign in to comment.