TIL - 20250814

juni·2025년 8월 14일

목록 보기

94/315

0814 여행일지 기능 구현: 파일 업로드 및 태그 시스템

핵심 엔터티 설계:
- TravelLog: 여행일지의 본문, 날짜, 별점, 지출 등 핵심 정보를 담는 메인 엔터티. Trip 엔터티와 1:N 관계를 맺습니다.
- TravelPhoto: 업로드된 사진의 원본/저장 이름, 순서 등의 메타데이터를 관리하는 엔터티.
- Tag / TagCategory: 태그의 이름, 색상, 분류를 관리하여 일관성 있는 태그 시스템을 구축합니다.
- TravelLogTag: TravelLog와 Tag의 다대다(M:N) 관계를 해소하기 위한 중간 테이블(엔터티)입니다.
Repository 구현:
- TravelLogRepository, TagRepository 등 각 엔터티에 대한 기본적인 CRUD Repository를 생성했습니다.
- TravelLogRepositoryImpl에 QueryDSL을 적용하여, 향후 복잡한 조건의 여행일지 검색이나 통계 기능을 구현할 수 있는 기반을 마련했습니다.

파일 업로드 환경 설정:
- application.yml: 파일이 저장될 실제 경로를 설정하여 관리의 유연성을 높였습니다.
- FileUploadConfig: 애플리케이션 시작 시, 설정된 경로에 업로드 디렉토리가 없으면 자동으로 생성하도록 구현했습니다.
- WebResourceConfig: 서버의 로컬 경로(/uploads/**)에 저장된 이미지 파일에 브라우저가 직접 접근하여 이미지를 표시할 수 있도록 정적 리소스 핸들러를 설정했습니다.
TravelLogService (createTravelLog 메서드):
- 여행일지 생성의 핵심 비즈니스 로직을 담당합니다.
- 파일 처리: 클라이언트로부터 받은 MultipartFile 목록을 검증(최대 5개, 이미지 형식)하고, 서버에 물리적으로 저장합니다.
- 메타데이터 저장: 저장된 파일의 정보(순서, 이름 등)를 TravelPhoto 엔터티로 변환하여 데이터베이스에 기록합니다.
- 사용자/여행 검증: @AuthenticationPrincipal로 받은 사용자 정보와 요청된 여행 ID를 검증하여, 권한 없는 사용자의 접근을 차단합니다.

TravelLogController:
- 여행일지 생성을 위한 API 엔드포인트(POST /api/travel-logs)를 추가했습니다.
- @RequestPart를 사용하여 DTO 데이터와 MultipartFile을 동시에 처리하는 멀티파트 요청을 처리합니다.
프론트엔드 UI (travel-log-form.js):
- 사용자가 여행일지 내용을 작성하고, 태그를 선택하며, 사진 파일을 업로드할 수 있는 UI(travel-log-form.html)를 구현했습니다.
- 주요 기능: 태그 추천, 드래그 앤 드롭을 이용한 이미지 순서 변경, 별점 평가, 지출 입력 등 다양한 인터랙션을 제공합니다.
- 업로드할 이미지를 선택하면 즉시 썸네일을 생성하여 사용자에게 시각적인 피드백을 줍니다.

파일 업로드와 같은 복잡한 요청을 프론트엔드에서 더 쉽게 처리할 수 있도록 공통 api.js 모듈을 개선했습니다.
api.js 개선 사항:
- postMultipart 메서드 추가: FormData 객체를 서버로 전송하는 로직을 표준화한 postMultipart 함수를 추가했습니다.
- Content-Type 자동 처리: FormData를 전송할 때는 브라우저가 Content-Type 헤더(경계 포함)를 자동으로 설정해야 하므로, api.js에서 이 경우 Content-Type을 수동으로 설정하지 않도록 로직을 수정했습니다. 이를 통해 멀티파트 요청을 안정적으로 처리할 수 있게 되었습니다.
travel-log-form.js 리팩토링:
- 페이지의 상태(선택된 태그, 업로드된 파일 등)를 관리하는 전역 state 객체를 도입하여 코드의 구조를 개선하고 데이터 관리를 용이하게 했습니다.

백엔드에서는 TravelLog, Tag, TravelPhoto 엔터티를 중심으로 데이터 모델을 설계하고, 파일 업로드를 처리하는 서비스 로직과 API 엔드포인트를 구현했습니다.
파일 시스템 연동을 위해 application.yml과 설정 클래스(WebResourceConfig)를 통해 업로드 경로와 정적 리소스 제공을 설정했습니다.
프론트엔드에서는 태그 선택, 드래그 앤 드롭 이미지 업로드 등 풍부한 기능을 갖춘 여행일지 작성 페이지를 구현했습니다.
api.js에 멀티파트 요청(FormData)을 전담하는 유틸리티 함수를 추가하여, 파일이 포함된 복잡한 폼 데이터를 안정적으로 서버에 전송할 수 있도록 아키텍처를 개선했습니다.