🏠 배포 주소 : ahwlsqja.store

🔥 작업 로그 : Notion

📹 소개 영상 : 미정

📜 팀 브로셔 : Brochure

---

프론트엔드

백엔드

목차

1. 📝인트로

2. 📒ERD

3. 💣트러블 슈팅

4. 🤷🏻‍♂️기술적 의사결정

5. ⚒사용한 기술 Stack

6. 🕸아키텍쳐

7. 👨‍👩‍👧‍👦팀 소개

1. 📝 Intro

• 프로젝트명 : 국민 참여 재판
• 기간 : 2024년 3월 25일 ~ 2024년 5월 1일
• 주제 : 극악무도한 범죄자들의 판결을 실시간 투표로 정하고 , Ai를 통해 판례를 가져와서 죄질에 대한 형량을 국민끼리 투표해보고 , 유머 혹은 정치적 이야기를 재미있게 토론하는 웹사이트입니다. (맥그리거 vs 할머니 500명 맨손으로 케이지에서) , (전수민 vs 김재연 코딩 대결하면 누가 이기나 )
• 주요기능 :
  Web-Socket을 통한 실시간 찬반투표
  

2. 📒ERD

https://drawsql.app/teams/kim-14/diagrams/3-erd

3. 💣 Troubleshooting

4. 🤷🏻‍♂️기술적 의사결정

기술적 의사 결정

