스팟에디터 트러블슈팅, 구현
1.인증 엔터셉터 구현
스팟에디터에서 인증 방식은 소셜로그인(카카오)을 이용하였고 jwt 인증 방식은 쿠키 방식을 사용하였습니다.XSS 공격에 안전 (HttpOnly 쿠키로 저장)프론트엔드에서 JWT를 직접 관리할 필요 없음 (자동 포함)브라우저 환경에서는 사용이 편리함CORS 설정이 필요함
2.httpOnly & secure 쿠키(로컬 개발 시 주의할 점)
웹 개발에서 인증 방식으로 httpOnly + secure 옵션이 적용된 쿠키 기반 인증을 사용하는 경우, 로컬 개발 환경과 실제 배포 환경에서 작동 방식이 달라질 수 있다. 쿠키 옵션 요약 httpOnly: 자바스크립트에서 쿠키 접근을 막음 (XSS 방지용) secure: HTTPS 환경에서만 쿠키가 전송됨 SameSite: 크로스 사이트 요청에서...
3.특정 유저의 정보가 수정되지 않는 현상
유저정보 수정페이지를 테스트 하던 중 문제가 발생했다.바로 어떤 유저는 유저 정보 수정이 되고, 어떤 유저는 수정이 되지 않는 것이다.확인해보니 수정되지 않는 유저는 폼 제출 자체가 이루어지지 않았다.이전에 이런 경우를 겪었었는데 zod의 검증에 걸리면 이런 형상이 일
4.페이지네이션 시 최상단으로 이동하는 현상
명시적으로 스크롤 처리하지 않았는데, 페이지네이션 시 페이지 최상단으로 자동 이동커스텀 페이지네이션 컴포넌트setSearchParams() 사용 시 브라우저가 주소를 변경하며 스크롤을 초기화이 함수는 리액트 라우터의 상태 변경 함수인데, 내부적으로는 URL을 변경하면서
5.수파베이스 로그인 흐름 이해하기
이번에 수파베이스의 소셜 로그인 기능을 적용하며 그동안 모호했던 Authentication(인증)과 Authorization(권한) 개념을 전통적인 방식과 비교해가며 정리해봤다.사용자가 누군지 확인하는 절차예시: 사용자가 구글 계정으로 로그인할 때수파베이스의 signI
6.넥스트: 탠스택 쿼리로 로그인 상태를 관리할 때 새로고침 시 UI가 깜빡이는 이유
로그인 상태인 유저임에도 불구하고, 페이지를 새로고침하면<회원가입/로그인> 버튼이 잠깐 보였다가 사라지는 깜빡임 현상 발생클라이언트 컴포넌트 useUser()는 탠스택 쿼리로 /api/user를 요청하지만,페이지 최초 렌더 시점엔 아직 user 데이터가 없음즉,
7.드롭박스 오픈 시 테두리 깜빡이는 현상
motion.section에 애니메이션 적용 시 테두리(또는 그림자)가 깜빡이는 현상 발생Framer Motion의 motion.section 요소에 드롭다운 애니메이션을 적용했을 때드롭다운이 열릴 때 순간적으로 테두리가 깜빡임어떤 브라우저에선 테두리나 그림자가 잠깐
8.프로필페이지 속도개선
마이페이지 저장된 로그 등 콘텐츠 로딩시간이 김서버 데이터 패치 함수에서 시간 측정3초 내외로 줄이지 않으면 유저 이탈 우려현재는 라우터 핸들러를 이용한 api + 클라이언트 fetch 사용dehydrate + HydrationBoundary 방식으로 리팩토링
9.프로필 저장 성능 개선
문제 프로필 저장 시 전체 3~4초 소요 그중 이미지 삭제 + 업로드만 2.5초, 병목 지점으로 확인됨 테스트 측정 방식 테스트 항목(핵심 코드) consol.time을 이용해 저장시간 테스트 개선 전 성능 분석 | 단계 | 소요 시
10.언어 코드가 URL 경로 상에 포함 다국어 라우팅
넥스트js15로 사이트 만들고 다국어 기능을 넣으려다 고민이 생겼다.내가 원하는 건 사용자가 다음과 같이 접속했을 때https://도메인/ko → 한국어 홈페이지https://도메인/en → 영어 홈페이지URL에 언어 코드를 넣어서 각 언어별 페이지로
11.Supabase RLS 성능 경고 해결(auth.uid() 리팩토링)
Supabase에서 RLS(Row Level Security) 정책을 설정할 때,auth.uid() 또는 auth.email() 같은 내장 인증 함수는 각 row마다 반복 평가되기 때문에대량의 데이터 처리 시 심각한 성능 저하를 일으킬 수 있다.Supabase의 Per
12.SSR 캐시 + CSR 캐시 전략 에러
Next.js 15 (App Router) + TanStack Query를 사용해 로그 상세 페이지를 만들고 있었고,서버 컴포넌트에서 로그 데이터를 미리 불러오는 SSR 전략을 사용했다.처음에는 다음과 같은 \*\*전략 3 (SSR 캐시 + HydrationBounda
13.Supabase OAuth 인증 도메인에 Vanity Subdomain 적용하기
Supabase에서 소셜 로그인(Google OAuth 등)을 사용할 때 기본 도메인은 asdfsadfsadfasdf.supabase.co처럼 프로젝트 ID가 노출된다. 이 URL을 spoteditor.supabase.co처럼 깔끔한 서브도메인으로 바꾸는 방법을 정리한
14.사진 기반 자동 위치 입력 기능 구현
우리 서비스에서는 사용자가 특정 장소를 공유할 수 있게 하고 있다.하지만 피드백 중 "위치 직접 입력이 번거롭다. 인스타그램처럼 사진에 위치가 자동으로 잡히면 좋겠다”는 의견이 있었다.“사진에 담긴 GPS 정보를 읽어서 위치를 자동으로 입력하자!”사용자가 사진을 업로드
15.클라이언트 컴포넌트에서 next-intl 번역이 깜빡이는 문제 해결 (FOUT 방지)
Next.js 15 프로젝트에서 next-intl을 사용할 때, 클라이언트 컴포넌트 안에서 다음과 같은 문제가 발생할 수 있다.이렇게 작성했을 때, 초기 렌더링에선 Region.서울처럼 key 값이 그대로 보이다가, 새로고침하거나 hydration 이후에야 정상 번역되
16.Vercel에서 Prisma + Supabase 사용 시 커넥션 풀 초과 에러 해결
Next.js 15 + Supabase + Prisma 조합으로 프로젝트를 배포했더니,Vercel 서버에서 다음과 같은 에러가 발생했다.prisma.log.findMany() 호출 시, DB 커넥션이 터지며 페이지 렌더링 실패Vercel은 서버리스 환경이므로 요청마다
17.백엔드 이탈로 인한 React → Next.js + Supabase 풀스택 전환
프론트엔드 개발자가 혼자서도 백엔드까지 다루며 실제 서비스처럼 만들기 위해,Next.js + Supabase + Prisma 조합이 가장 쉽고 빠른 풀스택 선택지React + Spring Boot로 팀 프로젝트를 하던 중백엔드 담당자 탈주 → API가 완성되지 않음프론
18.Supabase 하나로 글로벌 콘텐츠 분리하기
국내/글로벌 콘텐츠는 완전히 분리글로벌은 처음부터 영어로 작성된 콘텐츠만 사용한국 콘텐츠를 번역해서 쓰지 않음UI 다국어(i18n)는 유지next-intl로 번역 파일 관리 계속향후 글로벌 확장에 집중글로벌 버전은 외국 관광지 중심, 해외 사용자가 메인 타겟유저 계정은