Coding Kitsune

나혼자 미슐랭 개발일지 #7 – 로그인 / 회원가입 / 카카오 로그인 기능 구현

범위: JWT 기반 인증 시스템 구현, 로그인/회원가입 API, 카카오 OAuth 연동, 프론트 연동 및 토큰 처리 그동안 데이터만 주고받던 편안한 API들과는 다르게,이번엔 사용자 인증이라는 큰 산을 마주하게 됐다. 1. 전체 흐름 구성 – JWT 기반 인증 시스템처음에는 그냥 로그인/회원가입만 만들 생각이었지만,리뷰 작성, 마이페이지 접근 등 사용자 인증이 필요한 기능이 많아질 걸 고려해서처음부터 JWT 기반 구조로 설계하기로 했다. 회원가입 → 유저 DB 저장 (비밀번호 암호화 포함)로그인 → 이메일 & 비밀번호 확인 → JWT 토큰 발급이후 모든 요청은 Authorization: Bearer 으로 인증 Spring Security 없이 순수하게 커스텀 필터 + JwtUtil로 처리했다. 2. ..

나혼자 미슐랭 개발일지 #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 필드 타입 충돌초기엔 ..

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대 후반, 데이트를..