요구사항	고민 기술	사용 이유
동시성 처리	선택한 기술 : Bull Queue 선택지 : Pessimistic Lock Bull Queue Apache Kafka	Bull Queue 비동기적으로 작업들을 Queue에 추가하여 워커를 통해 동시성을 제어 할 수 있음. 투표 수를 업데이트할 때 비관적 락을 사용하여 동시성을 관리하게 됨, 일관성은 확실하게 보장 되나, 부하가 높은 상태일 경우 Race Condition이나 DeadLock이 쉽게 발생할 수 있기 때문, 비동기적으로 작업을 추가하고 요청을 FIFO로 처리하는 Bull Queue를 선택하게 됨. MSA의 경우 Kafka를 사용하면 좋으나, 현재 프로젝트의 단계에서는 당장 투표 수 관리에 있어, 메시지 브로커가 필요했기 때문에 Bull Queue를 선택
성능 테스트	선택한 기술: Artillery 선택지 : Artillery Apache JMeter K6	스크립트 작성 및 관리를 테스트 스크립트를 yaml 파일을 사용해서 간단하게 작성할 수 있으며, socket.io 엔진 테스트 가능. CICD 자동화 가능. 빠르고 가벼움. (전체적으로 프로젝트가 무거움) cloud를 통해 보고서를 그래프 등 시각적으로 확인 가능.
로깅 모니터링	선택한 기술: Filebeat + ELK 선택지 Filebeat + ELK EFK (Elasticsearch + Fluentd + Kibana) PLG (Promtail + Loki + Grafana)	커스터마이징이 자유로운 로깅 라이브러리 winston을 사용하여 저장된 로그를 Filebeat가 전담함으로써 logstash의 부하를 최소화하고, 수집된 Log를 시각화함으로써 개발자가 효과적으로 웹사이트를 진단하고 판단하는데 용이함 Kibana의 강력한 로그 분석 기능을 통해 관리자가 쉽게 데이터를 시각화하고 로그를 분석할 수 있게끔 함 비교적 가벼운 PLG를 사용할 수 있겠으나, 검색 기능 또한 Elasticsearch의 인덱싱 기능을 사용함으로써 연동하여 사용할 수 있는 ELK를 선택
DB	선택한 기술: PostgreSQL MongoDB 선택지: MySQL PostgreSQL MongoDB	PostgreSQL 상대적으로 쓰기 작업에서 높은 성능을 보이는 PostgreSQL를 사용함으로써 투표, 조회수, 좋아요 기능의 업데이트를 좀 더 효율적으로 작업하기 용이함 복제에 있어서 속도가 좀 더 빠른 비동기식 복제를 통하여 고가용성을 높히고 , 게시판이 많은 웹사이트 특성상 관계형 DBMS가 적합하다고 판단 차후 NoSQL과 같은 키-값 형태의 데이터가 필요할 경우 MySQL대신 PostgreSQL을 통한 데이터 저장이 원활히 가능할거라고 판단됨 MongoDB 대표적인 Nosql로써 접근하기가 쉽고 채팅을 저장함에 있어서 Postgresql보다 빠를거라고 판단하고 사용하게 됨
ChatBot	선택한 기술: SentenceTransformer 선택지: gpt 3.5 api lamma2 ko	GPT 3.5 API와 Google Gemma를 통한 fine-tuning 작업을 진행했음에도 불구하고, 법률 분야의 도메인 지식이 부재한 상태에서 판례 데이터의 중요성을 파악하는 데 어려움을 겪었습니다. 즉, 법률 도메인 특성상 법률 용어가 갖는 법적 해석을 언어 모델이 수행하는 데 한계가 있음을 의미합니다. 또한, 사용자로서 직접 프롬프트를 설정하여 법률 해석을 요구하는 것 역시 효과적이지 않다는 문제점에 직면했습니다. 이러한 상황은 법률 단어와 문구가 갖는 복잡성과 특수성 때문에, 전문적인 법률 지식 없이는 언어 모델을 통한 정확한 법률 해석이나 판례 분석에 한계가 있음을 말합니다.
채팅 아키텍쳐	선택한 기술: Redis 선택지: Apache Kafka Redis	구현의 복잡성이 낮고 이미 다양하게 레디스의 사용을 구상한 상태에서 적용하기 가 좋았고, Pub/Sub을 이용해서 실시간 알림과 메시지에 접근이 좋아서 선택하게 되었습니다. Redis 메모리 내 데이터 저장소입니다. 빠른 데이터 액세스와 간단한 데이터 구조를 제공합니다. Redis의 퍼블리시/서브스크라이브(pub/sub) 기능을 활용하여 실시간으로 메시지를 교환하고 각 채팅 룸을 채널로 구성하고, 사용자들이 해당 채널을 구독하게 함으로써 알림과 메시지를 실시간으로 받아볼 수 있습니다.
채팅	선택한 기술: Socket.io 선택지: Socket.io WebSocket	여러 곳에서 토론을 할 수 있도록 웹사이트를 계획하였고, 특히 룸(room) 기능을 통한 고도화를 염두에 두었습니다. 고가용성을 함께 고려하면서 Socket.io를 선택하였습니다. Socket.io 웹 소켓 기술을 활용하는 Node.js 라이브러리로 양방향 통신을 지원합니다. 연결이 끊길 경우 자동으로 재연결을 시도하기 때문에 고가용성 측면에서 유리합니다. 룸 기능의 구현 복잡성이 낮아, 채팅 기능 확장에 있어 유리한 점이 많습니다. 모든 웹 브라우저와의 호환성이 좋아, 오래된 브라우저에서도 문제없이 사용할 수 있습니다. 이는 HTML5 이전 버전에서도 웹소켓 기능을 제공하기 때문입니다.
투표	선택한 기술: Socket.io 선택지: Socket.io Polling	저희가 구현하고자 하는 투표 시스템은 실시간으로 변화하는 투표 현황을 사용자에게 보여줘야함. 이를 위해 일정 시간마다 서버에 요청을 보내는 Polling 방식은 적합하지 않다고 판단되었습니다. 또한, 여러 곳에서 투표 기능을 사용하게 되면, 많은 Polling 요청이 서버에 과부하를 일으킬 수 있습니다. 이러한 이유로 고성능 실시간 통신을 제공하는 Socket.io를 선택하게 되었습니다. Socket.io 웹 소켓 기술을 활용하는 Node.js 라이브러리로 양방향 통신을 지원합니다. 연결이 끊길 경우 자동으로 재연결을 시도하기 때문에 고가용성 측면에서 유리 룸 기능의 구현 복잡성이 낮아, 채팅 기능 확장에 있어 유리한 점이 많습니다. 모든 웹 브라우저와의 호환성이 좋아, 오래된 브라우저에서도 문제없이 사용할 수 있습니다. 이는 HTML5 이전 버전에서도 웹소켓 기능을 제공하기 때문입니다.
알림	선택한 기술 : FCM 선택한 이유: Socket.io+Redis FCM WebPush	실시간으로 핫한 투표를 알려줘야 하기에 실시간 투표에 적합한 기술들을 찾아보았고 그 중 최적화가 제일 잘 되고 , 실시간과 근접한 FCM을 선택함

