여행닻 (TravelAnchor)

실시간 여행 메이트 매칭 & 정보 공유

Main Image
GitHub Repository

Period & Role

  • 기간: 2024.11 ~ 2024.12 (약 1개월)
  • 역할: PM (6명)

Description

  • 여행지와 맛집 정보를 탐색하고, 여행 메이트를 모집·소통할 수 있는 웹 서비스입니다. Spring Boot 기반 백엔드와 React 프론트엔드로 구성했으며, 모집 공고 CRUD와 실시간 채팅 기능을 중심으로 구현한 팀 프로젝트입니다.

Tech Stack

Backend
Java Spring Boot
Frontend
React JavaScript
Database
MySQL
Realtime / Messaging
WebSocket
Infra / DevOps
Docker Compose Open API

Key Features

  • 모집 공고 CRUD
    • 여행 메이트 모집 공고 생성, 조회, 수정, 삭제 기능 구현
    • 검색 및 필터링을 통해 사용자가 원하는 모집글 탐색 가능
  • 실시간 채팅
    • WebSocket 기반 양방향 통신 구조를 적용해 사용자 간 실시간 메시지 송수신 구현
    • 모집 공고를 통해 연결된 사용자 간 즉시 소통 가능
  • 외부 API 연동
    • 항공권, 날씨 등 여행 관련 외부 API를 연동해 정보 조회 기능 구현
    • 사용자 편의를 위해 여행 준비에 필요한 정보를 한 화면에서 확인할 수 있도록 구성
  • PM 역할 수행
    • 프로젝트 일정 관리, 기능 우선순위 조정, 팀원 간 협업 조율 수행
    • 진행 상황 점검과 역할 분배를 통해 프로젝트 완성도 향상에 기여

System Architecture & ERD

ERD Diagram

프로젝트의 데이터베이스 설계도(ERD)입니다.

Architecture

프로젝트의 시스템 아키텍처입니다.

Troubleshooting
1. 실시간 채팅 구조 구현 • 문제 : 사용자 간 메시지를 즉시 반영하고 연결 상태를 유지하는 실시간 채팅 기능 구현이 필요했습니다. • 원인 : 일반적인 HTTP 요청/응답 방식으로는 실시간 메시지 송수신을 처리하기 어려웠습니다. • 해결 : WebSocket 기반 양방향 통신 구조를 적용해 실시간 메시지 송수신 기능을 구현했습니다. • 결과 : 사용자 간 실시간 소통이 가능해졌고, 여행 메이트 모집 서비스의 상호작용성을 높일 수 있었습니다. 2. 프론트엔드-백엔드 API 연동 처리 • 문제 : React와 Spring Boot 간 비동기 통신 과정에서 요청·응답 구조와 에러 처리 방식이 일관되지 않아 화면 반영에 어려움이 있었습니다. • 원인 : API 응답 구조와 프론트엔드 상태 반영 방식이 기능별로 일관되게 정리되지 않았습니다. • 해결 : API 응답 구조와 처리 흐름을 정리하고, 모집 공고 및 외부 API 조회 기능이 프론트엔드에 안정적으로 반영되도록 구현했습니다. • 결과 : 데이터 흐름이 더 명확해졌고, 사용자 화면에서도 기능이 안정적으로 동작하도록 개선했습니다. 3. PM 역할 수행 과정의 협업 문제 해결 • 문제 : 팀원별 개발 속도와 코드 스타일 차이로 일정 관리와 협업 조율에 어려움이 있었습니다. • 원인 : 초기에는 작업 우선순위와 진행 상황이 충분히 정리되지 않아 협업 흐름이 일정하지 않았습니다. • 해결 : 기능 우선순위를 재정리하고 진행 상황을 지속적으로 점검하며 팀원 간 협업 흐름을 조율했습니다. • 결과 : 프로젝트 일정을 맞추면서 기능 완성도를 높일 수 있었고, PM 역할을 통해 협업 관리 경험을 쌓을 수 있었습니다.
Lessons Learned
여행닻은 React와 Spring Boot를 함께 활용한 첫 팀 프로젝트로, 프론트엔드와 백엔드를 연결하는 흐름을 실제로 경험하게 해준 프로젝트였습니다. WebSocket 기반 실시간 채팅을 구현하며 단순 CRUD를 넘어 상호작용이 있는 기능을 설계하는 경험을 쌓았고, 외부 API 연동을 통해 서비스 확장 방식을 고민할 수 있었습니다. 또한 PM 역할을 맡아 일정 관리와 우선순위 조정, 협업 조율을 수행하며 기술 구현뿐 아니라 팀 단위 개발의 흐름을 이해하게 되었습니다. 이 프로젝트를 통해 이후 DeepLine에서 더 복잡한 구조와 실시간 처리 방식을 설계할 수 있는 기반을 다질 수 있었습니다.