Coding Kitsune

나혼자 미슐랭 개발일지 #6 – 리뷰 이미지 S3 업로드 및 출력 기능

범위: 리뷰 등록 기능 구현, 이미지 업로드(S3 연동), Kakao 장소 검색 연동, Restaurant DB 자동 저장 이번에는 사용자 리뷰 등록 경험을 본격적으로 구현하기 위해 여러 기능을 통합하였습니다.특히, 텍스트 리뷰뿐 아니라 이미지 업로드와 장소 검색까지 포함되어 기능적 완성도가 한 단계 더 올라갔습니다. 1. 리뷰 작성 기능 전체 흐름 정리리뷰 작성은 단순 텍스트 입력을 넘어서음식점 검색평점(음식, 분위기, 서비스)코멘트이미지 첨부까지 포함되도록 재설계 하였습니다. 리뷰 흐름 요약사용자가 음식점명을 입력하면 Kakao API로 검색검색 결과를 리스트로 보여주고 클릭 시 selectedRestaurant 설정리뷰 작성 완료 후 ‘저장하기’ 버튼 클릭 시,이미지가 있다면 S3에 업로드리뷰 정..

범위: 사용자 정보 관련 백엔드 확장, 마이페이지 UI 구성, 프로필 수정 페이지 제작, API 연동 이전 개발일지(#4)까지는 리뷰 작성 및 리스트 기능 구현에 집중했다면,이번에는 사용자 개인화 경험을 위한 "마이페이지"와 "프로필 수정" 기능을 새롭게 구축하였습니다.이를 위해 백엔드와 프론트 모두 구조적 확장이 필요했고,유저 데이터 모델 자체를 개선하여 더 많은 정보를 다룰 수 있도록 개선하였습니다. 1. 사용자 정보 모델 확장🔸 Entity 변경 (User.java)기존 User Entity는 로그인/회원가입 기반 정보만 있어 프로필 정보를 표현하기엔 한계가 있습니다.이에 따라 아래 필드를 추가하였다.profileImageString사용자 아바타 or 이미지 URLregionString활동 지역..

범위: 리뷰 작성 기능 구현, 무한 스크롤 적용, 정렬/필터 기능 추가, UI/UX 개선 1. 리뷰 작성 페이지(ReviewAddPage) 개발 ✅ 기능 요약음식점 검색 → 선택 → 별점 선택 → 코멘트 작성 → 저장 흐름음식점은 2글자 이상 입력 시 실시간 검색별점은 3개 항목(맛, 분위기, 서비스)으로 쪼개서 받고, 평균값만 저장필수값 누락 시 알림 및 유효성 검사 처리등록 성공 시 자동으로 리스트 페이지 이동 ✅ 주요 구현 사항StarRating 컴포넌트를 재사용 가능하게 분리별점 입력은 마우스로 클릭해 0.5점 단위 조절 가능선택된 음식점 카드 미리보기 + 썸네일 이미지 함께 표시프론트에서는 평균 평점만 백엔드로 전송 ✅ 관련 기술axios POST 요청으로 /api/reviews에 전송사용자 ..

범위: 프론트 개발환경 구성, 백엔드 데이터 확장, 리뷰 리스트 기능 구현, CORS 해결 1. 프론트엔드 개발환경 구성BE 기본작업이 어느정도 완성되어서 FE 또한 작업이 필요했고 제가 맡아 개발환경 세팅을 시작하였습니다.이전까지는 단순히 구조만 짜두고 페이지 파일만 만들어놓은 상태였는데, 본격적으로 개발을 시작하면서 FE는 너무 오랜만이기도 하고 해서 많은 고민과 실험이 있었습니다..! 초기 삽질 요약CRA(Create React App)보다 더 가볍고 빠른 환경을 만들고 싶어서 Vite + React로 구성TailwindCSS도 도입해보려 했지만 설정 충돌, PostCSS 관련 오류, 예상치 못한 스타일 깨짐 등으로 시간만 소비함 → 결국 순수 CSS로 회귀....디렉토리 구조도 pages, com..

본격적으로 API의 기본 뼈대를 구성했습니다.User, Restaurant, Review 세 가지 핵심 도메인에 대해 CRUD(Create, Read, Update, Delete) 기능을 설계하고 구현했습니다. 📌 도메인별 엔티티 구성User: username, email, password, created, deletedRestaurant: name, address, category, mapUrl, avgRating, created, deletedReview: user, restaurant, rating, comment, created, modified, deleted삭제는 soft delete 방식을 채택했습니다. 🛠️ 개발 중 마주친 이슈와 해결 과정1. created 필드 타입 충돌초기엔 ..

Flask나 FastAPI 위주로 사용하다 Spring boot를 학습하고 프로젝트를 진행하다보니 헷갈리는 부분이 많았다.서버 가동관련 확인할때 체크해야 할 부분은 다음과 같다. ✅ 서버 정상 기동 여부 체크 포인트1. Spring Boot 로고와 버전 출력 → Spring Boot가 제대로 시작됐다는 의미 2. 내장 Tomcat 서버 시작 로그 → Tomcat이 8080 포트에서 정상적으로 뜸 3. DB 연결 성공 (HikariCP) → MySQL 연결 완료 4. JPA 테이블 관련 쿼리 실행 → JPA가 Entity에 맞게 테이블 스키마를 자동으로 수정 5. 애플리케이션 시작 완료 → 최종적으로 Spring Boot 애플리케이션 실행 완료.

GitHub 협업 구조 설정: 공동 개발 & 백업이번 나혼자 미슐랭 프로젝트는 두 명이 함께 백엔드 개발을 진행하기 때문에, 협업 구조를 효율적으로 설정하는 것이 중요했습니다. 처음엔 하나의 GitHub 리포지토리만 활용하려 했지만, 협업과 개인 백업의 분리를 위해 구조를 다음과 같이 설계했습니다: 메인 리포지토리 (황인규 GitHub)프로젝트의 공식 개발 리포지토리는 인규의 GitHub에 위치해 있으며, 저는 그 리포지토리에 **Collaborator(협업자)**로 등록되어 코드 수정 및 푸시 권한을 부여받았습니다. 이곳은 실질적인 협업과 코드 리뷰, PR(Pull Request) 등이 이루어지는 메인 공간입니다. BE: https://github.com/hig07/solo-michelin-backen..

1. DB 설계 목표관리 편의성을 높이기 위해 soft delete(deleted 플래그) 방식을 적용리뷰 수정 가능성을 고려해 modified 컬럼 추가불필요한 과도한 데이터 저장을 방지하기 위해 varchar 크기 최소화실시간 별점 계산을 위해 avg_rating 필드 사전 설정"created" 이름 통일로 컬럼명 일관성 확보 2. Entity/Table 설계 User 테이블컬럼명 타입 제약조건 설명idBIGINTPK, Auto Increment사용자 고유 IDusernameVARCHAR(20)NOT NULL사용자 닉네임emailVARCHAR(50)NOT NULL, UNIQUE사용자 이메일 (중복 방지)passwordVARCHAR(100)NOT NULL암호화된 비밀번호createdDATETIMEDEF..

1. 프로젝트 개요프로젝트명: 나혼자 미슐랭 (Solo Michelin)목표: 맛집들을 기록하고 평가하며, 혼밥 유저들의 경험을 공유할 수 있는 웹/앱 기반 서비스 구축개발인원: 2명 (박희범, 황인규)주요 기술 스택: Spring Boot, React, MYSQL, JWT, 지도 API(Google or NAVER)개발 기간: 2025년 4월 ~ 6월 (예정)활용 목적: 상업화 + 실무형 협업 경험축적 2. 시스템 개요전체 시스템 설명: 나혼자 미슐랭은 방문한 맛집을 지도 기반으로 탐색하고, 평가와 리뷰를 남길 수 있는 개인화된 맛집 기록 플랫폼입니다.핵심 기능 소개:사용자 별점 평가 기능 + 리뷰 기능사용자 방문 히스토리 조회 기능시스템 아키텍쳐:클라이언트 – 서버 구조 (React FE Spring..

1. 프로젝트 소개프로젝트명: 나혼자 미슐랭 (Solo Michelin)목표: 맛집을 기록하고 평가할 수 있는 개인화된 맛집 리뷰 플랫폼 구축. 맛집을 평가하고 기록하는 유저를 위한 서비스에 특화된 기능 제공 2. 기획 배경문제 인식기존 플랫폼 (네이버or 구글)에서 맛집을 검색할 때, 내 평점이 아닌 다른 사용자들의 평점만 확인할 수 있음.나 또는 연인이 자체적으로 맛집을 평가해서 작성할 수 있는 플랫폼의 부재해결 방향나만의 최적화된 맛집 탐색/리뷰 플랫폼지도 기반으로 맛집을 탐색하고, 나만의 기록 저장 3. 주요 타겟 (페르소나)👤 직장인 A (30대, 혼자 맛집 탐방선호)서울 시내 맛집들을 꾸준하게 탐험하며 나만의 맛집 평가 리스트를 작성하고 싶음👤 대학생 커플 B, C (20대 후반, 데이트를..