Final 프로젝트

프로젝트 구조

🛠️ Tech Stack

• OS

  • ,
  • Ubuntu 22.04 : AWS EC2 인스턴스 OS
  • iOS, Android : 알람 기능

• Server

  • : Spring Boot 기반 Backend API 서버
  • : React 기반 Frontend API 서버
  • : Spring Boot Reactive Web 기반 채팅 API 서버

• Framework : , , ,

• IDE

  • : Backend 개발
  • : Frontend 개발
  • : 최종 배포판 DB 관리
  • : 채팅 데이터 확인

• DB Tool

  • : 프로젝트 전체 DB
  • : 채팅 메세지 저장을 위한 DB
  • : Localhost 환경에서 DB 테스트

• 개발 언어

  • : Backend 개발 언어
  • : 채팅 기능 개발 언어

• 부수적인 언어

  • : React 개발 언어
  • : AWS Lambda 개발 언어

• API 명세서 및 문서 정리 툴 :

• 버전 관리 및 협업 툴 :

📝 프로젝트 소개

• Recode 서비스는 온라인 스터디 매칭 웹 서비스로 Recode = Let’s coding + Record의 합성어로 같이 코딩하며 공부한 내용을 기록하자는 의미임.
• 본인이 공부하고 싶은 공부 주제(기술 스택)에 맞는 스터디 그룹에 가입 할 수 있게 도와주는 것이 주요 목적임.

📆 개발 기간

• 2023.10.16 ~ 2023.12.20 (약 2개월)

🤔 기존 프로젝트와의 차별점

• 기존 온라인 스터디 매칭 서비스인 Hola 가 존재했으나 홀라에서는 스터디 중개 과정에서 타 플랫폼(카카오톡 오픈 채팅, 이메일 등등)을 아용하여 스터디를 진행해야한다는 점이 아쉬웠음.
• 이 점을 보완하여 Recode 서비스에서는 스터디 룸 내에서 채팅, 자료공유 게시판, 출석체크 기능 등을 제공하여 사용자들이 해당 서비스를 지속적으로 이용하며 스터디를 진행할 수 있도록 서비스를 개선함.

📄 프로젝트 상세내용

📝 Notion Page

프로젝트 기록 Notion 보러가기 : ✏️ Recode Notion page

📆 WBS (Work Breakdown Structure)

Recode WBS

📌 기능 명세서

이미지

📌 API 명세서 Notion_링크

이미지

- 전체 목록 - Request / Response 응답 형식

📌 ERD

이미지

👨‍💻 멤버 구성

• 팀장_백승주 : 프로젝트 전체 PM, Frontend PM
• 팀원_강민희 (본인) : 문서, 일정 정리, Fronted PM 🙋‍♀️
• 팀원_김훈호 : DB PM
• 팀원_정성현 : (프로젝트 진행 중 취업)
• 팀원_한다현 : CI/CD PM, Backend PM
• 팀원_허 찬 : Backend PM

🙋‍♀️ 본인의 담당업무

🌱 Backend

• API 명세서, 기능 명세서 작성
• 사용자 ID 중복 체크
• 공지사항 CRUD 기능 [👀 NoticeService]
• 공지사항 목록 검색 기능
• 사용자 권한별 페이지 접근 제한 및 관리 (Spring Security)
• 스터디룸 생성(그룹 생성) 및 수정 코드 리팩토링
• AWS SNS + Lambda(node.js) + API Gateway 활용한 알림 기능
  • [👀 블로그_기록_1]
  • [👀 블로그_기록_2]
• 알림 발행, 조회, 삭제, 읽음 처리 기능 [👀 NotificationService]

🌱 Frontend

• 공지사항 CRUD 페이지

• 작성 및 수정 시 CKEditor 적용
  

• 스터디룸 생성(그룹 생성) 및 수정 페이지

• FE github Pull Request 승인 관리

• 메인페이지 기술 스택별 스터디 목록 필터링 기능 (비동기 처리)
  

• 알림 조회, 삭제, 읽음 처리 기능 페이지, 헤더 알림 개수 뱃지 생성 기능
  

🌱 ETC

• 문서 정리(회의록, 공유문서, WBS), 일정 관리 담당

📈 결과 및 성과 (시사점)

• 직무 이해 : REST API 와 Model 객체를 혼용하여 사용했던 이전 ver1 의 프로젝트를 개선하여 JSON 데이터를 반환하도록 전면 수정.
  • REST API 활용 능력 증진
  • 서버 간 통신에 대한 정확한 이해
• 협업능력 증진 : 큰 규모의 프로젝트를 진행을 통한 소통의 중요성 인지 및 설계 단계의 중요성 인식
• 성장 : 프론트엔드를 직접 React 로 구현하며 새로운 기술 스택 학습 및 활용능력 증진
• 문제해결 능력 : 팀원 간의 단합을 위해 문서활용을 통한 소통 방법 마련 및 협업 툴 활용능력 증진
  • Notion 활용 : 공유할 내용, API 및 기능 명세서 진행상황 시각화, 각종 자료 공유페이지 생성
  • Github 활용 : 이전 프로젝트에서 Git을 효과적으로 활용하지 못해 아쉬움이 많이 남았었는데 이번 프로젝트를 통해 Git 활용능력을 증진

👩‍🎓 느낀 점

• 직접 웹 애플리케이션을 만들어보는 경험을 통해서 짧은 시간에 실력이 많이 향상되는 경험을 했다.
• AWS SNS 기능을 활용하기 위해서 Youtube, Blog, 문서 등을 찾아보며 기능 구현에 힘쓰는 경험을 통해 엄청난 성취감을 느꼈다.
• 내가 직접 만들어보고 싶었던 기능을 설계과정에서 제안하고 직접 구현까지 해보았는데, 처음에는 막연했던 생각들이 점점 코드로 구현되고 정상적으로 작동되는 기능을 경험하는 과정이 매우 흥미로웠다.
• 웹 애플리케이션이 정상적으로 작동하도록 노력하는 과정에서 개발을 위해서는 많은 지식이 바탕이 되어야 한다는 것을 깨달았다. 이를 통해 "아는만큼 보인다" 라는 나만의 모토를 생각해낼 수 있었다.

🏫 새롭게 배운 점

• 서버간 통신으로 FrontEnd 서버와 BackEnd 서버를 두며 FrontEnd 를 React라는 새로운 기술로 구현하게 되었는데, 새로운 기술을 배우고, 적용하는 과정이 매우 흥미로웠다. 코드를 유지보수가 용이하게 짜고 싶다는 생각에 Component, Service, Context 등으로 로직을 분리해서 작성하기 위해 노력했다. 그 결과 코드에 오류가 발생했을 때 데이터를 불러오는 함수들에 문제가 있는지, 화면을 랜더링 하는 부분에 오류가 있는지 쉽게 찾아낼 수 있었다.
• 메인 페이지 목록 필터링 기능을 구현하는 과정에서 필터링 할 때마다 서버에서 데이터를 불러와야하는 건지 고민이 많았는데 이를 비동기로 처리하여 이미 불러온 정보들을 필터링 조건에 따라 데이터를 불러올 수 있도록 간단하게 처리하여 서버로 가는 요청을 기능에 따라 적절하게 줄이는 방법을 알게되었다.