Skip to content

기술 스택

Jump to bottom
KimYujeong edited this page Apr 26, 2024 · 38 revisions

🛠️ 기술 스택

🏠 시스템 아키텍처

magic_conch-system architecture drawio

구분 기술 스택
common
frontend
backend
DB
CI/CD
deployment
others

💬 기술 선택 이유

공통

기술 선택 이유
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 테스가 용이함
  • 체이닝을 통해 여러 동작을 한 번에 수행할 수 있음

🐚 마법의 소라고둥 🐚

GitHub Repo | GitHub Wiki | Team Notion

🔮 타로밀크티

💻 프로젝트

💦 우당탕탕 이슈 해결기

BE

FE

FE/BE

📑 우리의 기술블로그

📌 FE

📌 BE

📌 ALL

🧑‍🏫 멘토링 일지

📢 회의록

💬 스크럼

💭 팀 회고

💭 개인 회고

🏃 Ongoing Project

Clone this wiki locally