🏡 동네방네 🏡

"동네방네" 에서 우리의 동네를 소개해요!

”동네 방네”는 줄어든 동네에 대한 애정, 주민들과의 유대감을 증대시키기 위한 서비스입니다.

동네방네는 "동네를 꾸며간다” 에 중점을 두었습니다. 요즘은 인스타 피드, 싸이월드 같이 본인의 무언가를 꾸미고 싶어하는 트렌드입니다. 이를 이용하여 자신의 동네에 주민 들만 알 수 있는 히든 맛집, 카페, 사진 스팟 등을 지도에 드랍하여 본인 동네가 점점 꾸며지는 모습을 볼 수 있고 소통을 통해본인 동네의 애정, 주민들과의 유대감을 키울 수 있습니다. 다른 지역 동네들과 비교를 통해 경쟁할 수 도 있습니다.

배포 주소

개발 버전 : https://dongnaebangnae.vercel.app/
서비스 서버 : https://www.dongnaebangnae.com/

프로젝트 개요

🤩 프로젝트 이름 : 동네방네
📆 개발기간: 2024.03.26 ~ 2024.05.06
🛠️ 언어 : Spring Boot

백엔드 팀원 소개

박경민(팀장)	유재성	김주원	이은미
@kyungmin	@Peter-Yu	@Juwum12	@minnieming

이름	역할	깃허브
박경민	게시물 CRUD( 게시물 조회 무한스크롤),QueryDSL 동적 쿼리를 사용한 게시물 조회(동네소식), 북마크 생성/취소,댓글 조회 무한스크롤, AWS S3 다중이미지 업로드, 지도 이미지 최적화 처리(리사이즈하여 S3 저장 및 조회), 이메일 인증 구현(Redis),ElasticSearch 를 사용한 검색 기능, 예외처리	https://github.com/kyungmin1221
유재성	CI/CD 구축, AWS 서버 관리,Nginx HTTPS, 블루그린 무중단배포, CORS, 프로필이미지, 대댓글, 댓글 조회 무한스크롤, PPT 제작 및 최종 발표	https://github.com/Peter-Yu-0402
김주원	회원가입/ 로그인(SpringSecurity), 소셜 로그인(Kakao), 마이페이지 본인 게시물 조회, SpringSecurity Filter 예외처리, Redis refresh 토큰 관리, 회원 CRUD / 유효성검사 , 좋아요 CRUD, ElasticSearch 를 사용한 검색 기능	https://github.com/juwum12
이은미	좋아요(생성, 삭제), 댓글 (작성, 수정, 삭제), 동네별 점수 조회, WebSocket, SockJs, Stomp, 채팅 CRUD, 페이지네이션, SSE 알림 연결 및 삭제	https://github.com/minnieming

서비스 아키텍처

✅ Back-End

📌 기술적 의사결정

📌 사용 기술	📖 기술 설명
GitHub Actions	GitHub와의 통합이 용이하며 비교적 설정이 간단하고, 빠른 배포와 프로젝트의 규모가 작은 경우 유리하기 때문에 해당 기술을 선택하였습니다.
Blue-Green	사용자에게 영향을 주지 않으면서 신규 버전을 안전하게 테스트하고 점진적으로 전환할 수 있으며, blue-green 두 환경이 독립적이기 때문에 새 버전의 오류가 기존 시스템에 영향을 미치지 않는 이점으로 해당 기술을 선택하였습니다.
Nginx	AWS와 달리, 서버 1대로 블루그린 무중단배포를 구현할 수 있기 때문에 제한된 서버 자원을 최대화하기 위해 nginx 선택
Social Login(Kakao)	사용자의 접근성에 중점을 둔 소셜 로그인(Kakao) 기능 구현을 선택하였습니다.
Spring Security	인증되지 않은 불특정 다수가 접근할 수 있는 점을 고려하여, 개인정보 보안성에 중점을 둔 Spring Security 기반의 로그인 기능 구현을 선택하였습니다.
ElasticSearch	NoSQL 데이터베이스로 활용할 수도 있고 대량의 데이터를 빠르게 검색할 수 있기 때문에 선택
QueryDSL	무한 스크롤을 구현하는 경우, 사용자가 요청하는 페이지나 필터링 조건(예: 특정 지역, 카테고리 등)에 따라 결과가 달라져야 한다. 사용자의 요구에 맞춰 콘텐츠를 동적으로 로드해야 하므로, 이는 동적 쿼리가 필수적이라고 생각하였기 때문에 DSL 을 선택
Redis	사용자는 로그인시 accessToken과 refreshToken을 받는데 서버에서 refresh를 redis에 저장하여 accessToken을 갱신해줌. 로그아웃 시 블랙리스트를 저장하는데 활용. db를 활용하는 것 보다 속도가 빠르고, 간단한 데이터 구조로 저장이 가능하며 만료시간 설정으로 관리에 보다 효율적이기에 선택하였습니다.
WebSocket	HTTP는 단방향 통신으로 클라이언트가 요청을 보내는 경우만 응답할 수 있어 실시간으로 서로 원할때 데이터를 주고 받을 수 있는 WebSocket을 적용
SSE (Server-Sent Events)	단방향 통신만 필요한 알림의 경우, 웹소켓보다 더 경량화되어 쉽게 구현할 수 있고 서버 간의 데이터의 단순한 전달이 목적이므로 SSE 적용
Stomp	STOMP는 메시지의 전송과 구독, 다양한 프로토콜과의 통합이 용이하여 메시지 전송과 관련된 복잡한 작업을 효과적으로 처리하고 설계, 유지보수 할 수 있기 때문에 WebSocket과 함께적용
SockJS	WebSocket이 모든 브라우저에서 지원되지 않는 문제로 인해, 다양한 전송 프로토콜을 지원하고 웹서버와 브라우저 간에 최적의 프로토콜을 선택하여 통신할 수 있는 해당 기술을 선택
AWS S3	CodeDeploy와도 긴밀히 연결하여 배포할 수 있으며, AWS 콘솔에서 관리가 용이하며 이미지 업로드가 잦은 서비스에 맞게 서버 확장성이 뛰어나 선택함
AWS RDS	기존 AWS 서비스(EC2)와 연동 및 관리가 용이하고 자동백업 기능이 있어 선택함

개발 환경

Stacks 🐈

Environment

BackEnd FrameWork

Server

DataBase

Development Tools

Communication

GIT 브랜치 전략

Git-flow 전략을 기반으로 main, develop 브랜치와 feature 보조 브랜치를 운용했습니다.
main, develop, Feat 브랜치로 나누어 개발을 하였습니다.
- main 브랜치는 배포 단계에서만 사용하는 브랜치입니다.
- develop 브랜치는 개발 단계에서 git-flow의 master 역할을 하는 브랜치입니다.
- Feat 브랜치는 기능 단위로 독립적인 개발 환경을 위하여 사용하고 merge 후 각 브랜치를 삭제해주었습니다.