수구리의 데브로그

Remix에서 Server Action과 Client UI 간 데이터 흐름 버그 해결하기

문제 상황비밀번호 재설정 기능을 구현하던 중, 성공 메시지와 카운트다운 타이머가 전혀 동작하지 않는 버그를 발견했습니다. 코드를 살펴보니 성공 UI와 관련된 로직이 완전히 데드코드(Dead Code)가 되어 있었습니다.// 이 코드는 절대 실행되지 않았습니다{actionData && 'success' in actionData && ( 비밀번호가 성공적으로 변경되었습니다! 로그인 페이지로 이동합니다... {countdown > 0 && ` (${countdown}초)`} )}// 이 useEffect도 마찬가지로 실행되지 않았습니다useEffect(() => { if (actionData && 'success' in actionData) { setCountdown(3) // 카..

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

DAY7: 달력 컴포넌트, 관리자 유저 관리, 마케팅 동의 시스템 구축📋 개요DAY6에서 이미지 업로드 시스템과 장소 등록 기능이 완전히 완성된 후, DAY7에서는 여러 핵심 기능을 동시에 개발했습니다. 사용자 경험 개선을 위한 달력 컴포넌트 구현, 관리자 유저 관리 기능 강화, 마케팅 정보 수신 동의 시스템 구축, 그리고 전체적인 UI/UX 통일 작업까지 진행했습니다.🎯 DAY7 목표주요 개발 영역달력 컴포넌트 시스템: 기존 HTML date input을 한국어 친화적 달력으로 교체관리자 유저 관리 시스템: 유저별 장소 수 집계, 권한 관리 기능 완성마케팅 동의 관리: 개인정보보호 강화를 위한 마케팅 정보 수신 동의 토글 시스템프로필 시스템 확장: 내정보 페이지 추가 및 사용자 프로필 관리UI/UX..

“PR 설명 좀 제대로 써주세요…”반복되는 잔소리를 끝내고, AI가 코드 diff를 읽어 PR 템플릿을 자동으로 메워주는 워크플로를 구축한 과정을 정리했다. 그대로 가져다 써도 되고, 팀 상황에 맞게 변형만 해도 된다.GitHub Action이 PR diff를 수집diff를 OpenAI API로 전송 → 시스템 프롬프트로 요약 포맷 강제응답을 PR 본문에 삽입결과 미흡하면 프롬프트만 조정1. 배경 - 왜 자동화?코드 변경량이 커질수록 설명은 더 조잡해졌다.“주요 기능 몇 개만 요약해줘”라는 리뷰어 요청이 반복.ChatGPT를 수동으로 돌리니 → 답변 패턴이 들쭉날쭉.그래서 아예 PR 생성 트리거로 AI 요약을 강제했다.2. 시퀀스 다이어그램3. GitHub Action 코드name: Auto-fill P..

최근 프로젝트에서 cursor bug bot이 생겼는데 공짜라서 유용하게 써보고 있습니다.어떤 기능 개발을 한 뒤에 PR을 작성하게 되면 깃헙 액션을 통해서 알아서 어떤 버그를 발생시킬 수 있는지 문제가 없는지 확인을 해주는 건데요아래와 같은 버그 리포팅을 버그봇으로 부터 받게 되었고, 그 문제를 어떻게 해결을 시켰었는지 한번 작성해보도록 하겠습니다. 이전 매니저의 매니저프리 신청건을 취소처리하는 비동기 함수기능이었습니다.발생할 수 있는 버그는 바로 Mutable Default Argument 버그입니다.🚨 예시 버그 상황def add_item(item, my_list=[]): my_list.append(item) return my_list# 첫 번째 호출result1 = add_item("..

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..

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)검색..

이번 단계에서는 유저가 직접 장소를 등록할 수 있는 기능을 개발해보았다.추후에는 본인이 등록한 장소들 또는 기존에 다른 유저가 등록한 장소들을 가지고 코스를 등록할 수 있도록 기획을 해볼 예정이다!새로운 데이터베이스 스키마를 추가했고 유저의 무분별한 장소 등록을 방지하고자 하루에 최대 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개 조항의 상세한 서비스 이용약관서비스 이용 목적 및 범위회원가입 및 계정 관리개인정보 처리 및 보호서비스 이용 규칙콘텐츠 및 지적재산권서비스 제공 및 ..