Overview
로켓단의 한국 정복 피드 + 회원 기능 영상
로켓단의 한국 정복 채팅 기능 영상
Project
프로젝트 소개
•
가장 최신의 피드와 지역(시도, 구) 검색을 통해 원하는 지역의 피드를 한번에 볼 수 있습니다.
•
나의 피드 페이지를 통해 여행에서 느꼈던 행복한 추억을 공유하고 저장할 수 있습니다.
•
피드에 지역을 지정해서, 내가 방문한 지역을 지도에서 한 눈에 확인 할 수 있습니다.
•
가고 싶은 지역의 채팅방을 개설해 동행을 모아 또 다른 추억을 만들 수 있습니다.
•
여행을 추억하고, 또 여행을 계획하여, 과거와 미래를 한 번에 관리할 수 있는 서비스입니다.
기술 스택
Front-end
React
tailwindcss
styled-components
recoil
react-router-dom
stompJS
Back-end
SpringBoot Framework
Spring batch
Spring Security
JUnit
JWT
Oauth2
java
MySQL
MongoDB
Redis
JPA
QueryDsl
Swagger
RabbitMQ
Production
Jenkins
Nginx
AWS EC2
AWS RDS
AWS ELB
AWS S3
Docker
MongoDB Atlas
아키텍처
ERD
프로젝트 주요 기능
피드 리스트
•
특정 지역을 선택하지 않은 경우에는 전체 피드 리스트를 최신 순으로 보여줍니다.
•
지역을 선택한 경우에는 해당 지역의 피드 리스트를 최신 순으로 보여줍니다.
이미지
피드 상세
•
피드 상세에서 피드 작성자를 팔로잉 및 언팔로잉을 할 수 있습니다.
•
피드가 마음에 들었다면, 피드 좋아요와 좋아요 취소를 통해 호감 표현이 가능합니다.
•
피드에 댓글을 달아, 피드에 대한 의견 표현이 가능합니다.
•
또한 피드에 달린 댓글에도 좋아요와 좋아요 취소를 통해 호감 표현을 할 수 있습니다.
•
피드 작성자라면 피드 상세 페이지에서 피드 수정 및 삭제가 가능합니다.
이미지
피드 생성
•
각 피드에는 제목, 내용, 이미지 그리고 지역을 선택할 수 있습니다.
이미지를 첨부하면 미리보기 기능을 통해 업로드 할 이미지를 확인 할 수 있습니다.
이미지
피드 수정
•
피드 수정에는 기존 피드의 내용을 그대로 가져와 손쉽게 수정 가능합니다.
이미지를 제외한 모든 부분을 수정할 수 있습니다.
이미지
댓글 수정 + 댓글 페이지네이션
•
댓글 작성자라면 피드 댓글을 수정 및 삭제를 할 수 있습니다.
이미지
내 피드 목록 + 지도
•
내 피드 목록 페이지에서는 나만의 피드를 한눈에 확인 할 수 있습니다.
•
특정 지역을 선택하지 않은 경우에는, 나의 피드 리스트 전체를 최신 순으로 보여줍니다.
•
지역을 선택한 경우에는, 해당 지역을 추억한 나의 피드 리스트들을 최신 순으로 보여줍니다.
•
또한 지도에 마크를 통해, 해당 지역에 해당하는 내 피드의 개수를 확인 할 수 있습니다.
이미지
회원 상세 + 회원 정보 수정
•
회원 상세에서 나의 팔로우, 팔로잉 목록을 확인할 수 있습니다.
•
개인 정보는 닉네임과 프로필 이미지를 수정할 수 있습니다.
이미지
OAuth 로그인
•
OAuth를 활용한 소셜 로그인 서비스를 제공합니다. (카카오, 네이버, 구글)
•
별도의 회원가입 없이 소셜 계정을 통해 쉽게 로그인하여 서비스를 이용하실 수 있습니다.
이미지
채팅방
•
채팅방 상단의 지도는 내가 참여한 채팅방의 지역 위치를 표시해 줍니다.
•
채팅방은 제목, 최대 허용 인원수, 여행 시작 날짜와 여행 마지막 날짜, 여행 지역에 대한 정보를 설정하여 생성합니다.
•
지역 채팅 리스트에서 생성 된 채팅방 리스트를 한 눈에 확인 할 수 있습니다.
•
생성 된 채팅방의 조건을 한 눈에 확인 할 수 있습니다.
•
채팅방의 메시지들은 Redis에 저장하여, 채팅방 페이지를 잠시 비우더라도, 그 동안 이루어진 대화 내용을 볼 수 있습니다.
•
오래된 데이터는 MongoDB에 저장하여, 오래 전 대화 내용 또한 확인 하실 수 있습니다.
이미지
채팅 서비스 Flow 이미지
CI/CD
•
jenkins pipeline을 구축하여 CI/CD 적용
이미지
Load Balancing
•
AWS ELB를 활용 하여 Load Balancing 적용 후 부하 테스트
•
200초간 동시 접속자 수 200명을 기준으로 4만개의 요청 중 4개 실패
•
성공한 요청 중 응답속도 50ms 이하 95%, 90ms 이하 99%
이미지
기술 특장점
•
backend
◦
CRUD 구현을 통해, MVC 패턴 활용
◦
OAUTH2를 이용한 소셜 로그인 기능
◦
RabbitMQ와 WebSocket Stomp를 활용한 chatting 기능
◦
Spring Batch를 활용한 Redis → MongoDB chatting message back up
◦
Querydsl을 활용하여 동적쿼리 작성 및 쿼리 최적화
◦
Jenkins pipeline을 구축하여 CI/CD 적용
◦
Nginx, AWS ELB를 활용하여 Load Balancing 적용
•
frontend
◦
recoil을 활용하여 전역 상태 관리
◦
recoil-persist를 이용해 localStorage에 일부 상태 저장하여 로그인 하는 동안 안정적으로 상태 관리
◦
피드, 채팅, 팔로우 리스트는 쿼리스트링 또는 react-js-pagination api를 이용해 페이지네이션 기능 구현
◦
카카오 지도 api 연동하여 커스텀 마커 표시, 클러스터러 기능 사용
◦
custom hook을 만들어서 로그인이 먼저 필요한 페이지에서 반복 사용
◦
Intersection Observer로 채팅방 이전 메세지 불러오기 무한 스크롤 구현
◦
Backend 와의 통신 방식 RESTful API 적용
Trouble Shooting
배포에서 Http, Https 의 문제
Quality Assurance