web05-SleepyWoods

KO | EN

gitlite — search

#javascript #python #hacktoberfest #react #ai #typescript #llm #go #golang #android #machine-learning #rust #deep-learning #linux

web05-SleepyWoods

★ 23 Open GitHub ↗

오순도순 당신의 추억을 쌓아보세요🎄

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# 💡 프로젝트 소개

게임처럼 즐길 수 있는 신개념 SNS

친구들과 함께 SleepyWoods만의 따뜻한 감성을 느껴보아요 😀

- 다양한 캐릭터 선택할 수 있어요!
- 소셜 로그인을 통한 3초 회원가입!
- 자신만의 집을 꾸며고, 친구를 초대해요!
- 술래잡기, 오목 등 다함께 미니게임하기!
- 음성, 화상, 텍스트 채팅이 가능해요!
- 기록을 세우고 공유하세요!

다양한 기능이 궁금하시다면 [SleepyWoods 노션](https://stouter.notion.site/SleepyWoods-f9fbca6aa60a4478b17ae931d426c2be)을 방문해주세요 😆🎄

# 👨‍👩‍👧‍👦 팀원 소개

| J002                                       | J111                                | J120                                  | J165                              |
| ------------------------------------------ | ----------------------------------- | ------------------------------------- | --------------------------------- |
| [강성준](https://github.com/comeintostout) | [안현서](https://github.com/ktmihs) | [원종빈](https://github.com/JJongBin) | [이형진](https://github.com/hj1n) |

# 📔 프로젝트 관리

![Figma](https://img.shields.io/badge/figma-%23F24E1E.svg?style=for-the-badge&logo=figma&logoColor=white)
![GitHub](https://img.shields.io/badge/github-%23121011.svg?style=for-the-badge&logo=github&logoColor=white)
![GitHub Wiki](https://img.shields.io/badge/github%20Wiki-%232671E5.svg?style=for-the-badge)
![Slack](https://img.shields.io/badge/Slack-4A154B?style=for-the-badge&logo=slack&logoColor=white)

# 📚 기술 스택

![ESLint](https://img.shields.io/badge/ESLint-4B3263?style=for-the-badge&logo=eslint&logoColor=white)

## 프론트엔드

![React](https://img.shields.io/badge/react-%2320232a.svg?style=for-the-badge&logo=react&logoColor=%2361DAFB)
![Vite](https://img.shields.io/badge/vite-%23646CFF.svg?style=for-the-badge&logo=vite&logoColor=white)
![React Router](https://img.shields.io/badge/React_Router-CA4245?style=for-the-badge&logo=react-router&logoColor=white)
![Emotion](https://img.shields.io/badge/Emotion-DB7093?style=for-the-badge)
![TypeScript](https://img.shields.io/badge/TypeScript-3178C6.svg?&style=for-the-badge&logo=TypeScript&logoColor=white)
![Socket.io](https://img.shields.io/badge/Socket.io-black?style=for-the-badge&logo=socket.io&badgeColor=010101)
![WebRTC](https://img.shields.io/badge/WebRTC-333333.svg?style=for-the-badge&logo=WebRTC&logoColor=white)
![Phaser](https://img.shields.io/badge/Phaser-FFDD00?style=for-the-badge)

## 백엔드

![NestJS](https://img.shields.io/badge/nestjs-%23E0234E.svg?style=for-the-badge&logo=nestjs&logoColor=white)
![Postgres](https://img.shields.io/badge/postgres-%23316192.svg?style=for-the-badge&logo=postgresql&logoColor=white)
![JWT](https://img.shields.io/badge/JWT-black?style=for-the-badge&logo=JSON%20web%20tokens)
![TypeOrm](https://img.shields.io/badge/TypeOrm-3178C6?style=for-the-badge)
![Socket.io](https://img.shields.io/badge/Socket.io-black?style=for-the-badge&logo=socket.io&badgeColor=010101)
![Nginx](https://img.shields.io/badge/nginx-%23009639.svg?style=for-the-badge&logo=nginx&logoColor=white)
![Ncloud](https://img.shields.io/badge/Ncloud-1EC800?style=for-the-badge&logo=naver&logoColor=white)

## 기술 스택 선택 이유

1. `Vite`  
   CRA와 비교하여 빌드 속도가 월등히 빠르기 때문에 생산성 측면에서 좋다고 생각했기 때문에 선택

2. `Emotion`  
   component화 되어 태그명을 알 수 없는 것이 불편하게 느껴졌고, css props를 결합해서 선택적 스타일링을 사용하기 위해서 선택

3. `TypeScript`  
   컴파일 단계에서 오류를 확인할 수 있기 때문에 신뢰성 있는 프로젝트 진행이 가능할 것이라고 판단하여 선택

4. `Phaser`  
   npm 트렌드 확인 결과 고려하던 PixiJs보다 사용량이 우세했고, 게임 개발에 최적화 되어있다고 판단하여 선택

5. `NestJs`  
   일관성있는 Backend 구조를 구성할 수 있으며, 아키텍처가 통일되어 서로 작성한 코드의 구조를 쉽게 파악할 수 있기 때문에 선택

6. `Postgres`  
   SNS 특성상 관계된 데이터 관리 때문에 RDB를 사용하고자 mysql, Postgres를 후보로 두었는데 사용 경험이 없는 Postgres를 경험해보고자 선택

7. `TypeOrm`  
   NestJs와 함께 사용할 때 NestJs Docs에 설명이 잘 되어있고, 구글 검색량도 많았기 때문에 처음 사용해보는 입장에서 보다 사용하기 수월하다고 판단하여 선택

web05-SleepyWoods

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README