[221218] 최종프로젝트 회고

Younseo·2022년 12월 18일
붐비붐비최종프로젝트
0

최종프로젝트

목록 보기
2/2

👀 welcome to boombiboombi 👀

서울시 도시 데이터 공공 API 기반 정보제공형 커뮤니티

최고의 프로젝트상 받아버렸다.. 찢었다..!!!!

👨‍👩‍👧‍👦 Our Team

정성우장윤서유도원오기쁨임효진이지혜
@anfrosus@Younddo@dwon5001@joyfive@BLAKE198492aksjdffg@naver.com
VL / BEBEBETL / FEFEDS

👊 프로젝트 노션 바로가기
👊 원페이지 노션 바로가기
💜 프론트엔드 깃허브 바로가기
💜 백엔드 깃허브 바로가기

프로젝트 기능

🛡 OAuth2 소셜로그인 (kakao, naver)

  • Kakao와 Naver계정을 통한 간편 로그인이 가능합니다.
  • Kakao Email과 Naver Email 이 동일한 경우 하나의 계정으로 통합하여 사용이 가능합니다.
  • 하나의 계정에 Kakao 와 Naver 모두 연동되어있는 경우 두 곳 모두에서 연동이 해제되며 서비스에서 탈퇴처리 됩니다.
  • 작성한 게시글, 댓글 등은 사라지지 않으며 탈퇴한계정으로 표시됩니다(회원 정보는 삭제됨).
    로그인1

📊 서울시 open api를 활용한 실시간 정보제공 기능

  • 스케쥴러를 활용하여 5분마다 데이터를 수집합니다.
  • 2-1. 구 별 코로나 정보, spot 별 날씨 정보 제공 : 저장되어 있는 데이터를 실시간으로 제공합니다.
  • 2-2. 전체 데이터의 누적 통계를 활용한 정보제공 기능 : 수집한 데이터를 기반으로 혼잡도 점수를 산정 하여 순위 통계를 제공합니다.
  • 2-3. spot 별 누적 + 실시간 정보제공 기능 : 지난주 같은 요일의 혼잡도, 인구수를 비교하여 실시간 인구 추이를 제공합니다.
    데이터 보여주기

🗨 구 별 커뮤니티 (CRUD)

  • 서울시 25개 구 별 커뮤니티를 제공합니다.
  • 1.게시글, 댓글 작성/수정/삭제/조회 : 다중 이미지 업로드가 가능하며 카테고리 선택과 태그추가 기능을 지원합니다.
  • 2.좋아요 : 게시글, 댓글을 좋아요 할 수 있으며 이에대한 알림기능도 지원합니다.
  • 3.북마크 : 내가 자주 사용하는 구를 북마크 할 수 있습니다. 북마크한 지역의 게시글이 추가되면 실시간 알림을 제공합니다.
    글쓰기1
    글쓰기2

🔍 검색 기능(내용+태그, 태그 검색기능)

  • QueryDSL을 활용하여 동적 쿼리작성이 가능하도록 구현하였습니다.
  • 게시글의 내용을 검색하거나 태그로 검색이 가능합니다. 작성자 검색도 가능합니다.
    검색기능 찐

👨‍💻 마이페이지 기능 (내가 작성한 글, 내가 좋아요한 글, 내 게시글에 달린 댓글, 내 정보 수정)

  • 마이페이지에서 내가 작성한글, 내가 좋아요한 글, 내 게시글에 달린 댓글을 확인할 수 있으며 프로필사진과 닉네임을 수정할 수 있습니다.
  • 내 게시글에 새로운 댓글이 달리면 새로운 알림이 등록됩니다.
    마이페이지

📢 신고 기능 (사용자, 닉네임, 게시글, 댓글)

  • 악성 사용자, 불건전한 닉네임, 게시글, 댓글을 내용과 함께 신고할 수 있습니다.
  • 본인은 본인을 신고할 수 없으며 같은 건의 신고에 대해서는 계정 하나당 1회로 제한됩니다.
  • 항목별 일정 횟수가 지나게 되면 강제로 닉네임을 변경하거나, 내용을 비공개 처리하여 보여주게 됩니다.
    신고기능

☑ 무한스크롤

무한스크롤

💬 WebSocket을 활용한 실시간 채팅

  • 실시간 채팅이 가능합니다.
  • 최근에 대화가 이루어진 순서대로 채팅방이 보여집니다.
  • 상대방이 나간 후에 새로운 메세지가 등록되면 기존의 채팅이 이어집니다.
  • 채팅방에서 모두 나가게 되면 채팅 내역은 삭제되며 다시 대화를 시작하면 새로운 채팅방이 생성됩니다.
    실시간채팅1
    실시간채팅2

🔔 SSE를 활용한 실시간 알림

  • 북마크한 게시판에 새로운 글이 등록되면 실시간 알림을 제공하며 알림을 클릭하면 해당 게시글로 이동합니다.
  • 내가 작성한 게시글에 좋아요 및 댓글이 달리면 실시간 알림을 제공하며 알림을 클릭하면 해당 게시글로 이동합니다.
  • 실시간 채팅이 오면 실시간 알림을 제공하며 알림을 클릭하면 해당 채팅방으로 이동합니다.
    실시간알림1
    실시간알림2

