/pickpack

합리적인 여행의 시작, pickpack

Primary LanguageJavaScript

🛫 Pick&Packer 🛬

합리적인 항공권 결정과 여행 물품 현지 거래를 위한 웹 서비스

✨ 프로젝트 진행 기간

  • 2023.02 ~ 2023.04

🎨 기획 배경

코로나19가 완화됨에 따라 해외여행 수요가 급증하고 있다. 해외 여행을 계획하는 데 가장 중요한 것은 항공권이다. 기존 항공권 예매 사이트에서 불편한 점을 찾을 수 있었다.

불편한 점

  • 항공권 가격의 과거 데이터를 제공하지 않아 지금 보고 있는 항공권 가격이 합리적인지 알 수 없다.
  • 여러 개의 항공권을 한 눈에 비교할 수 없다.
  • 찜한 항공권의 가격이 원하는 가격에 도달했는지 확인하는 과정이 귀찮다.
  • 대부분 항공권 예약 사이트에선 인기 여행지로 도시만 추천한다.

🧸 주요 기능

  • 항공권 가격 추이를 시각적으로 볼 수 있다.
  • 여러 개의 항공권을 선택해 한 눈에 비교할 수 있다.
  • 원하는 가격에 도달하면 찜한거 알림을 받을 수 있다.
  • 관광지 기준으로 주변 공항을 지도에 표시한다.
  • 여행 물품을 구매/대여할 수 있다.

🌎 Pick 서비스 - 메인 페이지

지도 & 여행지 서비스

  • 각 나라의 공항 위치와 상세 정보를 제공.

인기 여행지

  • 대류별 인기 여행지를 제공.
  • 여행지 클릭시, 지도 해당 여행지가 확대 되고, 상세 정보를 제공.
  • 주변의 가까운 공항 정보와 위치 제공.


항공권 검색

  • 편도/왕복으로 검색 지원.
  • 출발지/도착지 선택, 날짜 선택, 검색조건(경유조건, 가격조건) 설정 후 검색 지원.



항공권 검색 결과


  • 실제와 동일한 항공권 마크와 색상으로 항공권 구별.

  • 항공권을 5개까지 비교할 수 있는 기능 지원.

  • 항공권 조회 결과 리스트 정렬 기능 지원.

    • 금액 낮은 순
    • 변동폭 큰 순
    • 출발시간 빠른 순
    • 소요시간 낮은 순

  • 무한 스크롤로 조회 결과 제공.




항공권 상세


  • 각 항공권의 상세정보와 가격 변화의 추이 정보를 제공.
  • 비교하기에 넣은 항공권에 대해 가격 비교와 추이 비교를 그래프로 지원.
  • 찜하기 기능 & 알림 기능 지원.

편도 검색 결과


왕복 검색 결과





🛒 Pack 서비스

여행 물품 거래 서비스

  • 살게요/팔게요

    • 여행물품 중고 거래 서비스 제공.

  • 빌려주세요/빌려드려요

    • 여행 물품 대여 서비스 제공.

  • 모든 카테고리 조회 결과를 무한 스크롤 형태로 제공.

  • 제목을 기준으로 도시와 물품으로 검색 기능 제공.

  • 게시물 등록/수정 기능

    • 해당 물품에 관련된 사진을 여러장 기입 가능.





🪂 사용자 서비스 페이지

로그인/회원가입

  • 아이디 및 닉네임 중복 검사 체크
  • 로그인 시, 희망 가격을 정해놓은 찜한 항공권 알림 지원.




마이페이지

  • 찜한 항공권에 대해 희망 가격 설정 할 수 있는 기능 지원.
  • 희망 가격 이하의 항공권이 올라올 시, 알림 서비스 지원.
  • pack 서비스에 대한 찜한 목록 제공.




채팅

  • 판매자와 구매자의 실시간 채팅 제공.
  • 새로운 메세지에 대한 알림과 과거 대화 내용 기록.
  • 사진(여러개) 전송 가능.
  • 구매완료를 등록 가능.




🛫 Co-work tool 🛬




🖥 개발환경

  • 형상관리 : Gitlab
  • 이슈관리 : Jira
  • 커뮤니케이션 : Mattermost, Notion
  • 디자인 : Figma

🛠 기타 편의 툴

  • Postman
  • Termius

✨ Front End Stack ✨




  • IDE : Visual Studio Code
  • language
    • node js 18.13.0
  • formatter
    • eslint 8.32.0
    • prettier 2.8.3
  • Library
    • react 18.2.0
    • react-dom 18.2.0
    • router
      • react-router-dom 6.9.0
    • state management tool
      • react-redux 8.0.5
      • reduxjs/toolkit 1.9.3
      • redux-persist 6.0.0
    • http
      • Axios 1.3.4
    • map
      • react-leaflet 4.2.1
    • chart
      • chart.js 4.2.1
    • chat
      • sockjs 0.3.24
      • sockjs-client 1.6.1
      • stompjs 2.3.3
      • stomp/stompjs 7.0.0
    • style
      • styled-components 5.3.9
      • react-icons 4.8.0
    • etc
      • aws-sdk 2.1349.0
      • firebase 9.19.1
      • jwt-decode 3.1.2
      • js-sha256 0.9.0

