수구리의 데브로그

[바이브 코딩 #6] 데이트 코스 추천 서비스 개발기

DAY6: 이미지 업로드 RLS 정책 문제 해결📋 개요DAY5에서 구현한 이미지 업로드 기능에서 발생한 Supabase Storage RLS(Row Level Security) 정책 관련 오류를 해결하고, 안정적인 이미지 업로드 시스템을 완성했습니다.🐛 발견된 문제에러 상황Error uploading compressed image: SyntaxError: Unexpected token '문제 분석Supabase Storage RLS 정책 부재: place-images 버킷에 적절한 RLS 정책이 설정되지 않음403 Unauthorized 응답: 이미지 업로드 시 JSON 대신 HTML 에러 페이지 반환클라이언트 JSON 파싱 실패: HTML 응답을 JSON으로 파싱하려다 에러 발생근본 원인Supaba..

[바이브 코딩 #5] 데이트 코스 추천 서비스 개발기

DAY 5: 카카오 지도 API 연동 및 이미지 최적화📋 기능 개요유저가 장소를 등록할 때 카카오 지도 API와 연동하여 위치 정보를 정확하게 수집하고, 이미지를 자동으로 압축하여 최적화하는 기능을 구현합니다.✅ 완료된 기능1단계: 환경 설정 (완료)1-1. 환경 변수 추가위치: app/config/env.ts추가된 변수: KAKAO_MAP_APP_KEY용도: 카카오 지도 JavaScript SDK 인증설정: VITE_KAKAO_MAP_APP_KEY (클라이언트에서 사용)1-2. TypeScript 타입 정의위치: app/types/kakao-map.ts포함 내용:카카오 지도 API 인터페이스 (KakaoLatLng, KakaoMapOptions)위치 데이터 타입 (PlaceLocationData)검색..

[바이브 코딩 #4] 데이트 코스 추천 서비스 개발기

이번 단계에서는 유저가 직접 장소를 등록할 수 있는 기능을 개발해보았다.추후에는 본인이 등록한 장소들 또는 기존에 다른 유저가 등록한 장소들을 가지고 코스를 등록할 수 있도록 기획을 해볼 예정이다!새로운 데이터베이스 스키마를 추가했고 유저의 무분별한 장소 등록을 방지하고자 하루에 최대 3개정도까지만 등록할 수 있도록 기획했다.그리고 유저 본인이 등록한 장소를 카드 형태로 확인할 수 있고, 장소 수정은 불가능하고 삭제 후 재등록을 통해서만 가능하도록 기획해보았다.그리고 현재는 모든 장소가 관리되어지고 있는데 나중에는 관리자의 승인에 의해서만 장소 등록이 될 수 있도록도 고려를 해야하지 않을까 생각한다.일단은 유저 참여형 서비스를 개발해보고 싶었다. 어드민에서 등록되어져 있는 장소들만 가지고 유저에게 보여주..

[바이브 코딩 #3] 데이트 코스 추천 서비스 개발기

코스모스 (Course-More-Us) - 3일차 개발 기록개발 기간: 2025년 06월 17일개발자: yangsuyoung프로젝트: 데이트 코스 추천 서비스 "코스모스"📋 개발 개요3일차는 관리자 페이지 리팩터링, UI/UX 개선, 그리고 소셜 로그인 공통 로직 리팩터링에 집중했습니다. 기존 코드의 일관성을 높이고 재사용 가능한 컴포넌트 체계를 구축하여 유지보수성을 크게 향상시켰습니다.🚀 주요 구현 사항1. 관리자 페이지 리팩터링 ✅공통 컴포넌트 적극 활용기존의 분산된 UI 요소들을 표준화된 공통 컴포넌트로 통일했습니다.수정된 파일들:app/routes/admin.users._index.tsxapp/routes/admin.places._index.tsxapp/routes/admin.places.ne..

벌써 달리기를 시작한지 1년 하고도 1개월이 지난 지금 나는 굉장히 많은 변화가 생겼다.초반에는 쉬지 않고 3분을 달리기도 힘들어 했었던 내가이제는 러닝화만 총 4켤래를 구비하게 되었고,24년 run your way 10km 대회를 시작으로 대회 분위기도 느껴보고올해 4월 서울하프마라톤으로 첫 하프도 1시간 46분만에 완주도 해봤고쉬지 않고 2시간 40분을 달리기도 해보고살도 많이 빠진 것 같지만 그만큼 많이 먹어대서 또 나름대로 잘 유지하고 있는 것 같다. 아무튼 올해 나는 11월 JTBC 풀코스를 앞두고 있다.그 전에 총 3개의 하프마라톤을 나갈 예정이다1. 9월 14일 마블런2. 9월 21일 서울어스마라톤 하프3. 10월 18일 경포 마라톤 하프사이사이에 10km 대회도 낄 수 있을 것 같은데 일..

코스모스 (Course-More-Us) - 2일차 개발 기록개발 기간: 2025년 06월 15일 ~ 2025년 6월 16일개발자: yangsuyoung프로젝트: 데이트 코스 추천 서비스 "코스모스"📋 개발 개요둘째날은 이용약관 동의 시스템 구현과 회원가입 플로우 개선에 집중했습니다. 특히 카카오 OAuth와 이메일 회원가입 모든 방식에 약관 동의 단계를 추가하고, 복잡한 RLS 순환 참조 문제를 해결하는 과정이 핵심이었습니다.🚀 주요 구현 사항1. 이용약관 시스템 구현 ✅서비스 이용약관 전문 페이지파일: app/routes/terms.tsx내용: 11개 조항의 상세한 서비스 이용약관서비스 이용 목적 및 범위회원가입 및 계정 관리개인정보 처리 및 보호서비스 이용 규칙콘텐츠 및 지적재산권서비스 제공 및 ..

이제는 익숙한 바이브 코딩이라는 단어가 있다바이브 코딩은 진짜 말 그대로 본인이 코드를 작성하지 않고도 느낌대로 코딩하는 걸 말한다.그냥 내가 만들고 싶은 아이디어만 있다면 그걸 느낌대로 구체화 해 나가면서 정말 손이 가는대로 개발하는 것이다.나도 지금까지 제대로 된 서비스나 프로젝트가 없으니 이번 기회에 지금까지 내가 터득했던 지식을 총동원해서내가 직접 코드를 작성하지 않고 기획과 디자인 그리고 개발까지 해보려고 한다.일단 1일차를 진행하면서 나는 정말 단 한 줄의 코드 조차 치지 않았다 (진짜임)그럼 나는 뭘 했냐?일단 아이디어를 구체화하는데 노력했다초기에 내 아이디어는 대략 이러했다.처음 가보는 지역에 데이트할 곳이나 먹거리나 카페들을 찾는데 너무 여기저기 돌아다녀야하는게 불편했다예를 들어 네이버 ..

터미널에서 어느 순간 잘 동작하던 명령어가 갑자기 실행할 수 없다는 문제는 너무 흔히 접하게 되는 것 같다.OS든 사용하고 있는 툴이 업데이트가 되었거나, 새로운 환경에서는 더더욱 그렇다.사용하고 있는 툴들이 자동 업데이트 설정이 되어있는지 잘 확인해보자.필자 같은 경우에는 docker-desktop 설정을 다음과 같이 해놓았다.항상 최신 버전을 자동으로 체크하고, 백그라운드로 해당 툴을 자동 업데이트 시키도록 해두었다.그러던 어느날 잘 동작하던 스크립트가 갑자기 실행할 수 없는 명령어라면서 종료되어지고 있었다.zsh: command not found: docker-compose  바로 뇌정지가 한번 오긴 했지만, 차분하게 검색해보았다.우선 아래의 링크에서 해결방법을 찾을 수 있었다.https://doc..

2.2.6 도커 볼륨컨테이너의 치명적인 단점?컨테이너를 삭제하면 컨테이너 계층에 저장돼있던 DB 정보도 함께 삭제도커의 컨테이너는 생성과 삭제가 매우 쉬움.💡 데이터를 영속적으로 활용하기 위해 도커 볼륨을 활용 한다.2.2.6.1 호스트 볼륨 공유볼륨을 활용하는 첫 번째 방법-v /home/wordpress_db:/var/lib/mysql # [호스트의 공유 디렉터리]:[컨테이너의 공유 디렉터리]호스트의 /home/wordpress_db 디렉터리와 컨테이너의 /var/lib/mysql 디렉터리를 공유한다는 의미즉, 컨테이너의 /var/lib/mysql 디렉터리는 호스트의 /home/wordpress_db 디렉터리와 동기화되는게 아니라, 완전히 동일한 디렉터리이다.디렉터리 단위 공유뿐만 아니라 단일 파일..

2장. 도커 엔진2.1 도커 이미지와 컨테이너💡 도커 엔진의 기본 단위는 `이미지` 와 `컨테이너` 이다. 즉, 이 기본 단위가 도커 엔진의 핵심이다.2.1.1 도커 이미지이미지는 컨테이너를 생성할 때 필요한 요소가상 머신을 생성할 때 사용하는 iso 파일과 비슷한 개념이미지의 형태[저장소 이름]/[이미지 이름]:[태그] 형식 이다.태그를 생략하면 도커 엔진은 이미지의 태그를 latest 로 인식한다.별도로 설치하는게 아니라, 명령어로 이미지를 내려받을 수 있다.이미지는 여러 계층으로 된 바이너리 파일이다.컨테이너를 생성하고 실행할 때 읽기 전용으로 사용한다. {repository_name}/{image_name}:{tag}2.1.2 도커 컨테이너💡 도커 이미지와 컨테이너는 1:N 관계이다.우분투 ..