적용 기술

◻ QueryDSL _ BE

정렬, 검색어 등에 따른 동적 쿼리 작성을 위하여 QueryDSL 도입하여 활용했습니다.

◻ Swagger

프론트엔드와 정확하고 원활한 소통을 위하여 스웨거를 도입하여 적용하였습니다.
BoombiBoombi Swagger

◻ Sentry를 통한 에러 로그 확인 및 공유

Sentry를 활용하여 에러로그를 쉽게 확인/공유 할 수 있었습니다.
Sentry Image

◻ Github Actions & Code Deploy (CI/CD) _ BE

자동 빌드/배포를 위하여 깃허브 액션과 코드디플로이를 활용하여 CI/CD 를 구축했습니다.
AWS CodeDeploy

◻ Nginx (무중단배포) _ BE

서비스 운영중 업데이트를 위한 재배포시 중단없는 서비스 제공을 위하여 Nginx Shell Script를 활용해 무중단배포를 구현하였습니다.

◻ Scheduler를 통한 open api 호출 _ BE

5분마다 변동되는 데이터를 수집/제공/관리 하기 위하여 스케쥴러를 활용하였습니다.

◻ Redis _ BE

연속된 요청으로 인한 DB병목을 해소하고 RefreshToken 등 소멸기간이 존재하는 데이터의 TimeToLive 관리를 용이하게 할 수 있도록 Redis를 도입하였습니다.


⚙ Development Environment

react: ^18.2.0 recoil: ^0.7.6, react-router-dom: ^6.4.5 webstomp-client: ^1.2.6 axios: ^1.1.3
event-source-polyfill: ^1.0.31 browser-image-compression: ^2.0.0 react-chartjs-2: 5.0.1 react-slick: ^0.29.0 tailwindcss: ^3.2.4

Java 11 SpringBoot 2.7.5 Ubuntu 20.04.5 LTS QueryDSL 5.0


🚨 Trouble Shooting

◻ FE

다중 이미지 등록/수정을 위한 이미지 업로드 훅 수정 Wiki >

태그 State 관리 Wiki >

SSE-다중 connect 현상 Wiki >

◻ BE

Join Fetch 순서 보장 문제 WIKI >

NGINX ReverseProxy를 활용한 무중단배포 시 Cors, SSE 설정 WIKI >

JPA N+1 문제 WIKI >

Open Api data WIKI >

Token Reissue WIKI >

Redis 크롤러 봇 및 인증설정 WIKI >



🤷‍♀️💭 Concern

◻ FE

Tailwind CSS Wiki >

Redux -> Recoil refactoring Wiki >

◻ BE

Access Token and Refresh Token Reissue Process WIKI >

Comment & Like Table Structure WIKI >

S3 Image Upload Control WIKI >

Validation Logic WIKI >



🌐 Architecture

image


📋 ERD Diagram

75KzfBPRqYgYoW9qT


로고_세로형



👀 프로젝트 회고 👀

프로젝트 경험

• 기술목록 : SpringBoot, SpringDataJpa, JWT, OAuth2 ,Nginx, redis, MySql, AWS EC2 • S3 • CodeDeploy • RDS, GitHubAction, WebSocket(Stomp), SSE, Scheduler, QueryDsl, Sentry

• 서울시 실시간 도시데이터 공공 API 기반 정보제공형 커뮤니티, 붐비붐비!
• 실제 유저를 모집하여 총 182명의 유저, 63건의 응답 및 개선요청사항 83건 수집 달성
• 유저 테스트 기반 유효피드백 58건 중 46건의 피드백 반영 개선 경험
• 5분 단위로 업데이트되는 데이터를 수집 • 저장하여 일 14,112개 총 13만건 정도의 데이터를 핸들링
일주일동안 제공되는 데이터가 변하지 않는 통계데이터는 Redis에 저장, DB병목 최소화
• SSE로 실시간 알림, WebSocket으로 실시간 채팅 기능 제공
• GitHubActions & CodeDeploy 활용한 CI/CD & Nginx ReverseProxy로 자동배포, 무중단배포 구현
• 적절한 fetch join 사용, default_batch_fetch_size 설정으로 Query문 최소화, N+1 문제 해결
• QueryDsl 을 활용하여 정렬, 검색 등 다양한 조건에 따른 동적쿼리 작성

프로젝트 후기

좋은 사람들을 최종프로젝트에서 만나 열심히 달렸던 6주!
가장 적은 인원이었음에도 불구하고 부족하지 않은 양과 질의 멋진 프로젝트를 만들어 냈다.
우리 조원 모두 "할 수 있을지 모르겠지만 일단 해보자"라는 한계를 정해두지 않는 마인드 덕에 프로젝트 설계할 때 구현하고 싶었던 것을 모두 구현하였다.




◻ Copyright ©2022 Hang-Hae99 9th Final : C team 4 all rights reserved.

profile
Younseo
이전 포스트

[WIL] 최종프로젝트 MVP개발범위

0개의 댓글