mooyah5 / yeo-bo Goto Github PK

나와 너의 취향을 담은 여행 보따리, 소중한 추억을 더 가치있게

• 1차 평가

• 2차 평가

• 3차 평가

• 모바일웹으로 구현

PC의 경우 chrome 개발자도구의 Toggle device toolbar를 사용해주세요.
화면비 20 : 9 (412 x 914, 412 x 915), [S20 Ultra, S21, A51, S20+, S21U]를 기준으로 제작되었습니다.

Toggle device toolbar에서도 비율이 맞지 않다면 Toggle device toolbar를 다시 ON/OFF 해주시면 정상적으로 보여집니다.

• Notion

• Figma

• 📚빅데이터(추천 시스템) 프로젝트

  

  • 사용자 리뷰 기반의 추천 서비스
  • 개인별 맞춤 추천 서비스를 구현하는 것을 목표로 한다.(사용자 리뷰 기반의 추천 서비스)
  • Python으로 데이터를 가공, 분석, 후처리하여 사용자에게 알맞은 데이터를 제공한다.
  • 여러 라이브러리를 사용하여 데이터를 이해하기 쉽도록 시각화한다.

• 프로젝트 기간(2022.08.29 ~ 10.06, 6주)

  • 기획 및 환경 설정 : 08.29 ~ 09.09(2주)
  • 서비스 주요 기능 구현 : 09.12 ~ 09.30(3주)
  • 기능 보완 및 버그 수정 : 10.03 ~ 10.07(1주)

• 서비스 아키텍쳐(예정)

• API 명세서 : Swagger(예정)

여기 들어갈 말 체크

백한나(팀장)😀	나장엽😏	이준호😎
FE_Leader		Data

조영훈(BE_Leader)😙	이지은😝	안다슬😁
BE_Leader & Data

코로나로 인한 여행지 제한으로 외국에 나가지 못하니, 국내 여행지를 찾고 싶은 사람들!

연인, 가족, 친구 단위의 공통 취향을 찾기 어려워서 미루고 있는 사람들!

어디를 여행할 지 몰라 고민하여 맞춤형 여행지를 추천받고 싶은 사람들!

여보(여행보따리)는 그런 사용자들을 위해 만들어졌습니다.

• 이메일 형식(@, . 포함)이 아닐 시 형식을 요구합니다.
• 상단에서 여행지, 보따리, 사용자 검색이 가능합니다.
• 로그인 시 최근 가장 높은 평점을 준 여행지 유사도 기반 여행지 6곳을 함께 소개합니다.
• 또한, 가장 많이 다녀온(평점을 남긴) 여행 지역을 기준으로 인기 있는 지역 6곳을 추천합니다.
• 좋아요를 많이 받은 인기 보따리 TOP4를 제공합니다.

• 이메일형식, 필수내용기입여부, 비밀번호 특수문자 1자 이상 및 전체 8자 이상, 비밀번호 재입력 일치여부를 모두 확인합니다.
• 닉네임 미기입 시 이메일의 앞부분을 닉네임으로 대체합니다.

• 여행지, 보따리, 사용자 카테고리 별 검색이 가능합니다.
• 검색된 여행지들의 평점 입력, 여행지 및 보따리 상세보기 페이지로 이동 등이 가능합니다.

• 여행지 사진, 이름, 주소, 평점, 설명을 확인할 수 있습니다.

• 8가지 카테고리 (공원, 산, 바다, 유원지, 휴식, 이색, 명소, 문화) 중 선호 카테고리를 선택합니다.

• 해당 카테고리에 해당하는 여행지들이 랜덤으로 출력됩니다. 담기 버튼을 눌러 여러 여행지를 담습니다.

• 선택한 여행지와 관련하여 추천된 여행지 4곳을 함께 보따리에 보따리 제목, 설명과 함께 저장할 수 있습니다.

• 나의 연인 혹은 친구와 함께 여행을 가고 싶을 때,
• 내가 만든 보따리와 좋아요한 보따리들 중 하나씩 선택하여 보따리를 합쳐 새롭게 추천 받아 보관할 수 있습니다.

• 보따리 이름, 메모(내용), 담긴 여행지들을 확인할 수 있고, 여행지 상세보기 페이지로 이동 또한 가능합니다.

