전체 글 (106) 썸네일형 리스트형 TIL - supabase 비밀번호 재설정 트러블 슈팅 문제비밀번호 재설정 이메일의 URL로 접근 시, 일회성 토큰이 제대로 인식되지 않는 문제가 발생했습니다.원인일회성 토큰이 유효한 인증 세션으로 자동 변환되지 않았기 때문입니다.해결 방법이 문제를 해결하기 위해 supabase.auth.exchangeCodeForSession() 메서드를 사용하여 일회성 토큰을 유효한 인증 세션으로 교환했습니다. import { createClient } from '@/supabase/server';import { NextRequest, NextResponse } from 'next/server';export async function POST(request: NextRequest) { const { newPassword, token } = await request.js.. TIL - 소셜 로그인 리다이렉트 트러블 슈팅 (Next.js, supabase) 트러블 슈팅 과정 요약문제 발견: 기존의 클라이언트 측 리다이렉션 방식에서 CORS 문제로 인해 리다이렉션이 실패했습니다.문제 분석: Supabase 미들웨어가 CORS 문제를 해결하지 못했습니다.해결 방법: 클라이언트 측에서 직접 리다이렉션하도록 코드 변경을 시도했으나, 최종적으로 서버 측에서 직접 리다이렉션 처리로 변경했습니다.결과: 서버 측에서 직접 리다이렉션하여 CORS 문제 없이 소셜 로그인 리다이렉션이 정상적으로 작동했습니다.시도한 접근 방식CORS 문제 해결 시도: Supabase의 미들웨어에서 CORS 문제를 처리한다고 했지만, 실제로 처리되지 않았습니다.리디렉션 URL 확인: Supabase의 리디렉션 URL을 로그창에서 확인하고, 해당 URL을 반환하도록 변경했습니다.직접 리다이렉션 시.. TIL- 로그인 상태 관리 기술적 의사결정 및 트러블 슈팅 기술적 의사결정현재 프로젝트는 Next.js 14 버전에 Supabase를 사용하여 모든 서버 요청을 통해 로그인 상태를 관리하고 있습니다. 따라서 서버 상태 관리에 최적화된 라이브러리인 TanStack Query를 사용하는 것이 더 적합하다고 판단하여, 로그인 상태 관리를 TanStack Query로 결정하였습니다. 트러블슈팅Supabase 미들웨어에서 사용자 인증을 처리하는 코드에서 문제가 발생했습니다. 원래 코드에서는 특정 경로에 대해 사용자가 로그인하지 않은 경우 로그인 페이지로 리디렉션하는 로직이 다음과 같았습니다: if ( !user && !request.nextUrl.pathname.startsWith('/login') && !request.nextUrl.pathname.startsWi.. TIL - 프로젝트 선정 과정 및 최종 결정 배경 최종 팀 프로젝트로 처음에는 헬스 트래킹 웹사이트를 기획했습니다. 하지만 프로젝트의 주기능과 타겟 사용자에 대한 고민 끝에, 헬스 커뮤니티 사이트로 전환하게 되었습니다. 이 과정에서 많은 논의와 결정이 필요했습니다. 고민처음 기획했던 헬스 트래킹 웹사이트는 실시간 데이터 시각화와 트래킹 기능이 중심이었습니다. 하지만 모바일 어플리케이션이 더 적합할 것이라는 우려가 있었고, 웹 브라우저 환경에서는 사용자 참여가 저조할 가능성이 있다고 판단했습니다.전환 과정: 헬스 커뮤니티 사이트새로운 기획디자이너와의 회의 끝에, 프로젝트의 주기능과 이름을 헬스 커뮤니티 사이트로 전환하기로 결정했습니다. 이는 사용자들이 웹 환경에서 더 유용하게 사용할 수 있을 것이라는 판단에 따른 것입니다. 결론이번 TIL을 통해 헬.. TIL - 타입스크립트 타입 가드와 타입 좁히기 개요오늘은 타입스크립트의 타입 가드와 타입 좁히기 개념을 복습했습니다. 이러한 기능은 특정 스코프 내에서 올바른 타입을 보장하여 더 안전하고 정확한 코드를 작성할 수 있게 해줍니다. 주요 내용은 다음과 같습니다. 타입 가드와 타입 좁히기2-1. typeof와 instanceof타입 가드는 특정 스코프 내에서 변수의 타입을 보장하는 표현식입니다. 이를 통해 더 안전하고 명확한 코드를 작성할 수 있습니다. function printAll(strs: string | string[] | null) { if (typeof strs === "string") { console.log(strs.toUpperCase()); } else if (Array.isArray(strs)) { .. TIL - Next.js 클라이언트 컴포넌트에서 API 토큰 관리 문제 트러블 슈팅 문제 상황무한 스크롤 기능을 구현하면서 클라이언트 컴포넌트에서 Spotify API에 직접 요청을 보내야 했습니다. 그러나 API 토큰이 서버 측에서만 관리되고 있어 클라이언트에서 API 요청을 할 수 없는 문제가 발생했습니다. 특히 빌드 과정에서 다음과 같은 문제가 있었습니다:로컬 개발 환경에서는 API 라우트 핸들러가 정상적으로 작동했지만,빌드 시에는 로컬 서버가 실행되지 않아 API 라우트 핸들러에 요청을 보낼 수 없었습니다.해결 방안이 문제를 해결하기 위해 spotify.api.ts 파일에 다음과 같은 코드를 추가했습니다:async getAccessToken() { if (typeof window !== 'undefined') { const response = await fetch('/ap.. TIL - 효율적인 데이터 Fetching 전략: 벌크 vs 개별 요청 데이터 Fetching의 중요성1. 사용자 경험(UX) 향상:빠르고 효율적인 데이터 로딩은 사용자 만족도를 크게 높입니다.지연 시간을 최소화하여 앱의 반응성을 개선합니다.2. 성능 최적화:불필요한 데이터 전송을 줄여 네트워크 대역폭을 절약합니다.서버 부하를 감소시켜 전체 시스템의 효율성을 높입니다.3. 리소스 관리:클라이언트와 서버 모두의 리소스(메모리, CPU 등)를 효율적으로 사용합니다.모바일 기기에서 특히 중요한 배터리 소모를 줄일 수 있습니다.벌크 요청 방식 (getMultipleTrackDetails)구현 방법:Spotify API를 사용하여 벌크 요청을 구현하는 예시async getMultipleTrackDetails(trackIds: string[]): Promise { const acce.. TIL - Next.js와 Zustand를 사용한 상태 관리 및 SSR 하이드레이션 소개Next.js는 React 프레임워크로, 서버 사이드 렌더링(SSR)과 정적 사이트 생성을 지원합니다. Zustand는 경량 상태 관리 라이브러리로, 간단하고 직관적인 API를 제공합니다. 이 두 가지를 결합하면 강력한 상태 관리와 효율적인 SSR 하이드레이션을 구현할 수 있습니다 학습 내용Zustand 설정스토어 생성: createCounterStore를 사용하여 상태 관리 스토어를 초기화합니다.import create from 'zustand';const createCounterStore = (set) => ({ count: 0, increase: () => set((state) => ({ count: state.count + 1 })), decrease: () => set((st.. 이전 1 2 3 4 5 6 7 ··· 14 다음