MatchBox Project

0. 목차

• 1. Introduce
• 2. 링크
• 3. stacks
• 4. 프로젝트 구조
• 5. 팀 소개

1. Introduce

• MatchBox?

  과기부 산하 이노베이션아카데미 42서울의 교육생들이 간단한 게임을 즐기고 소통을 할 수 있는 채팅 웹 애플리케이션 입니다. 42서울 공통과정 졸업 프로젝트로 풀스택으로 백엔드 프론트엔드 모두 담당하여 제작하였습니다.

• User

• 42Cadets/Members : 친구 관리, 채팅, 게임
  

2. Link

• Docs : MatchBox Docs
  
• Frontend Repo : MatchBox Frontend
  
• Backend Repo : MatchBox Backend
  
  

3. Stacks

파트	기술스택	선정이유
Common	TypeScript	Type 안정성을 보장하여 런타임 에러 방지
	Prettier	코드 스타일 정형화를 통한 협업 능률 향상
	Socket.io	실시간 채팅 및 게임 기능 구현을 위해 HTTP 통신이 아닌 소켓 통신 필요
Backend	NestJS	DI : 의존관계를 분리하여 수정 및 재사용이 용이함 IoC : 컴포넌트와 모듈에 집중한 프로그래밍 가능, 유지보수 또는 확장시 편리
	PostgreSQL	영구 무료인 오픈소스, 참고할 자료가 많고 다양함
	Prisma	RDBMS의 데이터 구조와 객체지향 모델 사이의 간격을 줄여 생산성 증가
Frontend	React	컴포넌트 기반 아키텍처를 통해 모듈화와 재사용성을 높여 개발 생산성을 향상
	styled-components	컴포넌트 기반 디자인을 강화하고 재사용성을 향상
	Recoil	React 상태 관리를 간단하게 처리하여 코드 유지보수와 개발 생산성을 향상
Infra	Docker-compose	컨테이너를 이용한 가상환경 구성 및 빌드 자동화

4. Diagram

• WireFrame
  

  
  

• ERD
  

  
  
  

5. MatchBox Team

백엔드/프론트엔드 구분 없이 총 4명이서 디자인/설계/백엔드/프론트까지 진행했습니다.
https://github.com/orgs/Match-Box-Team/people

기타

• docker-compose.yml에서 env는 backend/frontend 각각 필요
• env 설정시 42OAuth id/secret 설정 필요