0817 여행일지 기능 및 프론트엔드 아키텍처 고도화
✅ 1. 여행일지 기능 및 파일 업로드 구현
- 여행에 대한 상세 기록을 위해 여행일지(Travel Log) 관련 엔터티를 설계하고, 사진을 첨부할 수 있는 파일 업로드 기능을 구현했습니다.
- 엔터티 설계:
TravelLog: 여행일지 메인 엔터티.TravelPhoto: 업로드된 사진의 메타데이터 관리.Tag, TagCategory: 체계적인 태그 시스템 구축.TravelLogTag: TravelLog와 Tag의 M:N 관계 해소를 위한 중간 엔터티.
- 파일 업로드 서비스 (
TravelLogService):
- 클라이언트로부터 받은
MultipartFile을 서버에 물리적으로 저장합니다.
- 저장된 파일의 정보(이름, 순서 등)는
TravelPhoto 엔터티로 변환하여 DB에 기록합니다.
- 환경 설정:
application.yml에 파일 저장 경로를 설정하고, WebResourceConfig를 통해 해당 경로의 파일에 브라우저가 접근할 수 있도록 정적 리소스 핸들러를 추가했습니다.
✅ 2. 프론트엔드 라우팅 및 공통 모듈 설계
- 페이지별로 필요한 스크립트만 로드하고, 인증 상태에 따라 접근을 제어하는 프론트엔드 라우팅 시스템을 구축했습니다.
- 라우팅 설정 (
routes-config.js):
- 경로별 JS 모듈과 인증 요구 여부(
authRequired)를 중앙에서 설정합니다.
- 동적 모듈 로딩 (
app.js):
- 페이지 진입 시 현재 URL을 확인하여
routes-config.js에 정의된 JS 모듈만 동적 import()로 로드합니다.
- 라우트 가드(Route Guard): 인증이 필요한 페이지에 비로그인 사용자가 접근 시, 로그인 페이지로 리다이렉트시키는 보호 로직을 구현했습니다.
✅ 3. API 유틸리티 확장 및 UI 구현
- 파일 업로드와 같은 복잡한 요청을 쉽게 처리하도록 API 유틸리티를 확장하고, 사용자가 직접 기능을 사용할 수 있는 UI를 구현했습니다.
- API 유틸리티 개선 (
api.js):
postMultipart 메서드 추가: FormData 객체를 서버로 전송하는 로직을 표준화했습니다.Content-Type 자동 처리: FormData 전송 시 브라우저가 Content-Type을 자동으로 설정하도록 기존 로직을 수정하여 멀티파트 요청을 안정적으로 처리합니다.
- 프론트엔드 UI (
travel-log-form.js):
- 사용자가 여행일지 작성, 태그 선택, 이미지 업로드 등을 할 수 있는 UI를 구현했습니다.
- 주요 기능: 드래그 앤 드롭 이미지 순서 변경, 업로드 시 썸네일 즉시 표시 등 사용자 경험을 고려한 인터랙션을 제공합니다.
📌 요약
- 백엔드에서는 여행일지 관련 엔터티를 설계하고, 파일 업로드를 처리하는 서비스 로직과 멀티파트 API를 구현했습니다.
- 프론트엔드에서는 설정 기반의 라우팅 시스템을 구축하여 페이지별 모듈을 동적으로 로드하고, 라우트 가드로 접근 제어를 구현했습니다.
api.js에 멀티파트 요청을 전담하는 유틸리티를 추가하고, 풍부한 기능을 갖춘 여행일지 작성 페이지를 구현하여 백엔드와 프론트엔드 연동을 완성했습니다.
