From 616fed707bcc55eea4d195f22f1b0c21f8750ebb Mon Sep 17 00:00:00 2001 From: Song_Minhyung Date: Sun, 17 Mar 2024 19:42:27 +0900 Subject: [PATCH 01/22] Update README.md --- README.md | 18 +++++++++++++++++- 1 file changed, 17 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 743c0ec1..99001642 100644 --- a/README.md +++ b/README.md @@ -47,7 +47,23 @@
-### 우당탕탕 이슈 해결기 💦 +## 🚀 핵심기능 +### 친절한 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) + +### 타로리더(사람)와 화상채팅으로 상담을 할 수 있어요 + +### 화상채팅뿐 아니라 메세지를 보낼수도 있어요 + + + +## 우당탕탕 이슈 해결기 💦 > 타로 밀크티의 기술적 도전과 이슈 해결 기록 - [[BE] 야 너두 무중단 배포 할 수 있어 🫵](https://github.com/boostcampwm2023/web09-MagicConch/wiki/%EC%95%BC-%EB%84%88%EB%91%90-%EB%AC%B4%EC%A4%91%EB%8B%A8-%EB%B0%B0%ED%8F%AC-%ED%95%A0-%EC%88%98-%EC%9E%88%EC%96%B4-%F0%9F%AB%B5) From b55b5ea111307ef13ea444dc06e88c7ff9ff4fc6 Mon Sep 17 00:00:00 2001 From: Song_Minhyung Date: Sun, 17 Mar 2024 19:52:35 +0900 Subject: [PATCH 02/22] Update README.md --- README.md | 173 +++++++++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 170 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 99001642..0aaa8c72 100644 --- a/README.md +++ b/README.md @@ -66,11 +66,16 @@ https://github.com/boostcampwm2023/web09-MagicConch/assets/43428643/4d0f49fc-ed0 ## 우당탕탕 이슈 해결기 💦 > 타로 밀크티의 기술적 도전과 이슈 해결 기록 +### BE - [[BE] 야 너두 무중단 배포 할 수 있어 🫵](https://github.com/boostcampwm2023/web09-MagicConch/wiki/%EC%95%BC-%EB%84%88%EB%91%90-%EB%AC%B4%EC%A4%91%EB%8B%A8-%EB%B0%B0%ED%8F%AC-%ED%95%A0-%EC%88%98-%EC%9E%88%EC%96%B4-%F0%9F%AB%B5) - [[BE] SWAG하게 Swagger 사용하는 법 🤟 (Feat. Swagger 데코레이터를 위한 패키지 만들기)](https://github.com/boostcampwm2023/web09-MagicConch/wiki/SWAG%ED%95%98%EA%B2%8C-Swagger-%EC%82%AC%EC%9A%A9%ED%95%98%EB%8A%94-%EB%B2%95-%F0%9F%A4%9F-(Feat.-Swagger-%EB%8D%B0%EC%BD%94%EB%A0%88%EC%9D%B4%ED%84%B0%EB%A5%BC-%EC%9C%84%ED%95%9C-%ED%8C%A8%ED%82%A4%EC%A7%80-%EB%A7%8C%EB%93%A4%EA%B8%B0)) + +### FE - [[FE] 인터랙티브 웹: 카드 애니메이션](https://github.com/boostcampwm2023/web09-MagicConch/wiki/%EC%9D%B8%ED%84%B0%EB%9E%99%ED%8B%B0%EB%B8%8C-%EC%9B%B9:-%EC%B9%B4%EB%93%9C-%EC%95%A0%EB%8B%88%EB%A9%94%EC%9D%B4%EC%85%98) - [[FE] 🐻 Context API, Provider 지옥 그리고 귀여운 곰돌이 🐻](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) - [[FE] 🚀 복잡함을 단순하게, 더 나은 경험으로 🚀](https://github.com/boostcampwm2023/web09-MagicConch/wiki/%F0%9F%9A%80-useWebRTC%ED%9B%85-%EB%A6%AC%ED%8C%A9%ED%86%A0%EB%A7%81-%EC%97%AC%EC%A0%95:-%EB%B3%B5%EC%9E%A1%ED%95%A8%EC%9D%84-%EB%8B%A8%EC%88%9C%ED%95%98%EA%B2%8C,-%EB%8D%94-%EB%82%98%EC%9D%80-%EA%B2%BD%ED%97%98%EC%9C%BC%EB%A1%9C-%F0%9F%9A%80) + +### FE / BE - [[FE/BE] UX를 위해 AI 채팅 반응 속도를 84.87%까지 개선한 방법 😎](https://github.com/boostcampwm2023/web09-MagicConch/wiki/UX%EB%A5%BC-%EC%9C%84%ED%95%B4-AI-%EC%B1%84%ED%8C%85-%EB%B0%98%EC%9D%91-%EC%86%8D%EB%8F%84%EB%A5%BC-84.87%25%EA%B9%8C%EC%A7%80-%EA%B0%9C%EC%84%A0%ED%95%9C-%EB%B0%A9%EB%B2%95-%F0%9F%98%8E) - [[FE/BE] 소켓 아이고 😇 (Feat. socket.io는 파싱을 해)](https://github.com/boostcampwm2023/web09-MagicConch/wiki/%EC%86%8C%EC%BC%93-%EC%95%84%EC%9D%B4%EA%B3%A0-%F0%9F%98%87-(Feat.-socket.io%EB%8A%94-%ED%8C%8C%EC%8B%B1%EC%9D%84-%ED%95%B4))
@@ -150,11 +155,173 @@ https://github.com/boostcampwm2023/web09-MagicConch/assets/43428643/4d0f49fc-ed0 -

- 🔗 기술 선택 이유 -


+ +## 💬 기술 선택 이유 + +### 공통 + + + + + + + + + + + + +
기술선택 이유
socket.io +
    +
  • 웹소켓을 이용할 수 없는 환경에서 폴링 방식 등 다른 방식으로 연결을 시도함
    • +
  • 연결이 끊어진 경우, 일정 기간 딜레이 후 재연결을 시도함
    • +
  • 객체를 전송할 수 있고, 여러 개의 파라미터를 전송할 수 있음
    • +
+
Jest +
    +
  • 테스트를 병렬로 실행하기 때문에 테스트 실행 속도가 빠름
    • +
  • 자동 목업과 spyOn을 제공하여 의존성을 쉽게 테스트할 수 있음
    • +
  • 실패한 테스트를 먼저 실행하여 빠른 피드백을 제공함
    • +
  • 다양한 기능을 내장하고 있기 때문에 별도의 라이브러리를 추가로 설치할 필요가 없음
    • +
  • NestJS에서 기본 테스트 프레임워크로 Jest를 지원하기 때문에 별도의 설정이 필요하지 않음
    • +
+
+ + +### FE + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
기술선택 이유
React +
    +
  • Next.js를 도입하면 제한된 기한 내에 마무리를 할 수 없을 것이라 판단하여 React를 사용하기로 결정함
    • +
+
Vite +
    +
  • 빌드 속도가 빠름
    • +
  • Webpack과 비교해서 설정파일을 많이 만지지 않아도 괜찮음
    • +
+
Zustand + +
WebRTC +
    +
  • P2P 커뮤니케이션을 지원하여 서버에 오버로드가 발생하지 않음
    • +
  • 별도의 플러그인이나 서드 파티 어플리케이션이 필요하지 않음
    • +
+
TailwindCss +
    +
  • 스타일과 로직의 관심사 분리가 안된다는 단점이 존재하지만, 빠른 개발을 위해 도입함
    • +
+
Cloudflare +
    +
  • 무료로 사용할 수 있음
    • +
  • 빠르게 배포할 수 있고, SSL 인증서도 자동으로 연결해줌
    • +