• 회원가입 시 지정된 닉네임, 나이, 성별을 확인할 수 있습니다.
• 생성한 보따리, 좋아요한 보따리, 방문한 여행지 정보를 모아서 확인할 수 있습니다.
• 로그아웃, 회원탈퇴(계정 삭제)가 가능합니다.

• 서비스 설명 : 나와 너의 취향을 담은 여행 보따리, 소중한 추억을 더 가치있게

  빅데이터 기반 사용자 맞춤형 여행지 추천 서비스

• 주요 기능

  • 한국관광공사의 API를 통한 37,334개의 여행지를 사용자(커플) 고려 4,286개 여행지로 정제

  • 보따리를 활용한 맞춤형 여행지 추천

  • 보따리 합치기 기능을 이용한 동반 여행 시 공통 취향 기반 여행지 추천

Frontend

• @emotion/react @11.10.4

• @emotion/styled @11.10.4

• @mui/icons-material @5.10.6

• @mui/material @5.10.6

• @react-oauth/google @0.2.8

• @reduxjs/toolkit @1.8.5

• @testing-library/jest-dom @5.16.5

• @testing-library/react @13.4.0

• @testing-library/user-event @13.5.0

• @axios @0.27.2

• @jwt-decode @3.1.2

• @node-sass @7.0.3

• @react @18.2.0

• @react-cookie @4.1.1

• @react-device-detect @2.2.2

• @react-dom @18.2.0

• @react-icons @4.4.0

• @react-modal @3.15.1

• @react-redux @8.0.2

• @react-router-dom @6.4.0

• @react-scripts @5.0.1

• @react-star-ratings @2.3.0

• @redux @4.2.0

• @redux-persist @6.0.0

• @store-js @2.0.4

• @styled-components @5.3.6

• @swiper @8.4.2

• @web-vitals @2.1.4

BackEnd

• JAVA 11

• Spring Boot

• JPA

• Maria DB

Data

• @Django @4.1.1

• @django-cors-headers @3.13.0

• @django-cors-headers @3.13.0

• @djangorestframework @3.13.1

• @gunicorn @20.1.0

• @mysqlclient @2.1.1

• @numpy @1.23.3

• @pandas @1.5.0

• @PyMySQL @1.0.2

• @SQLAlchemy @1.4.41

• @websockets @10.3

CI/CD

• AWS EC2

• docker

• nginx

• jenkins

서비스 아키텍처와 같이, Jenkins의 pipeline을 이용하여 자동 배포를 구축하였음. Gitlab webhook을 설정하여 Jenkins에 빌드 트리거를 설정했고, 이에 따라 Gitlab에서 master 브랜치에 push하면 자동으로 배포될 수 있도록 구축하여 개발하는 과정에서 배포로 인한 시간 낭비를 줄였습니다. 또한 프론트엔드인 Vue3는 Nginx와 함께 docker image로 빌드하여 배포하였고, 백엔드 및 redis, openvidu 또한 docker container로 배포하였습니다. 그리고 Nginx와 letsencrypt를 이용하여 ssl 인증서를 적용하였고, 프론트엔드는 443(https)로 프록시로 분기시켰고 백엔드는 /api 경로로 프록시를 걸어줬습니다.

• Front-end

  컴포넌트 기반으로 화면을 구성하여 빠르고 효율적으로 화면을 구성하였습니다. 선언형으로 코드를 작성하여 지역변수의 선언을 줄이고, map, filter와 같은 함수를 사용하여 간결하고 명확하게 작성하였습니다. 사용자 관점에서 사용자가 불편함을 느끼지않게 하기 위해 화면의 depth를 3 이하로 했습니다

• Back-end JPA 성능을 향상시키기 위해 for문으로 여러번 select문이 도는 경우에 최대한 JOIN문으로 돌게한다거나, select문으로 조회할 때 엔티티 전체를 조회하는 것을 지양하는 등의 간단한 규칙을 지켰습니다.

