전체 글38 [swimX] react-hook-form + Supabase 타입 불일치 해결하기 🛠️ Next.js 프로젝트에서 react-hook-form, zod, Supabase를 사용해서 일기 작성 폼을 구현하던 중폼과 데이터베이스 타입 간 불일치 문제가 발생했다. 그중 `string enum`과 `number` 타입 간 충돌을 타입 변환 처리를 통해 해결한 과정을 정리했다. 문제 상황수영 일기 작성 흐름은 아래와 같다 :사용자 입력 ↓React Hook Form (SwimFormData, zod 스키마 검사) ↓변환 함수 (toSwimLog) ↓SwimLog 구조로 전환 (중첩 구조 포함) ↓Supabase 저장 (insertSwimLog), zustand 저장 (setLog) react-hook-form을 통해 수집된 폼 데이터는 SwimFormData 타입으로 들어오며, 이 타입은 .. 2025. 4. 18. [SwimX] Next.js15+NextAuth 연동 시 발생한 authOptions export 에러 해결하기 문제상황 src/app/api/auth/[...nextauth]/route.ts Type error: Route "..." does not match the required types of a Next.js Route. "authOptions" is not a valid Route export field. 원인 authOptions가 Export 되면서 Next.js의 라우트 타입 체계와 충돌 Next.js 13~15(app router 기반)에서 app/api/**/route.ts는 라우트 핸들러만 export 가능한 특별한 파일이다.export const authOptions = {...}; // ← 이게 문제!const handler = NextAuth(authOptions);export { h.. 2025. 4. 4. [SwimX] NextAuth 데모 로그인 기능 구현 - 세션 쿠키 정체 파헤치기 🍪 기술스택 요약, 기능 소개역할설명NextAuth로그인/로그아웃/세션 관리 담당 (OAuth, Credentials 등 지원)Supabase사용자 및 수영 기록 등 데이터를 저장하는 용도 (DB 역할)Credentials Provider이메일/비밀번호로 직접 인증 (직접 로직 작성 가능) Supabase 인증 기능을 쓰지 않고, NextAuth의 Credentials Provider를 활용해 authorize 함수 내부에서 demo 계정 인증 로직을 직접 작성했다. 로그인 페이지에서 데모 버튼 눌렀을 때 authorize( )에 작성한 조건을 통과하면 NextAuth가 세션을 생성하고, 브라우저에 저장된 쿠키를 통해 인증 상태를 유지하게 된다. 로그인 후 생기는 쿠키 정체 파헤치기 쿠키 이름의미 및 역할.. 2025. 4. 3. [SwimX] Next.js 서버 컴포넌트와 인증 분리로 NextAuth 에러 해결 🛠️ TL;DR Next.js App Router(15+), Supabase로 진행하는 프로젝트에서 서버 컴포넌트로 작성한 헤더 내부에서 NextAuth의 useSession()을 사용하자 런타임 에러가 발생했다. SessionProvider가 필요한 클라이언트 컴포넌트를 서버 트리에서 렌더링했기 때문이었다. 해결을 위해 인증 UI 컴포넌트(로그인 버튼)만 클라이언트로 분리하고, layout.tsx에서는 와 children 모두를 로 감싸는 구조로 수정했다. 문제 상황 기술 스택: Next.js 15 App Router, NextAuth(Credentails), Supabase(DB전용, 인증은 NextAuth 처리)목표: SSR이 가능한 를 서버 컴포넌트로 유지하면서 로그인/로그아웃 버튼은 useSessi.. 2025. 4. 3. [동네zip] React 모달창 버튼 클릭 오류, 알고 보니 이벤트 버블링?! 🫧 이론으로만 접했던 이벤트 버블링 문제를 실제 프로젝트에서 처음 경험했다.처음 CORS 에러를 마주했을 때처럼, '네가 말로만 듣던 걔구나! ㅋㅋㅋ'싶어서 순간 반가운(?) 마음이 들기도 했다.문제 상황 중고 거래 물품 목록 페이지에서 비로그인 사용자가 '찜(하트 아이콘)'을 클릭했을 때, 로그인 모달을 띄우는 기능을 구현했다.그런데 모달 내 `[로그인하기]` `[닫기]` 버튼을 클릭해도 의도와 다르게 [물품 상세 페이지]로 이동하는 현상이 발생함 🚨 상황을 요약하면 다음과 같다.`ProductCard`에는 클릭 시 상세 페이지로 이동하는 이벤트가 등록되어 있음`ModalLogin` 컴포넌트 내 버튼 클릭 시 이벤트가 부모 요소인 `ProductCard`까지 전파되면서 이동 이벤트까지 실행됨따라서 모.. 2025. 3. 5. [알고리즘] 01 개요, 대표적인 설계 방법 알고리즘이란?알고리즘 : 문제 풀이 절차 / 방법→ 비유하자면 요리 레시피처럼 단계적인 처리 절차에 따라 주어진 답을 구하기 알고리즘 4가지 조건입출력 : 0개 이상의 입력과 1개 이상의 출력 생성해야함명확성 : 각 명령은 명확해야함유한성 : 한정된 수의 단계를 거친 후 반드시 종료해야함유효성 : 컴퓨터에서 처리할 수 있어야함 + (실용적 조건) 효율성 알고리즘 생성 단계 대표적인 알고리즘 설계 방법욕심쟁이 방법분할정복 방법동적 프로그래밍 방법 욕심쟁이 방법= 탐욕적 방법, 탐욕 알고리즘, greedy 알고리즘 전략 : 각 단계마다 국부적인 최적 해를 선택해나가면 전체적인 최적해를 구할 수 있다활용 : 최소값, 최대값 구하는 최적화 문제한계 : 국부적인 최적해들이 전체적인 최적해를 구성하지 못할 수 있음.. 2025. 3. 4. 이전 1 2 3 4 ··· 7 다음