+
+ + +### BE + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
기술선택 이유
NestJS +
    +
  • NestJS의 CLI를 사용하면 프로젝트, 모듈, 컨트롤러 생성 등의 작업을 간편하게 수행할 수 있음
    • +
  • 기본적으로 express 위에서 동작하기 때문에 express의 모든 기능을 그대로 사용할 수 있음
    • +
+
TypeORM +
    +
  • (ORM) 모델 클래스와 테이블을 매핑할 수 있기 때문에 유지보수가 용이함
    • +
  • (ORM) 개발자가 직접 SQL 쿼리를 작성하지 않기 때문에 SQL 인젝션을 예방할 수 있음
    • +
+
Nginx +
    +
  • 자체적으로 SSL/TLS를 지원하기 때문에 별도의 모듈을 설치할 필요없이 간단하게 HTTPS를 설정할 수 있음
    • +
  • 무료로 SSL 인증서를 발급하는 Let's Encrypt 서비스와의 통합을 지원함
    • +
  • 경로 기반 라우팅을 지원하기 때문에 단일 서버에서 여러 어플리케이션을 호스팅 할 수 있음
    • +
+
Docker +
    +
  • 컨테이너라는 독립된 공간을 사용하기 때문에 내부에서 일어나는 일이 호스트 서버에 영향을 미치지 않음
    • +
  • 프로그램에 필요한 환경을 이미지로 빌드하기 때문에 더 이상 코드 변경사항을 pull 받아오지 않아도 되고, 어디서든 일관된 동작으로 프로그램을 수행할 수 있음
    • +
+
GitHub Actions +
    +
  • Jenkins는 상대적으로 러닝 커브가 높아 프로젝트 마감에 영향을 미칠 것으로 판단했고, 주기적인 스케줄링의 필요도 느끼지 못함
    • +
  • GitHub Actions는 레포지토리와 통합되어 있기 때문에 소스코드와 CI/CD를 한 곳에서 관리할 수 있음
    • +
+
winston +
    +
  • 다양한 로깅 레벨을 지원하기 때문에 각 레벨에 따라 로그 메시지와 형식을 서로 다르게 지정할 수 있음
    • +
  • winston-daily-rotate-file을 이용하면 날짜별로 로그를 작성할 수 있고, 일정 기간 후 삭제하여 디스크 공간 낭비를 방지할 수 있음
    • +
+
Supertest +
    +
  • 다양한 HTTP 메서드를 제공하여 간편하게 HTTP 요청을 생성할 수 있기 때문에 API 테스가 용이함
    • +
  • 체이닝을 통해 여러 동작을 한 번에 수행할 수 있음
    • +
+
+ ## 🔮🥛 타로 밀크티 소개 > 타로 밀크티는 **FE 3명 & BE 1명** 으로 구성되어 있어요!! > From cd7ee3c9e652ae75922239542b91e9fc8043ab38 Mon Sep 17 00:00:00 2001 From: Song_Minhyung Date: Sun, 17 Mar 2024 20:00:11 +0900 Subject: [PATCH 03/22] Update README.md --- README.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/README.md b/README.md index 0aaa8c72..362fbfc0 100644 --- a/README.md +++ b/README.md @@ -47,6 +47,10 @@
+## 목차 +- [친절한 AI가 고민상담을 들어줘요](#친절한-ai가-고민상담을-들어줘요) + + ## 🚀 핵심기능 ### 친절한 AI가 고민상담을 들어줘요 ![Mar-17-2024 19-31-06](https://github.com/boostcampwm2023/web09-MagicConch/assets/43428643/431b4bb2-0637-48a7-a6b6-ce4ee7e4ff5a) From 984e6566771e816b60d75551df6e225d6bd65228 Mon Sep 17 00:00:00 2001 From: Song_Minhyung Date: Sun, 17 Mar 2024 20:36:23 +0900 Subject: [PATCH 04/22] Update README.md --- README.md | 26 +++++++++++++++++++++++++- 1 file changed, 25 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 362fbfc0..b042a027 100644 --- a/README.md +++ b/README.md @@ -48,7 +48,31 @@
## 목차 -- [친절한 AI가 고민상담을 들어줘요](#친절한-ai가-고민상담을-들어줘요) +- [🚀 핵심기능](#-핵심기능) + - [친절한 AI가 고민상담을 들어줘요](#친절한-ai가-고민상담을-들어줘요) + - [화려한 애니메이션으로 카드를 뽑을 수 있어요](#화려한-애니메이션으로-카드를-뽑을-수-있어요) + - [카드를 뽑은 후에는 결과를 들어볼 수 있어요](#카드를-뽑은-후에는-결과를-들어볼-수-있어요) + - [타로리더(사람)와 화상채팅으로 상담을 할 수 있어요](#타로리더사람와-화상채팅으로-상담을-할-수-있어요) + - [화상채팅뿐 아니라 메세지를 보낼수도 있어요](#화상채팅뿐-아니라-메세지를-보낼수도-있어요) +- [우당탕탕 이슈 해결기 💦](#우당탕탕-이슈-해결기-) + - [BE](#be) + - [[BE] 야 너두 무중단 배포 할 수 있어 🫵](#be-야-너두-무중단-배포-할-수-있어-) + - [[BE] SWAG하게 Swagger 사용하는 법 🤟 (Feat. Swagger 데코레이터를 위한 패키지 만들기)](#be-swag하게-swagger-사용하는-법--feat-swagger-데코레이터를-위한-패키지-만들기) + - [FE](#fe) + - [[FE] 인터랙티브 웹: 카드 애니메이션](#fe-인터랙티브-웹-카드-애니메이션) + - [[FE] 🐻 Context API, Provider 지옥 그리고 귀여운 곰돌이 🐻](#fe--context-api-provider-지옥-그리고-귀여운-곰돌이-) + - [[FE] 🚀 복잡함을 단순하게, 더 나은 경험으로 🚀](#fe--복잡함을-단순하게-더-나은-경험으로-) + - [FE / BE](#fe--be) + - [[FE/BE] UX를 위해 AI 채팅 반응 속도를 84.87%까지 개선한 방법 😎](#febe-ux를-위해-ai-채팅-반응-속도를-8487까지-개선한-방법-) + - [[FE/BE] 소켓 아이고 😇 (Feat. socket.io는 파싱을 해)](#febe-소켓-아이고--feat-socketio는-파싱을-해) +- [시스템 아키텍처](#시스템-아키텍처) +- [기술 스택](#기술-스택) +- [💬 기술 선택 이유](#-기술-선택-이유) + - [공통](#공통) + - [FE](#fe-1) + - [BE](#be-1) +- [🔮🥛 타로 밀크티 소개](#-타로-밀크티-소개) + ## 🚀 핵심기능 From 7c6d7d6f23069dad94107d05936c942da838a7c9 Mon Sep 17 00:00:00 2001 From: Song_Minhyung Date: Sun, 17 Mar 2024 20:42:01 +0900 Subject: [PATCH 05/22] Update README.md --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index b042a027..be22d288 100644 --- a/README.md +++ b/README.md @@ -75,6 +75,7 @@ + ## 🚀 핵심기능 ### 친절한 AI가 고민상담을 들어줘요 ![Mar-17-2024 19-31-06](https://github.com/boostcampwm2023/web09-MagicConch/assets/43428643/431b4bb2-0637-48a7-a6b6-ce4ee7e4ff5a) From bfbeacad0282dfecc9368a737dae547b08d996cf Mon Sep 17 00:00:00 2001 From: Song_Minhyung Date: Sun, 17 Mar 2024 20:42:42 +0900 Subject: [PATCH 06/22] Update README.md --- README.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index be22d288..7a111138 100644 --- a/README.md +++ b/README.md @@ -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) @@ -76,6 +76,7 @@ + ## 🚀 핵심기능 ### 친절한 AI가 고민상담을 들어줘요 ![Mar-17-2024 19-31-06](https://github.com/boostcampwm2023/web09-MagicConch/assets/43428643/431b4bb2-0637-48a7-a6b6-ce4ee7e4ff5a) From ad3747838b09694d9ee03c28e4da19fb0eca07be Mon Sep 17 00:00:00 2001 From: Song_Minhyung Date: Sun, 17 Mar 2024 20:57:40 +0900 Subject: [PATCH 07/22] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 7a111138..8df1946c 100644 --- a/README.md +++ b/README.md @@ -56,7 +56,7 @@ - [화상채팅뿐 아니라 메세지를 보낼수도 있어요](#화상채팅뿐-아니라-메세지를-보낼수도-있어요) - [우당탕탕 이슈 해결기 💦](#우당탕탕-이슈-해결기-) - [BE](#be) - - [[BE] 야 너두 무중단 배포 할 수 있어 🫵](#be-야-너두-무중단-배포-할-수-있어-) + - [[BE] 야 너두 무중단 배포 할 수 있어 🫵](#be-야-너두-무중단-배포-할-수-있어-🫵) - [[BE] SWAG하게 Swagger 사용하는 법 🤟 (Feat. Swagger 데코레이터를 위한 패키지 만들기)](#be-swag하게-swagger-사용하는-법--feat-swagger-데코레이터를-위한-패키지-만들기) - [FE](#fe) - [[FE] 인터랙티브 웹: 카드 애니메이션](#fe-인터랙티브-웹--카드-애니메이션) From d174079a65cb7091e81ab78a0b7b932cb81747e7 Mon Sep 17 00:00:00 2001 From: Song_Minhyung Date: Sun, 17 Mar 2024 21:32:20 +0900 Subject: [PATCH 08/22] Update README.md --- README.md | 228 +++++++++++++----------------------------------------- 1 file changed, 54 insertions(+), 174 deletions(-) diff --git a/README.md b/README.md index 8df1946c..d98b39ba 100644 --- a/README.md +++ b/README.md @@ -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) @@ -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 커뮤니케이션을 지원합니다. +- 데이터 채널을 통해 이미지, 메세지 등 다양한 종류의 파일을 주고 받습니다. +### 인터렉티브한 애니메이션 + +- 카드가 펼쳐지고 회전하는 등의 생생한 애니메이션으로 실제로 타로를 보는 듯한 현장감을 제공합니다. + +
## 우당탕탕 이슈 해결기 💦 > 타로 밀크티의 기술적 도전과 이슈 해결 기록 @@ -185,173 +215,23 @@ https://github.com/boostcampwm2023/web09-MagicConch/assets/43428643/4d0f49fc-ed0 +