5. ⚒ Tech Stack

분류	기술	분류	기술
Runtime	Node.js	Language	TypeScript
Framework	Nest.js	DB	PostgreSQL(AWS RDS), Redis,MongoDB
Deployment	Aws Ecs	Test	Jest, Supertest, Artillery
채팅,투표	socket.io	로깅	Filebeat + ELK
알림	FCM	ChatBot	SentenceTransformer

6. 🕸 Architecture

7. 👨‍👩‍👧‍👦Team Members

Position	Name	Github	Tech Blog
Backend	김재연	APD-Kim	https://velog.io/@lol0620/posts
Backend	김성민	kimsungmin2	https://velog.io/@anrl8913/posts
Backend	모진영	ahwlsqja	https://velog.io/@bubblegum95
Backend	황세민	bubblegum95	https://velog.io/@bubblegum95
Backend	박재형	jaecoder222	https://dev-jacoder222.tistory.com/

8. 💾기술적인 도전

📝Commit Convention

Commit Convention 펼쳐보기

● 제목은 최대 30글자이하로 작성: ex) feat: Add Key mapping
● 본문은 아래에 작성

--- <타입> 리스트 ---

feat        : 기능 (새로운 기능)  
fix         : 버그 (버그 수정)  
refactor    : 리팩토링  
design      : CSS 등 사용자 UI 디자인 변경  
comment     : 필요한 주석 추가 및 변경  
style       : 스타일 (코드 형식, 세미콜론 추가: 비즈니스 로직에 변경 없음)  
docs        : 문서 수정 (문서 추가, 수정, 삭제, README)  
test        : 테스트 (테스트 코드 추가, 수정, 삭제: 비즈니스 로직에 변경 없음)  
chore       : 기타 변경사항 (빌드 스크립트 수정, assets, 패키지 매니저 등)  
init        : 초기 생성  
rename      : 파일 혹은 폴더명을 수정하거나 옮기는 작업만 한 경우  
remove      : 파일을 삭제하는 작업만 수행한 경우 

--- <꼬리말> 필수아닌 옵션 ---

Fixes        : 이슈 수정중 (아직 해결되지 않은 경우)  
Resolves     : 이슈 해결했을 때 사용  
Ref          : 참고할 이슈가 있을 때 사용  
Related to   : 해당 커밋에 관련된 이슈번호 (아직 해결되지 않은 경우)  
ex) Fixes: #47 Related to: #32, #21

🗒️Code Convention

Code Convention 펼쳐보기

--- Prettier & Eslint 자동 적용 ---

singleQuote: true → 작은 따옴표(') 사용
trailingComma: "all" → 객체 또는 배열의 마지막 요소 뒤에 항상 쉼표(,) 추가
tabWidth: 2 → 들여쓰기 탭의 너비 2
semi: true → 문장의 끝에 항상 세미콜론(;) 추가
arrowParens: "always" → 화살표 함수 매개변수에 항상 괄호(ex, (param)=>expression) 추가 
endOfLine: "auto" → 자동으로 행 종결 문자를 선택하도록 설정(줄 바꿈 문자(\n)→줄 바꿈 문자(\r\n))

Nest is MIT licensed.