<aside>
🐝 **프로젝트명: DevHive
프로젝트 기획 기간** 2023.08.03 - 2023.08.12
프로젝트 개발 기간 2023.08.13 - 2023.09.13
GitHub | **Video** | **HomePage**
</aside>
🚩 프로젝트 목표 및 중점 포인트
- 실제 커뮤니티 서비스 같은 반응형 웹 구현
- 개발직무로 처음으로 경험해보는 별도로 서버를 구현하는 혐업 프로젝트였기에 실제로 서비스되는 커뮤니티처럼 UI를 완성도 있게
구현하는 것이 목표였습니다. 별도의 css 라이브러리를 활용하지 않고 직접 모든 ui를 구현하였습니다.
- 백엔드 개발자와의 협업 경험
- fake API와 서버리스 서비스만 사용해보았기 때문에, 해당 프로젝트는 백엔드 개발자분들과 소통하며 API를 연동해보며 서버와 클라이언트 사이에서 발생하는 오류를 해결해볼 수 있는 좋은 기회였습니다. 프로젝트에서 팀원들과 자주 소통하며 혼자 구현할 수 없었던 기능을 많이 구현해보고 경험해보는 것이 목표였습니다.
- 경험해보지 않았던 프레임워크와 라이브러리 사용하기
- 기존에 사용해본 라이브러리와 프레임워크가 아닌 프로젝트를 하면서 새롭게 배워보고자 NextJS와 Recoil, React-query, react-hook-form, MSW를 사용하였습니다. nextJS를 사용하면서 폴더 구조와 라우터 방식, SSR을 경험해볼 수 있었고, 프로젝트에서 사용자가 입력해야할 입력 폼이 상당히 많았는데 react-hook-form으로 폼의 에러, 입력값에 대해 효과적으로 관리할 수 있었습니다.
- Recoil은 atom과 usehook들을 사용해서 기존에 사용했었던 리덕스 툴킷보다 더 쉽게 적용할 수 있어서 편리했고, react-query는 서버에서 받아오는 데이터들의 상태를 알 수 있어서 용이했고 특히, mutation 함수를 사용해서 데이터를 삭제할 때 onMutate를 사용하여 낙관적 업데이트를 통해 ui가 바로 변화하는 점이 좋았습니다.
- MSW를 사용하여 서버와 연동 전에 테스트를 해볼 수 있었고, 현 홈페이지 또한 서버를 유지할 수 없어서 MSW로 구현되어 있습니다.
👥 Devee 팀원
🛗 개요
<aside>
📌 기획의도 및 기대효과
개발자 지망생과 주니어 개발자는 협업 자체를 경험하기 쉽지 않습니다.
이 생각에서부터 출발하여, 온라인으로 프로젝트 인원을 구인하는 서비스를 기획하게 되었습니다.
사용자들은 각각 모집 분야(FE/BE), 모집 기술, 지역(온라인 or 오프라인)을 기준으로 프로젝트 모집 공고를 만들거나 만들어진 프로젝트에 참가 가능합니다.
프로젝트를 완료한 뒤에는 함께 한 팀원들에 대해 평가를 진행하여 유저들에게 받은 평가를 통해 자신의 역량을 증명할 수 있으며, 뱃지와 벌집 시스템, 그리고 이 두 요소를 종합하여 점수를 매기는 랭킹 시스템을 통해 프로젝트를 완료할 때마다 쌓여가는 벌집들을 보여 개인의 성취감도 달성할 수 있습니다.
</aside>
<aside>
📢 차별점
1️⃣ 퇴출 시스템 → 퇴출 전적에 따른 활동 제한
2️⃣ 레벨, 업적, 랭킹 시스템 → 사용자들에게 동기 부여
3️⃣ 팀원 리뷰 시스템
</aside>
🏛️ 프로젝트 아키텍처
🛠️ 기능
유저 가입 및 알림
마이페이지
프로젝트
랭킹, 뱃지(업적시스템)
관리자
📐 와이어프레임
와이어프레임
⚙️ 기술 스택
FE
Next.js : 13.4 page router
TypeScript
css module : 스타일링
Axios : HTTP 통신
Recoil : 클라이언트 상태 관리
React Query : 서버 상태 관리
StompJS, SockJS : 채팅
Figma : 와이어 프레임 및 디자인
BE
Spring MVC, Spring Boot, Spring Security, Spring Data JPA(Hibernate)
Spring scheduler, Spring batch : 서버 내부 일괄 처리
Spring SSE : 알림기능
MySQL
Gradle
AWS S3 : 사용자 프로필 사진
AWS EC2, Docker : 배포
GitHub Action, Docker : CI / CD
WebSocket, Stomp : 채팅기능
JWT : 로그인 토큰
oAuth : 외부 로그인
✨ 주요기능 & 기술 특장점
<aside>
🚪 팀원 퇴출 투표
- 프로젝트 진행 중, 특정 팀원이 불성실하게 참여하는 경우(잠수, 참가 후 개발 미참여) 퇴출 투표 진행 가능투표 대상자를 제외한 팀원들 모두 투표하여 과반수 이상 찬성하는 경우 투표 대상 팀원은 해당 프로젝트에서 퇴출
- 퇴출된 유저는 자신의 퇴출전적 수 * 1주 동안 비활성 상태로 변경(기간동안 로그인 시도해도 로그인 차단)
- 퇴출전적 10회가 되는 경우 계정 영구 정지
- 팀장(프로젝트 모집 작성자)은 퇴출 전적을 포함한 신청자의 정보를 고려하여 팀원 모집 가능
</aside>
<aside>
📨 팀원 리뷰
- 프로젝트 완료 후 팀원 평가 가능(5가지의 평가 항목)
- 각 평가 항목 마다 누적 점수를 가지고 있으며, 일정 점수에 도달하면 각 평가 항목에 해당하는 업적의 레벨 상승
- 모든 팀원에게 리뷰를 받은 유저는 리뷰 총점의 평균 점수를 유저의 랭킹포인트로 산정
- 퇴출 전적과 마찬가지로 팀원 모집 시 신청자의 역량 판단 가능
</aside>
<aside>
📢 알림 SSE
</aside>
<aside>
💬 채팅 sock.js Stomp.js
</aside>
🥺 트러블 슈팅
트러블 슈팅
🎥 시연영상
https://youtu.be/pBoW2U9gNpI?si=JRDuzI8poRC6ichF