+ 🔗 기술 선택 이유 +


- -## 💬 기술 선택 이유 - -### 공통 - - - - - - - - - - - - -
기술선택 이유
socket.io -
    -
  • 웹소켓을 이용할 수 없는 환경에서 폴링 방식 등 다른 방식으로 연결을 시도함
    • -
  • 연결이 끊어진 경우, 일정 기간 딜레이 후 재연결을 시도함
    • -
  • 객체를 전송할 수 있고, 여러 개의 파라미터를 전송할 수 있음
    • -
-
Jest -
    -
  • 테스트를 병렬로 실행하기 때문에 테스트 실행 속도가 빠름
    • -
  • 자동 목업과 spyOn을 제공하여 의존성을 쉽게 테스트할 수 있음
    • -
  • 실패한 테스트를 먼저 실행하여 빠른 피드백을 제공함
    • -
  • 다양한 기능을 내장하고 있기 때문에 별도의 라이브러리를 추가로 설치할 필요가 없음
    • -
  • NestJS에서 기본 테스트 프레임워크로 Jest를 지원하기 때문에 별도의 설정이 필요하지 않음
    • -
-
- - -### FE - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
기술선택 이유
React -
    -
  • Next.js를 도입하면 제한된 기한 내에 마무리를 할 수 없을 것이라 판단하여 React를 사용하기로 결정함
    • -
-
Vite -
    -
  • 빌드 속도가 빠름
    • -
  • Webpack과 비교해서 설정파일을 많이 만지지 않아도 괜찮음
    • -
-
Zustand - -
WebRTC -
    -
  • P2P 커뮤니케이션을 지원하여 서버에 오버로드가 발생하지 않음
    • -
  • 별도의 플러그인이나 서드 파티 어플리케이션이 필요하지 않음
    • -
-
TailwindCss -
    -
  • 스타일과 로직의 관심사 분리가 안된다는 단점이 존재하지만, 빠른 개발을 위해 도입함
    • -
-
Cloudflare -
    -
  • 무료로 사용할 수 있음
    • -
  • 빠르게 배포할 수 있고, SSL 인증서도 자동으로 연결해줌
    • -
-
- - -### BE - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
기술선택 이유
NestJS -
    -
  • NestJS의 CLI를 사용하면 프로젝트, 모듈, 컨트롤러 생성 등의 작업을 간편하게 수행할 수 있음
    • -
  • 기본적으로 express 위에서 동작하기 때문에 express의 모든 기능을 그대로 사용할 수 있음
    • -
-
TypeORM -
    -
  • (ORM) 모델 클래스와 테이블을 매핑할 수 있기 때문에 유지보수가 용이함
    • -
  • (ORM) 개발자가 직접 SQL 쿼리를 작성하지 않기 때문에 SQL 인젝션을 예방할 수 있음
    • -
-
Nginx -
    -
  • 자체적으로 SSL/TLS를 지원하기 때문에 별도의 모듈을 설치할 필요없이 간단하게 HTTPS를 설정할 수 있음
    • -
  • 무료로 SSL 인증서를 발급하는 Let's Encrypt 서비스와의 통합을 지원함
    • -
  • 경로 기반 라우팅을 지원하기 때문에 단일 서버에서 여러 어플리케이션을 호스팅 할 수 있음
    • -
-
Docker -
    -
  • 컨테이너라는 독립된 공간을 사용하기 때문에 내부에서 일어나는 일이 호스트 서버에 영향을 미치지 않음
    • -
  • 프로그램에 필요한 환경을 이미지로 빌드하기 때문에 더 이상 코드 변경사항을 pull 받아오지 않아도 되고, 어디서든 일관된 동작으로 프로그램을 수행할 수 있음
    • -
-
GitHub Actions -
    -
  • Jenkins는 상대적으로 러닝 커브가 높아 프로젝트 마감에 영향을 미칠 것으로 판단했고, 주기적인 스케줄링의 필요도 느끼지 못함
    • -
  • GitHub Actions는 레포지토리와 통합되어 있기 때문에 소스코드와 CI/CD를 한 곳에서 관리할 수 있음
    • -
-
winston -
    -
  • 다양한 로깅 레벨을 지원하기 때문에 각 레벨에 따라 로그 메시지와 형식을 서로 다르게 지정할 수 있음
    • -
  • winston-daily-rotate-file을 이용하면 날짜별로 로그를 작성할 수 있고, 일정 기간 후 삭제하여 디스크 공간 낭비를 방지할 수 있음
    • -
-
Supertest -
    -
  • 다양한 HTTP 메서드를 제공하여 간편하게 HTTP 요청을 생성할 수 있기 때문에 API 테스가 용이함
    • -
  • 체이닝을 통해 여러 동작을 한 번에 수행할 수 있음
    • -
