친구, 동료 등등 지인분들과 간단한 게임을 통해
짧은 순간의 재미를 느껴보세요!
한 걸음더 가까워 질 수 있습니다 👨🏿🤝👨🏿
node.js 스터디를 하면서 socket 공부를 하게 되었고 , 이를 직접 프로젝트에 적용시켜보기 위해 어떤 프로젝트가 적합할지 생각하다. 캐치마인드가 적합한 프로젝트라고 생각하게 되었고. 직접 socket.io을 통해서 구현 시켜보았습니다.
- 마이페이지 부분에서 사진을 업로드해 crop해서 프로필 이미지를 등록 할 수 있습니다.
- nickname, email, password 수정이 가능합니다.
- 생성된 방에 입장하여 다른 사람들과 실시간으로 게임을 즐길 수 있습니다.
- 방을 생성할수도 있습니다.
- 게임이 시작된 후 그림을 제시어를 받고 제한 시간 안에 그림을 그려서 상대방과 실시간으로 게임을 합니다.
- 상대방이 그리는 그림을 보고 실시간으로 상대방이 무엇을 그리고 있는 지 정답을 맞출 수 있습니다.
- 3점을 달성한 유저가 있을시 게임을 종료합니다.
- 이번판 유저들이 얻은 점수를 모달로 확인 할 수 있습니다.
- 유저들이 서로 점수 경쟁을 할 수 있는 랭킹 시스템 입니다.
npm run devnode app.js
- socket.io 를 통해서 그림그리기,유저 채팅 실시간 통신등 실시간으로 유저들이 게임 중 소통할 수 있도록
구현
- useMemo를 통해서 부모 컴포넌트가 리랜더링 될때 자식컴포넌트가 계속 리랜더링이 되는 것이 아닌
특정 props 가 변했을때만 자식컴포넌트가 리랜더링 될 수 있도록 구현 , 트러블 슈팅 해결한 경험
- custom hooks를 분리해서 더욱 확장성 있고 재사용성이 좋은 코드를 구현경험
- react-query를 사용해서 데이터를 캐싱 하여서 최적화 한 구현 경험
- 방에 유저가 1명도 없을시 방 삭제 로직을 실행시키기 위해 정상적인 소켓 연결 종료 구현 경험
- MongoDB Atlas를 이용해 클라우드 데이터베이스를 설정하고 관리
- Mongoose를 사용하여 데이터베이스 스키마 설계 및 데이터 모델링
- Express.js를 사용하여 RESTful API 설계 및 구현
- JWT(JSON Web Token)를 사용한 사용자 인증 및 권한 부여 기능 구현
- bcrypt 라이브러리를 사용하여 비밀번호 해싱 및 보안 강화
- Postman을 이용하여 API 엔드포인트 테스트 및 디버깅
- Docker를 이용해 애플리케이션을 컨테이너화 및 배포
- Docker 사용 이유 : 개발 환경과 배포 환경의 일치를 위해 사용 ( 디버깅 용이, 환경 간 차이로 인한 문제 최소화 )
- Socket.IO를 사용하여 서버와 클라이언트 간의 실시간 데이터 전송 및 이벤트 처리 구현 ( 채팅, 그림, 방 상태 업데이트 )
|
|
|
|
| 권수혁 | 남용환 | 박성률 | 김준서 |