✨ Back End Stack ✨







  • IDE : Intellij IDEA 2020.3
  • language : Java openjdk 11.0.15 2022-04-19 LTS
  • Springboot 2.7.9
    • Spring Data JPA
    • Spring Data redis
    • Lombok
    • Spring Security
    • Spring Cloud 2021.0.5
    • Spring Cloud Discovery
    • Spring Cloud Config
    • Spring Cloud AWS
    • Logback 7.2
    • Validation
    • Spring Web
    • Spring Websocket
  • Build tool : Gradle 7.6
  • QueryDsl 1.0.10
  • firebase 7.1.1
  • jackson
  • Micrometer Prometheus
  • com.auth0:java-jwt 4.0.0
  • okhttp3 4.2.2
  • hadoop 3.2.2
  • spark 3.2.1

📚 DB

  • Mysql 8.0.32-0ubuntu0.20.04.2

🛰 Server

  • https TLS 1.0
  • Ubuntu 20.0.4
  • Nginx 1.18.0
  • Docker 20.10.23
  • Jenkins Jenkins/jenkins:lts-jdk11(Image tag name)

🏰 시스템 아키텍쳐


✨ 기술 특이점

🎯 빅데이터 분산 시스템 구현

  • ⚙ 항공권 크롤링

    • Selenium을 통해 G마켓 항공에서 매일 미래 7일치 항공권 데이터를 수집 (1일 약 40만건)

  • 🐘 Hadoop

    • 수집한 항공권 데이터를 전처리 및 부하방지를 위해 분산 저장

  • 🍧 Spark

    • Python 기반의 PySpark 사용
    • HDFS에 있는 오늘 날짜의 파일에 있는 데이터를 정제해 항공권 정보를 MySQL DB에 저장
    • HDFS에 있는 과거 파일을 모두 읽어 항공권의 과거 가격 정보를 연산

🎯 MSA 설계

  • 배포

    • 서비스별 배포가 가능.(배포시 전체 서비스의 중단이 없음)
    • 특정 서비스의 요구사항만 반영하여, 빠르게 배포 가능.

  • 확장

    • 다양하고, 새로운 서비스에 대한 유연한 확장 가능.

  • 장애

    • 일부 서비스의 장애가 전체 서비스로 확장될 가능성을 차단. (User service 에 해당하는 장애가 Owner service에 영향을 미치지 ❌)
    • 부분적 장애에 대한 격리 처리 가능.

🎯 redis사용

  • redis 캐시 db

    • redis에 채팅방 정보와 채팅 메시지를 저장
    • 채팅에 사용한 Redis Cache Strategy Pattern
    • 변경이 적고 자주 사용되는 정보들(유적지 데이터/ 회원 데이터 조회) 캐시로 저장.

  • redis pub/sub

    • STOMP와 Redis의 pub/sub구조를 이용하여 실시간 채팅 기능 구현

  • Cache warming

    • write back후 전 날 00시부터의 채팅 메시지를 redis에 데이터를 밀어 넣어둠

  • Write-Back

    • 새벽 3시마다 Spring Scheduler와 Jdbctemplate을 이용하여, Redis에 쌓아놨던 데이터들을 db로 bulk insert를 진행

  • Look-Aside(Lazy Loading)

    • 클라이언트가 채팅 메시지 읽기 요청 시 Redis에서 먼저 확인
    • 더 과거의 채팅 메시지를 요청 시 DB에서 데이터를 조회하여 Redis에 저장 후, 결과 값 반환
    • 무한스크롤을 구현했기 때문에, 한번에 하루 치의 데이터씩만 Redis에 저장함.

  • Redis Sentinel

    • HA를 위해 Auto Failover를 수행할 수 있는 Sentinel을 구성함
    • Redis 서버 3대, Redis Sentinel을 5대 기동

🎯 모니터링

  • prometheus & grafana
    • 서버의 metric을 수집하여, 해당 서버의 부하 및 메모리 사용량 등을 시각화

🎯 log분석

  • elk
    • logstash : 서버의 로그를 수집
    • elasticsearch : 로그 검색 기능
    • kibana : 로그 데이터 시각화

🛫 API 명세

API 명세


🐢 화면 설계서

화면 설계서





⛺ ER Diagram

[ER Diagram](https://www.erdcloud.com/d/DQ8Lr5CfJQKmjWGvL)

🍀 PickPack 팀의 개발자들을 소개합니다!!

최희수 김승희 이상민 김아린 신현광 허윤회
Leader & Backend Backend Backend Backend Frontend Frontend



🐥 팀원 역할