-
- +## 기술스택 세부사항 +| Category | Tech Stack | Description | 기술 블로그 링크 | +|----------|------------|-------------|-----------------| +| 인프라 | VPC, Server | 가상 네트워크 환경으로 보안상 안전한 환경에서 서버 운영하기 | [NCP 인프라 구축하기](https://season-broccoli-784.notion.site/NCP-e10722589ba444a7a179494e372fac5d?pvs=74) | +| DB | MySQL, Redis, TypeORM | - 인덱스를 활용하여 조회 성능 높이기
- 트랜잭션으로 연관된 작업을 하나의 작업으로 묶어줘 일관성 보장하기
- 적절한 자료형을 사용하여 디스크 공간 최적화하기 | [데이터베이스 최적화하기](https://season-broccoli-784.notion.site/274585c019584ad293f9133c1f70b523) | +| CI/CD | Docker, Nginx, Shell Script, GitHub Actions | - Docker Compose를 활용하여 일관된 방식으로 멀티 어플리케이션 실행하기
- Nginx를 이용하여 URL 정보에 따라 적절한 서비스 프록시하기
- GitHub Actions와 Shell Script로 자동화된 배포 프로세스 구축하기
- 블루/그린 무중단 배포 전략으로 서비스의 중단없이 업데이트하기 | [GitHub Actions로 CI/CD 자동화하기](https://season-broccoli-784.notion.site/GitHub-Actions-CI-CD-6c607b37cea24e5db0b20a39e30df154)
[블루/그린 무중단 배포 구현하기](https://season-broccoli-784.notion.site/882ef31d564449668a343acfc58d1c1f)
[graceful shutdown으로 사용자 경험 저하 방지하기](https://season-broccoli-784.notion.site/graceful-shutdown-917bb34932994cad884cfac86f0e67f4)
[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 | - 용량이 작은 상태 관리 라이브러리를 사용하여 청크 용량 최소화하기
- 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 커뮤니케이션 구현하기
- 데이터 채널을 활용하여 이미지, 메시지 등 다양한 종류의 데이터 주고받기
- 공통 소켓 이벤트를 정의하여 오용을 방지하고 시스템 확장성 보장하기 | - | + + ## 🔮🥛 타로 밀크티 소개 > 타로 밀크티는 **FE 3명 & BE 1명** 으로 구성되어 있어요!! > From e4ab9d310750d2d7cea19a1540f67fe3e3f56299 Mon Sep 17 00:00:00 2001 From: Song_Minhyung Date: Sun, 17 Mar 2024 21:34:51 +0900 Subject: [PATCH 09/22] Update README.md --- README.md | 5 ----- 1 file changed, 5 deletions(-) diff --git a/README.md b/README.md index d98b39ba..904ba58e 100644 --- a/README.md +++ b/README.md @@ -79,11 +79,6 @@ > 사용자가 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) From b1515085224e90ebd7f469562f5a1265e564e932 Mon Sep 17 00:00:00 2001 From: Song_Minhyung Date: Sun, 17 Mar 2024 21:35:21 +0900 Subject: [PATCH 10/22] Update README.md --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 904ba58e..a0f56375 100644 --- a/README.md +++ b/README.md @@ -79,6 +79,7 @@ > 사용자가 AI에게 자신의 고민을 자유롭게 이야기하면, 고민 내용을 바탕으로 타로 상담을 진행합니다. > 고민 상담 후 사용자가 타로 카드를 뽑으면, AI가 해당 결과를 설명합니다. > 사용자는 타로점 결과를 링크나 카카오톡으로 공유할 수 있습니다. + ![2](https://github.com/boostcampwm2023/web09-MagicConch/assets/43428643/13e7072a-3850-4b21-839e-506529008cb1) From 572f84020ea5e1295b178f90f849079022e87456 Mon Sep 17 00:00:00 2001 From: Song_Minhyung Date: Sun, 17 Mar 2024 21:37:20 +0900 Subject: [PATCH 11/22] Update README.md --- README.md | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index a0f56375..e8914d4a 100644 --- a/README.md +++ b/README.md @@ -73,6 +73,7 @@ - [BE](#be-1) - [🔮🥛 타로 밀크티 소개](#-타로-밀크티-소개) +
## 🚀 핵심기능 ### AI와의 채팅을 통해 타로점을 볼 수 있어요. @@ -86,9 +87,11 @@ ### 실제 타로 전문가에게 화상 타로 상담을 받을 수 있어요. > 타로 전문가와 직접 대면으로 만나지 않고 온라인 상에서 편하게 상담을 받을 수 있습니다. > 전문가는 상담을 위한 채팅방을 생성하여 사용자를 초대합니다. -> 사용자는 해당 채팅방에 접속하여 타로 상담을 받을 수 있습니다. +> 사용자는 해당 채팅방에 접속하여 타로 상담을 받을 수 있습니다. (사진 추가) +
+ ## 기술적 도전 ### 멀티 어플리케이션 구축 @@ -227,6 +230,7 @@ | 상태 관리 | Zustand | - 용량이 작은 상태 관리 라이브러리를 사용하여 청크 용량 최소화하기
- 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 커뮤니케이션 구현하기
- 데이터 채널을 활용하여 이미지, 메시지 등 다양한 종류의 데이터 주고받기
- 공통 소켓 이벤트를 정의하여 오용을 방지하고 시스템 확장성 보장하기 | - | +
## 🔮🥛 타로 밀크티 소개 > 타로 밀크티는 **FE 3명 & BE 1명** 으로 구성되어 있어요!! From 44f166f5e0324e446818272e4e76e6dec9c57a0d Mon Sep 17 00:00:00 2001 From: Song_Minhyung Date: Sun, 17 Mar 2024 21:39:00 +0900 Subject: [PATCH 12/22] Update README.md --- README.md | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index e8914d4a..c3f82a0d 100644 --- a/README.md +++ b/README.md @@ -49,11 +49,9 @@ ## 목차 - [🚀 핵심기능](#-핵심기능) - - [친절한 AI가 고민상담을 들어줘요](#친절한-ai가-고민상담을-들어줘요) - - [화려한 애니메이션으로 카드를 뽑을 수 있어요](#화려한-애니메이션으로-카드를-뽑을-수-있어요) - - [카드를 뽑은 후에는 결과를 들어볼 수 있어요](#카드를-뽑은-후에는-결과를-들어볼-수-있어요) - - [타로리더(사람)와 화상채팅으로 상담을 할 수 있어요](#타로리더사람와-화상채팅으로-상담을-할-수-있어요) - - [화상채팅뿐 아니라 메세지를 보낼수도 있어요](#화상채팅뿐-아니라-메세지를-보낼수도-있어요) + + - [AI와의 채팅을 통해 타로점을 볼 수 있어요.](#ai와의-채팅을-통해-타로점을-볼-수-있어요) + - [실제 타로 전문가에게 화상 타로 상담을 받을 수 있어요.](#실제-타로-전문가에게-화상-타로-상담을-받을-수-있어요) - [우당탕탕 이슈 해결기 💦](#우당탕탕-이슈-해결기-) - [BE](#be) - [[BE] 야 너두 무중단 배포 할 수 있어 🫵](#be-야-너두-무중단-배포-할-수-있어-🫵) From e9ed75e90fec63b5982564167c832add03fe52f5 Mon Sep 17 00:00:00 2001 From: Song_Minhyung Date: Sun, 17 Mar 2024 21:42:13 +0900 Subject: [PATCH 13/22] Update README.md --- README.md | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index c3f82a0d..ccbce5db 100644 --- a/README.md +++ b/README.md @@ -49,12 +49,17 @@ ## 목차 - [🚀 핵심기능](#-핵심기능) - - - [AI와의 채팅을 통해 타로점을 볼 수 있어요.](#ai와의-채팅을-통해-타로점을-볼-수-있어요) - - [실제 타로 전문가에게 화상 타로 상담을 받을 수 있어요.](#실제-타로-전문가에게-화상-타로-상담을-받을-수-있어요) + - [AI와의 채팅을 통해 타로점을 볼 수 있어요.](#ai와의-채팅을-통해-타로점을-볼-수-있어요) + - [실제 타로 전문가에게 화상 타로 상담을 받을 수 있어요.](#실제-타로-전문가에게-화상-타로-상담을-받을-수-있어요) +- [기술적 도전](기술적-도전) + - [멀티 어플리케이션 구축](멀티-어플리케이션-구축) + - [블루/그린 무중단 배포](블루그린-무중단-배포) + - [클로바 API를 이용한 AI 채팅](클로바-api를-이용한-ai-채팅) + - [WebRTC를 이용한 P2P 통신](webrtc를-이용한-p2p-통신) + - [인터렉티브한 애니메이션](인터렉티브한-애니메이션) - [우당탕탕 이슈 해결기 💦](#우당탕탕-이슈-해결기-) - [BE](#be) - - [[BE] 야 너두 무중단 배포 할 수 있어 🫵](#be-야-너두-무중단-배포-할-수-있어-🫵) + - [[BE] 야 너두 무중단 배포 할 수 있어 🫵](#be-야-너두-무중단-배포-할-수-있어-) - [[BE] SWAG하게 Swagger 사용하는 법 🤟 (Feat. Swagger 데코레이터를 위한 패키지 만들기)](#be-swag하게-swagger-사용하는-법--feat-swagger-데코레이터를-위한-패키지-만들기) - [FE](#fe) - [[FE] 인터랙티브 웹: 카드 애니메이션](#fe-인터랙티브-웹-카드-애니메이션) From 78bc7fe47ae413198ca46a41a06d2fbdff1d8e8f Mon Sep 17 00:00:00 2001 From: Song_Minhyung Date: Sun, 17 Mar 2024 21:43:00 +0900 Subject: [PATCH 14/22] Update README.md --- README.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index ccbce5db..a45f7cc1 100644 --- a/README.md +++ b/README.md @@ -51,12 +51,12 @@ - [🚀 핵심기능](#-핵심기능) - [AI와의 채팅을 통해 타로점을 볼 수 있어요.](#ai와의-채팅을-통해-타로점을-볼-수-있어요) - [실제 타로 전문가에게 화상 타로 상담을 받을 수 있어요.](#실제-타로-전문가에게-화상-타로-상담을-받을-수-있어요) -- [기술적 도전](기술적-도전) - - [멀티 어플리케이션 구축](멀티-어플리케이션-구축) - - [블루/그린 무중단 배포](블루그린-무중단-배포) - - [클로바 API를 이용한 AI 채팅](클로바-api를-이용한-ai-채팅) - - [WebRTC를 이용한 P2P 통신](webrtc를-이용한-p2p-통신) - - [인터렉티브한 애니메이션](인터렉티브한-애니메이션) +- [기술적 도전](#기술적-도전) + - [멀티 어플리케이션 구축](#멀티-어플리케이션-구축) + - [블루/그린 무중단 배포](#블루그린-무중단-배포) + - [클로바 API를 이용한 AI 채팅](#클로바-api를-이용한-ai-채팅) + - [WebRTC를 이용한 P2P 통신](#webrtc를-이용한-p2p-통신) + - [인터렉티브한 애니메이션](#인터렉티브한-애니메이션) - [우당탕탕 이슈 해결기 💦](#우당탕탕-이슈-해결기-) - [BE](#be) - [[BE] 야 너두 무중단 배포 할 수 있어 🫵](#be-야-너두-무중단-배포-할-수-있어-) From 8cf7bd1e444d329d3e0f701b744b2522215f5485 Mon Sep 17 00:00:00 2001 From: KimYujeong Date: Sun, 17 Mar 2024 21:45:03 +0900 Subject: [PATCH 15/22] Update README.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 시스템 아키텍처 --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index a45f7cc1..a5ebfafd 100644 --- a/README.md +++ b/README.md @@ -143,7 +143,7 @@
## 시스템 아키텍처 -![magic_conch-system architecture drawio](https://github.com/boostcampwm2023/web09-MagicConch/assets/70785620/c1f6ca2e-08db-486a-af2c-d6b115ecba3c) +![magic_conch-system architecture drawio](https://github.com/boostcampwm2023/web09-MagicConch/assets/70785620/702bf135-c0fd-441a-9f92-5e4aba002007)
From 3bf825433587bba4caf5788b624d291995835ea9 Mon Sep 17 00:00:00 2001 From: Song_Minhyung Date: Sun, 17 Mar 2024 21:46:22 +0900 Subject: [PATCH 16/22] Update README.md --- README.md | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/README.md b/README.md index a5ebfafd..9eb79705 100644 --- a/README.md +++ b/README.md @@ -70,10 +70,7 @@ - [[FE/BE] 소켓 아이고 😇 (Feat. socket.io는 파싱을 해)](#febe-소켓-아이고--feat-socketio는-파싱을-해) - [시스템 아키텍처](#시스템-아키텍처) - [기술 스택](#기술-스택) -- [💬 기술 선택 이유](#-기술-선택-이유) - - [공통](#공통) - - [FE](#fe-1) - - [BE](#be-1) +- [기술스택-세부사항](#기술스택-세부사항) - [🔮🥛 타로 밀크티 소개](#-타로-밀크티-소개)
From 7142366b208cd6804f5590e7d3fa97bf4cde46a1 Mon Sep 17 00:00:00 2001 From: Song_Minhyung Date: Sun, 17 Mar 2024 21:48:34 +0900 Subject: [PATCH 17/22] Update README.md --- README.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/README.md b/README.md index 9eb79705..5f8274d2 100644 --- a/README.md +++ b/README.md @@ -126,17 +126,17 @@ > 타로 밀크티의 기술적 도전과 이슈 해결 기록 ### BE -- [[BE] 야 너두 무중단 배포 할 수 있어 🫵](https://github.com/boostcampwm2023/web09-MagicConch/wiki/%EC%95%BC-%EB%84%88%EB%91%90-%EB%AC%B4%EC%A4%91%EB%8B%A8-%EB%B0%B0%ED%8F%AC-%ED%95%A0-%EC%88%98-%EC%9E%88%EC%96%B4-%F0%9F%AB%B5) -- [[BE] SWAG하게 Swagger 사용하는 법 🤟 (Feat. Swagger 데코레이터를 위한 패키지 만들기)](https://github.com/boostcampwm2023/web09-MagicConch/wiki/SWAG%ED%95%98%EA%B2%8C-Swagger-%EC%82%AC%EC%9A%A9%ED%95%98%EB%8A%94-%EB%B2%95-%F0%9F%A4%9F-(Feat.-Swagger-%EB%8D%B0%EC%BD%94%EB%A0%88%EC%9D%B4%ED%84%B0%EB%A5%BC-%EC%9C%84%ED%95%9C-%ED%8C%A8%ED%82%A4%EC%A7%80-%EB%A7%8C%EB%93%A4%EA%B8%B0)) +#### - [[BE] 야 너두 무중단 배포 할 수 있어 🫵](https://github.com/boostcampwm2023/web09-MagicConch/wiki/%EC%95%BC-%EB%84%88%EB%91%90-%EB%AC%B4%EC%A4%91%EB%8B%A8-%EB%B0%B0%ED%8F%AC-%ED%95%A0-%EC%88%98-%EC%9E%88%EC%96%B4-%F0%9F%AB%B5) +#### - [[BE] SWAG하게 Swagger 사용하는 법 🤟 (Feat. Swagger 데코레이터를 위한 패키지 만들기)](https://github.com/boostcampwm2023/web09-MagicConch/wiki/SWAG%ED%95%98%EA%B2%8C-Swagger-%EC%82%AC%EC%9A%A9%ED%95%98%EB%8A%94-%EB%B2%95-%F0%9F%A4%9F-(Feat.-Swagger-%EB%8D%B0%EC%BD%94%EB%A0%88%EC%9D%B4%ED%84%B0%EB%A5%BC-%EC%9C%84%ED%95%9C-%ED%8C%A8%ED%82%A4%EC%A7%80-%EB%A7%8C%EB%93%A4%EA%B8%B0)) ### FE -- [[FE] 인터랙티브 웹: 카드 애니메이션](https://github.com/boostcampwm2023/web09-MagicConch/wiki/%EC%9D%B8%ED%84%B0%EB%9E%99%ED%8B%B0%EB%B8%8C-%EC%9B%B9:-%EC%B9%B4%EB%93%9C-%EC%95%A0%EB%8B%88%EB%A9%94%EC%9D%B4%EC%85%98) -- [[FE] 🐻 Context API, Provider 지옥 그리고 귀여운 곰돌이 🐻](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) -- [[FE] 🚀 복잡함을 단순하게, 더 나은 경험으로 🚀](https://github.com/boostcampwm2023/web09-MagicConch/wiki/%F0%9F%9A%80-useWebRTC%ED%9B%85-%EB%A6%AC%ED%8C%A9%ED%86%A0%EB%A7%81-%EC%97%AC%EC%A0%95:-%EB%B3%B5%EC%9E%A1%ED%95%A8%EC%9D%84-%EB%8B%A8%EC%88%9C%ED%95%98%EA%B2%8C,-%EB%8D%94-%EB%82%98%EC%9D%80-%EA%B2%BD%ED%97%98%EC%9C%BC%EB%A1%9C-%F0%9F%9A%80) +#### - [[FE] 인터랙티브 웹: 카드 애니메이션](https://github.com/boostcampwm2023/web09-MagicConch/wiki/%EC%9D%B8%ED%84%B0%EB%9E%99%ED%8B%B0%EB%B8%8C-%EC%9B%B9:-%EC%B9%B4%EB%93%9C-%EC%95%A0%EB%8B%88%EB%A9%94%EC%9D%B4%EC%85%98) +#### - [[FE] 🐻 Context API, Provider 지옥 그리고 귀여운 곰돌이 🐻](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) +#### - [[FE] 🚀 복잡함을 단순하게, 더 나은 경험으로 🚀](https://github.com/boostcampwm2023/web09-MagicConch/wiki/%F0%9F%9A%80-useWebRTC%ED%9B%85-%EB%A6%AC%ED%8C%A9%ED%86%A0%EB%A7%81-%EC%97%AC%EC%A0%95:-%EB%B3%B5%EC%9E%A1%ED%95%A8%EC%9D%84-%EB%8B%A8%EC%88%9C%ED%95%98%EA%B2%8C,-%EB%8D%94-%EB%82%98%EC%9D%80-%EA%B2%BD%ED%97%98%EC%9C%BC%EB%A1%9C-%F0%9F%9A%80) ### FE / BE -- [[FE/BE] UX를 위해 AI 채팅 반응 속도를 84.87%까지 개선한 방법 😎](https://github.com/boostcampwm2023/web09-MagicConch/wiki/UX%EB%A5%BC-%EC%9C%84%ED%95%B4-AI-%EC%B1%84%ED%8C%85-%EB%B0%98%EC%9D%91-%EC%86%8D%EB%8F%84%EB%A5%BC-84.87%25%EA%B9%8C%EC%A7%80-%EA%B0%9C%EC%84%A0%ED%95%9C-%EB%B0%A9%EB%B2%95-%F0%9F%98%8E) -- [[FE/BE] 소켓 아이고 😇 (Feat. socket.io는 파싱을 해)](https://github.com/boostcampwm2023/web09-MagicConch/wiki/%EC%86%8C%EC%BC%93-%EC%95%84%EC%9D%B4%EA%B3%A0-%F0%9F%98%87-(Feat.-socket.io%EB%8A%94-%ED%8C%8C%EC%8B%B1%EC%9D%84-%ED%95%B4)) +#### - [[FE/BE] UX를 위해 AI 채팅 반응 속도를 84.87%까지 개선한 방법 😎](https://github.com/boostcampwm2023/web09-MagicConch/wiki/UX%EB%A5%BC-%EC%9C%84%ED%95%B4-AI-%EC%B1%84%ED%8C%85-%EB%B0%98%EC%9D%91-%EC%86%8D%EB%8F%84%EB%A5%BC-84.87%25%EA%B9%8C%EC%A7%80-%EA%B0%9C%EC%84%A0%ED%95%9C-%EB%B0%A9%EB%B2%95-%F0%9F%98%8E) +#### - [[FE/BE] 소켓 아이고 😇 (Feat. socket.io는 파싱을 해)](https://github.com/boostcampwm2023/web09-MagicConch/wiki/%EC%86%8C%EC%BC%93-%EC%95%84%EC%9D%B4%EA%B3%A0-%F0%9F%98%87-(Feat.-socket.io%EB%8A%94-%ED%8C%8C%EC%8B%B1%EC%9D%84-%ED%95%B4))
## 시스템 아키텍처 From bee28a42ce97a89bdb42cce321c8e4872dbbd27e Mon Sep 17 00:00:00 2001 From: Song_Minhyung Date: Sun, 17 Mar 2024 21:49:55 +0900 Subject: [PATCH 18/22] Update README.md --- README.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/README.md b/README.md index 5f8274d2..e340e87c 100644 --- a/README.md +++ b/README.md @@ -59,15 +59,15 @@ - [인터렉티브한 애니메이션](#인터렉티브한-애니메이션) - [우당탕탕 이슈 해결기 💦](#우당탕탕-이슈-해결기-) - [BE](#be) - - [[BE] 야 너두 무중단 배포 할 수 있어 🫵](#be-야-너두-무중단-배포-할-수-있어-) - - [[BE] SWAG하게 Swagger 사용하는 법 🤟 (Feat. Swagger 데코레이터를 위한 패키지 만들기)](#be-swag하게-swagger-사용하는-법--feat-swagger-데코레이터를-위한-패키지-만들기) + - [[BE] 야 너두 무중단 배포 할 수 있어 🫵](#0be-야-너두-무중단-배포-할-수-있어-) + - [[BE] SWAG하게 Swagger 사용하는 법 🤟 (Feat. Swagger 데코레이터를 위한 패키지 만들기)](#-be-swag하게-swagger-사용하는-법--feat-swagger-데코레이터를-위한-패키지-만들기) - [FE](#fe) - - [[FE] 인터랙티브 웹: 카드 애니메이션](#fe-인터랙티브-웹-카드-애니메이션) - - [[FE] 🐻 Context API, Provider 지옥 그리고 귀여운 곰돌이 🐻](#fe--context-api-provider-지옥-그리고-귀여운-곰돌이-) - - [[FE] 🚀 복잡함을 단순하게, 더 나은 경험으로 🚀](#fe--복잡함을-단순하게-더-나은-경험으로-) + - [[FE] 인터랙티브 웹: 카드 애니메이션](#-fe-인터랙티브-웹-카드-애니메이션) + - [[FE] 🐻 Context API, Provider 지옥 그리고 귀여운 곰돌이 🐻](#-fe--context-api-provider-지옥-그리고-귀여운-곰돌이-) + - [[FE] 🚀 복잡함을 단순하게, 더 나은 경험으로 🚀](#-fe--복잡함을-단순하게-더-나은-경험으로-) - [FE / BE](#fe--be) - - [[FE/BE] UX를 위해 AI 채팅 반응 속도를 84.87%까지 개선한 방법 😎](#febe-ux를-위해-ai-채팅-반응-속도를-8487까지-개선한-방법-) - - [[FE/BE] 소켓 아이고 😇 (Feat. socket.io는 파싱을 해)](#febe-소켓-아이고--feat-socketio는-파싱을-해) + - [[FE/BE] UX를 위해 AI 채팅 반응 속도를 84.87%까지 개선한 방법 😎](#-febe-ux를-위해-ai-채팅-반응-속도를-8487까지-개선한-방법-) + - [[FE/BE] 소켓 아이고 😇 (Feat. socket.io는 파싱을 해)](#-febe-소켓-아이고--feat-socketio는-파싱을-해) - [시스템 아키텍처](#시스템-아키텍처) - [기술 스택](#기술-스택) - [기술스택-세부사항](#기술스택-세부사항) From b90e1f3950791ed4f6d1abcd4495fbc29b270164 Mon Sep 17 00:00:00 2001 From: Song_Minhyung Date: Sun, 17 Mar 2024 21:50:30 +0900 Subject: [PATCH 19/22] Update README.md --- README.md | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/README.md b/README.md index e340e87c..1ed3091f 100644 --- a/README.md +++ b/README.md @@ -59,7 +59,7 @@ - [인터렉티브한 애니메이션](#인터렉티브한-애니메이션) - [우당탕탕 이슈 해결기 💦](#우당탕탕-이슈-해결기-) - [BE](#be) - - [[BE] 야 너두 무중단 배포 할 수 있어 🫵](#0be-야-너두-무중단-배포-할-수-있어-) + - [[BE] 야 너두 무중단 배포 할 수 있어 🫵](#-be-야-너두-무중단-배포-할-수-있어-) - [[BE] SWAG하게 Swagger 사용하는 법 🤟 (Feat. Swagger 데코레이터를 위한 패키지 만들기)](#-be-swag하게-swagger-사용하는-법--feat-swagger-데코레이터를-위한-패키지-만들기) - [FE](#fe) - [[FE] 인터랙티브 웹: 카드 애니메이션](#-fe-인터랙티브-웹-카드-애니메이션) @@ -157,7 +157,6 @@ - From cd24be801c81a70f327238013b2be9f6bded7cb5 Mon Sep 17 00:00:00 2001 From: Song_Minhyung Date: Sun, 17 Mar 2024 21:52:12 +0900 Subject: [PATCH 20/22] Update README.md --- README.md | 30 +++++++++++++++--------------- 1 file changed, 15 insertions(+), 15 deletions(-) diff --git a/README.md b/README.md index 1ed3091f..f7abe731 100644 --- a/README.md +++ b/README.md @@ -59,15 +59,15 @@ - [인터렉티브한 애니메이션](#인터렉티브한-애니메이션) - [우당탕탕 이슈 해결기 💦](#우당탕탕-이슈-해결기-) - [BE](#be) - - [[BE] 야 너두 무중단 배포 할 수 있어 🫵](#-be-야-너두-무중단-배포-할-수-있어-) - - [[BE] SWAG하게 Swagger 사용하는 법 🤟 (Feat. Swagger 데코레이터를 위한 패키지 만들기)](#-be-swag하게-swagger-사용하는-법--feat-swagger-데코레이터를-위한-패키지-만들기) + - [[BE] 야 너두 무중단 배포 할 수 있어 🫵](#be-야-너두-무중단-배포-할-수-있어-) + - [[BE] SWAG하게 Swagger 사용하는 법 🤟 (Feat. Swagger 데코레이터를 위한 패키지 만들기)](#be-swag하게-swagger-사용하는-법--feat-swagger-데코레이터를-위한-패키지-만들기) - [FE](#fe) - - [[FE] 인터랙티브 웹: 카드 애니메이션](#-fe-인터랙티브-웹-카드-애니메이션) - - [[FE] 🐻 Context API, Provider 지옥 그리고 귀여운 곰돌이 🐻](#-fe--context-api-provider-지옥-그리고-귀여운-곰돌이-) - - [[FE] 🚀 복잡함을 단순하게, 더 나은 경험으로 🚀](#-fe--복잡함을-단순하게-더-나은-경험으로-) + - [[FE] 인터랙티브 웹: 카드 애니메이션](#fe-인터랙티브-웹-카드-애니메이션) + - [[FE] 🐻 Context API, Provider 지옥 그리고 귀여운 곰돌이 🐻](#fe--context-api-provider-지옥-그리고-귀여운-곰돌이-) + - [[FE] 🚀 복잡함을 단순하게, 더 나은 경험으로 🚀](#fe--복잡함을-단순하게-더-나은-경험으로-) - [FE / BE](#fe--be) - - [[FE/BE] UX를 위해 AI 채팅 반응 속도를 84.87%까지 개선한 방법 😎](#-febe-ux를-위해-ai-채팅-반응-속도를-8487까지-개선한-방법-) - - [[FE/BE] 소켓 아이고 😇 (Feat. socket.io는 파싱을 해)](#-febe-소켓-아이고--feat-socketio는-파싱을-해) + - [[FE/BE] UX를 위해 AI 채팅 반응 속도를 84.87%까지 개선한 방법 😎](#febe-ux를-위해-ai-채팅-반응-속도를-8487까지-개선한-방법-) + - [[FE/BE] 소켓 아이고 😇 (Feat. socket.io는 파싱을 해)](#febe-소켓-아이고--feat-socketio는-파싱을-해) - [시스템 아키텍처](#시스템-아키텍처) - [기술 스택](#기술-스택) - [기술스택-세부사항](#기술스택-세부사항) @@ -126,17 +126,17 @@ > 타로 밀크티의 기술적 도전과 이슈 해결 기록 ### BE -#### - [[BE] 야 너두 무중단 배포 할 수 있어 🫵](https://github.com/boostcampwm2023/web09-MagicConch/wiki/%EC%95%BC-%EB%84%88%EB%91%90-%EB%AC%B4%EC%A4%91%EB%8B%A8-%EB%B0%B0%ED%8F%AC-%ED%95%A0-%EC%88%98-%EC%9E%88%EC%96%B4-%F0%9F%AB%B5) -#### - [[BE] SWAG하게 Swagger 사용하는 법 🤟 (Feat. Swagger 데코레이터를 위한 패키지 만들기)](https://github.com/boostcampwm2023/web09-MagicConch/wiki/SWAG%ED%95%98%EA%B2%8C-Swagger-%EC%82%AC%EC%9A%A9%ED%95%98%EB%8A%94-%EB%B2%95-%F0%9F%A4%9F-(Feat.-Swagger-%EB%8D%B0%EC%BD%94%EB%A0%88%EC%9D%B4%ED%84%B0%EB%A5%BC-%EC%9C%84%ED%95%9C-%ED%8C%A8%ED%82%A4%EC%A7%80-%EB%A7%8C%EB%93%A4%EA%B8%B0)) +#### [[BE] 야 너두 무중단 배포 할 수 있어 🫵](https://github.com/boostcampwm2023/web09-MagicConch/wiki/%EC%95%BC-%EB%84%88%EB%91%90-%EB%AC%B4%EC%A4%91%EB%8B%A8-%EB%B0%B0%ED%8F%AC-%ED%95%A0-%EC%88%98-%EC%9E%88%EC%96%B4-%F0%9F%AB%B5) +#### [[BE] SWAG하게 Swagger 사용하는 법 🤟 (Feat. Swagger 데코레이터를 위한 패키지 만들기)](https://github.com/boostcampwm2023/web09-MagicConch/wiki/SWAG%ED%95%98%EA%B2%8C-Swagger-%EC%82%AC%EC%9A%A9%ED%95%98%EB%8A%94-%EB%B2%95-%F0%9F%A4%9F-(Feat.-Swagger-%EB%8D%B0%EC%BD%94%EB%A0%88%EC%9D%B4%ED%84%B0%EB%A5%BC-%EC%9C%84%ED%95%9C-%ED%8C%A8%ED%82%A4%EC%A7%80-%EB%A7%8C%EB%93%A4%EA%B8%B0)) ### FE -#### - [[FE] 인터랙티브 웹: 카드 애니메이션](https://github.com/boostcampwm2023/web09-MagicConch/wiki/%EC%9D%B8%ED%84%B0%EB%9E%99%ED%8B%B0%EB%B8%8C-%EC%9B%B9:-%EC%B9%B4%EB%93%9C-%EC%95%A0%EB%8B%88%EB%A9%94%EC%9D%B4%EC%85%98) -#### - [[FE] 🐻 Context API, Provider 지옥 그리고 귀여운 곰돌이 🐻](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) -#### - [[FE] 🚀 복잡함을 단순하게, 더 나은 경험으로 🚀](https://github.com/boostcampwm2023/web09-MagicConch/wiki/%F0%9F%9A%80-useWebRTC%ED%9B%85-%EB%A6%AC%ED%8C%A9%ED%86%A0%EB%A7%81-%EC%97%AC%EC%A0%95:-%EB%B3%B5%EC%9E%A1%ED%95%A8%EC%9D%84-%EB%8B%A8%EC%88%9C%ED%95%98%EA%B2%8C,-%EB%8D%94-%EB%82%98%EC%9D%80-%EA%B2%BD%ED%97%98%EC%9C%BC%EB%A1%9C-%F0%9F%9A%80) +#### [[FE] 인터랙티브 웹: 카드 애니메이션](https://github.com/boostcampwm2023/web09-MagicConch/wiki/%EC%9D%B8%ED%84%B0%EB%9E%99%ED%8B%B0%EB%B8%8C-%EC%9B%B9:-%EC%B9%B4%EB%93%9C-%EC%95%A0%EB%8B%88%EB%A9%94%EC%9D%B4%EC%85%98) +#### [[FE] 🐻 Context API, Provider 지옥 그리고 귀여운 곰돌이 🐻](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) +#### [[FE] 🚀 복잡함을 단순하게, 더 나은 경험으로 🚀](https://github.com/boostcampwm2023/web09-MagicConch/wiki/%F0%9F%9A%80-useWebRTC%ED%9B%85-%EB%A6%AC%ED%8C%A9%ED%86%A0%EB%A7%81-%EC%97%AC%EC%A0%95:-%EB%B3%B5%EC%9E%A1%ED%95%A8%EC%9D%84-%EB%8B%A8%EC%88%9C%ED%95%98%EA%B2%8C,-%EB%8D%94-%EB%82%98%EC%9D%80-%EA%B2%BD%ED%97%98%EC%9C%BC%EB%A1%9C-%F0%9F%9A%80) ### FE / BE -#### - [[FE/BE] UX를 위해 AI 채팅 반응 속도를 84.87%까지 개선한 방법 😎](https://github.com/boostcampwm2023/web09-MagicConch/wiki/UX%EB%A5%BC-%EC%9C%84%ED%95%B4-AI-%EC%B1%84%ED%8C%85-%EB%B0%98%EC%9D%91-%EC%86%8D%EB%8F%84%EB%A5%BC-84.87%25%EA%B9%8C%EC%A7%80-%EA%B0%9C%EC%84%A0%ED%95%9C-%EB%B0%A9%EB%B2%95-%F0%9F%98%8E) -#### - [[FE/BE] 소켓 아이고 😇 (Feat. socket.io는 파싱을 해)](https://github.com/boostcampwm2023/web09-MagicConch/wiki/%EC%86%8C%EC%BC%93-%EC%95%84%EC%9D%B4%EA%B3%A0-%F0%9F%98%87-(Feat.-socket.io%EB%8A%94-%ED%8C%8C%EC%8B%B1%EC%9D%84-%ED%95%B4)) +#### [[FE/BE] UX를 위해 AI 채팅 반응 속도를 84.87%까지 개선한 방법 😎](https://github.com/boostcampwm2023/web09-MagicConch/wiki/UX%EB%A5%BC-%EC%9C%84%ED%95%B4-AI-%EC%B1%84%ED%8C%85-%EB%B0%98%EC%9D%91-%EC%86%8D%EB%8F%84%EB%A5%BC-84.87%25%EA%B9%8C%EC%A7%80-%EA%B0%9C%EC%84%A0%ED%95%9C-%EB%B0%A9%EB%B2%95-%F0%9F%98%8E) +#### [[FE/BE] 소켓 아이고 😇 (Feat. socket.io는 파싱을 해)](https://github.com/boostcampwm2023/web09-MagicConch/wiki/%EC%86%8C%EC%BC%93-%EC%95%84%EC%9D%B4%EA%B3%A0-%F0%9F%98%87-(Feat.-socket.io%EB%8A%94-%ED%8C%8C%EC%8B%B1%EC%9D%84-%ED%95%B4))
## 시스템 아키텍처 @@ -218,7 +218,7 @@


-## 기술스택 세부사항 +## 기술 스택 세부사항 | Category | Tech Stack | Description | 기술 블로그 링크 | |----------|------------|-------------|-----------------| | 인프라 | VPC, Server | 가상 네트워크 환경으로 보안상 안전한 환경에서 서버 운영하기 | [NCP 인프라 구축하기](https://season-broccoli-784.notion.site/NCP-e10722589ba444a7a179494e372fac5d?pvs=74) | From 17af0bae846611527ccde0179e044d0f8ee5b5e5 Mon Sep 17 00:00:00 2001 From: Song_Minhyung Date: Sun, 17 Mar 2024 21:52:44 +0900 Subject: [PATCH 21/22] Update README.md --- README.md | 1 - 1 file changed, 1 deletion(-) diff --git a/README.md b/README.md index f7abe731..645c4507 100644 --- a/README.md +++ b/README.md @@ -70,7 +70,6 @@ - [[FE/BE] 소켓 아이고 😇 (Feat. socket.io는 파싱을 해)](#febe-소켓-아이고--feat-socketio는-파싱을-해) - [시스템 아키텍처](#시스템-아키텍처) - [기술 스택](#기술-스택) -- [기술스택-세부사항](#기술스택-세부사항) - [🔮🥛 타로 밀크티 소개](#-타로-밀크티-소개)
From 48cbda07cc656ff71698572df846fe31797cc085 Mon Sep 17 00:00:00 2001 From: Song_Minhyung Date: Sun, 17 Mar 2024 21:56:39 +0900 Subject: [PATCH 22/22] Update README.md --- README.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 645c4507..f9a75cd9 100644 --- a/README.md +++ b/README.md @@ -87,7 +87,9 @@ > 타로 전문가와 직접 대면으로 만나지 않고 온라인 상에서 편하게 상담을 받을 수 있습니다. > 전문가는 상담을 위한 채팅방을 생성하여 사용자를 초대합니다. > 사용자는 해당 채팅방에 접속하여 타로 상담을 받을 수 있습니다. -(사진 추가) + +![image](https://github.com/boostcampwm2023/web09-MagicConch/assets/43428643/add8464f-10e5-4df3-9624-7606da8aaba3) +