• Data 한국관광공사의 OpenAPI를 활용하였습니다. 일일 트래픽 1,000건은 빅데이터를 처리하기에 적절하지 않아, 한국관광공사와 컨택하여 일일 25,000건의 API를 제공받을 수 있도록 협의하였습니다. 약 38,000여개의 여행지 리스트에서 커플이라는 페르소나를 적용하여 4,286개의 여행지로 정제하였습니다. Python의 pandas를 활용하여 빅데이터 전처리 및 정제작업을 수행하였습니다. 컨텐츠 기반 필터랑과 협업필터링을 함께 활용하여 추천의 정확성을 높이고자 하였습니다. dummy 데이터를 만들어서 임의의 유사도를 계산하여 추천에 반영되는지 확인하였습니다. 페르소나에 해당하는 데이터를 설정하여, 미리 설계된 유사도와 추천이 제대로 반영되었는지 확인하였습니다. Django 서버를 따로 구현하여, 빅데이터를 처리하는 로직과 관련된 부분을 분리하였습니다. (유저의 평점 기반 유사도를 Django에서 계산 후 처리하여 속도를 높였습니다.)

• 배포 docker, Nginx, jenkins를 이용하여 자동 무중단 배포를 구현 하였습니다. 백엔드를 docker 컨테이너로 배포하였고, 프론트는 Nginx와 함께 docker 컨테이너로 배포하였습니다.

• Git

• Jira

• Notion

• MatterMost

• GatherTown

• Webex

Figma

main

배포 및 최종본, 출시 버전 브랜치 (배포 가능한 상태만 관리)

develop (from main)

다음 출시 버전을 개발/종합하는 브랜치

front_dev/back_dev/data_dev (from develop)

프론트엔드, 백엔드, 데이터 각각 나눠진 폴더를 구분하기 위한 브런치

feature (from front_dev/back_dev/data_dev)

기능을 개발하는 브랜치

git commit -m '[F/B/D/ETC] 타입_제목  ### 제목은 최대 50 글자까지만 입력 ###

#이슈번호
본문내용입니다. 한 줄에 72글자까지 작성 제한'
### 본문은 제목에서 한 줄 띄고, 한 줄에 72자까지만 입력 ###

# <타입> 리스트
#   ADD : 추가(새로운 기능)
#   UPDATE : 수정(기능 수정중임)
#   FIX     : 버그 (버그 수정)
#   REFACTOR: 리팩토링
#   STYLE   : 스타일 (코드 형식, 세미콜론 추가: 비즈니스 로직에 변경 없음)
#   DOCS    : 문서 (문서 추가, 수정, 삭제)
#   TEST    : 테스트 (테스트 코드 추가, 수정, 삭제: 비즈니스 로직에 변경 없음)
#   CH   : 기타 변경사항 (빌드 스크립트 수정 등)
#   COMPLETE : 완료
# ------------------
#     타입은 대문자로
#     제목 끝에 마침표(.) 금지
#     제목과 본문을 한 줄 띄워 분리하기
#     본문은 "어떻게" 보다 "무엇을", "왜"를 설명한다.
# ------------------

#예시
[F] : ADD_main.html 메인페이지 작성함.
[B] : ADD_main.html
[B] : ADD_dao, dto, service 수정 
[ETC] : DOCS_20220510.md 5월 10일 회의록 작성

협업 및 일정, 업무 관리를 위해 Jira를 사용하였습니다. 스프린트 기간동안 진행되어야 할 주 단위 계획을 짜고, 진행할 이슈들을 스프린트로 만들어 등록했습니다. 스프린트는 일주일 단위로 진행하였습니다. 6주간 5번의 스프린트를 진행하였습니다.

• Epic : Back, Front, Data로 나누어 구성하였습니다.

• story : '추천 알고리즘 정리', '보따리 검색 페이지네이션' 등 명확하고 간단히 기록하였습니다.

• subtask : 'redux toolkit을 이용한 로그인 토큰 구현' 등 story를 세세하게 나누어 업무를 관리 하였습니다.

API 명세, git 전략, project 관련 페이지 등을 모아 관리하였습니다. 그리고 매일 스크럼을 진행한 내용을 기록하려고 노력하였습니다. 기획과 프로토타입에 시간을 많이 할애하여 기획단계에서 명확하게 정의하고 시작하였습니다.

주마다 약 3회 저녁 종례시간에 오늘 진행한 일, 발생한 이슈, 앞으로 해야할 일에 대해 공유하고 정리하는 시간을 가졌습니다. 스크럼을 통해 현재 상황을 공유하고, 프로젝트 일정을 조율하였습니다.