분류 전체보기 (103) 썸네일형 리스트형 TIL - 하단 네비게이션 바 구현 오늘 학습 내용:SVG 아이콘 컴포넌트화svgr 라이브러리를 사용하여 SVG 파일을 React 컴포넌트로 변환아이콘의 active 상태를 props로 전달하여 동적 스타일링 구현조건부 렌더링네비게이션 아이템의 active 상태에 따라 다른 스타일 적용사용자의 현재 위치를 시각적으로 명확히 표시커스텀 그라디언트 배경Tailwind CSS의 기본 그라디언트로 원하는 효과를 얻지 못함radial-gradient를 사용한 커스텀 배경 구현: background-image: radial-gradient(50% 50% at 49.54% 100%, rgba(18, 242, 135, 0.3) 0%, rgba(18, 242, 135, 0) 100%); SVG 아이콘 컴포넌트화와 동적 스타일링 과정에서 기존 라이브러리나 .. TIL -회원가입 폼 컴포넌트 리팩토링을 통한 코드 구조 개선 이전 퍼널 구조 관련 글TIL - 회원가입 폼 퍼널 구조로 개선, 로그인 유지 기능 구현TIL - 퍼널 구조 개선오늘 학습한 내용복잡한 회원가입 로직의 분리와 구조화React 컴포넌트의 책임 분리 원칙 적용코드 가독성과 유지보수성 향상 초기 상태모든 회원가입 로직이 SignUpForm 컴포넌트에 집중코드의 복잡성으로 인한 가독성 및 유지보수 어려움리팩토링 과정 a. 퍼널 구조 도입단계별 회원가입 프로세스 구현사용자 경험 개선 및 로직 분리 시작b. SignUpForm 역할 재정의, 컴포넌트 분리EssentialInfoForm, AdditionalInfoForm 등 단계별 컴포넌트 생성각 단계의 로직을 해당 컴포넌트로 이동전체 회원가입 프로세스 상태 관리단계별 폼 렌더링 제어전체 로직 흐름 관리리팩토링 결.. TIL - 퍼널 구조 개선 회원가입 퍼널 구조 구현오늘은 회원가입 퍼널 구조(이메일 -> 닉네임 -> 비밀번호 -> 성공)를 다음과 같이 재구성했습니다:회원가입 (이메일, 닉네임, 비밀번호 입력)유저 추가 정보 입력 (키, 몸무게, 프로필 이미지)회원가입 성공 페이지주요 작업 내용회원가입 퍼널 구조 변경기존의 회원가입 프로세스를 재구성하여 필수 입력 사항(이메일, 닉네임, 비밀번호)과 선택 입력 사항(추가 정보 입력)으로 나누었습니다.이메일 및 닉네임 중복 확인 기능 구현입력한 이메일과 닉네임이 중복되지 않도록 서버와 통신하여 중복 여부를 확인하는 기능을 추가했습니다.리팩토링 작업이메일과 닉네임 중복 확인 기능을 한 파일로 합쳐 공통된 부분을 리팩토링했습니다.초기 데이터 폴더 구조 개선data/authInitialState.ts .. TIL - 회원가입 폼 퍼널 구조로 개선, 로그인 유지 기능 구현 오늘은 기존 회원가입 폼을 개선하고, 퍼널 구조로 변환하여 사용자 경험(UX)을 향상시키는 작업을 진행했습니다. 주요 작업 내용회원가입 폼 개선:기존 회원가입 폼을 퍼널 구조로 개선각 단계별로 유효성 검사를 추가하여 입력 데이터의 무결성을 보장유효성 검사 규칙 설정:이메일 유효성 검사: 입력 값에 "@" 기호가 포함되어 있는지 확인.닉네임 유효성 검사: 닉네임이 최소 2자 이상인지 확인.비밀번호 유효성 검사: 비밀번호가 기준을 충족하는지 확인 (예: 최소 길이, 특수 문자 포함 등).단계별 회원가입 과정:이메일 입력: 유효한 이메일 주소인지 검사.닉네임 입력: 닉네임이 적절한지 검사.비밀번호 입력: 비밀번호와 비밀번호 확인이 일치하는지 검사.회원가입 완료: 회원가입 성공 메시지와 함께 홈으로 이동할 수 .. TIL - 서버리스 환경에서의 이메일 인증 구현 및 비밀번호 재설정 방식 개선 오늘 배운 점:서버리스 환경 고려의 중요성:Next.js 서버의 불안정성 인식항상 가용한 이메일 전송 서비스의 필요성 이해이메일 서비스 비교 분석:EmailJS: 클라이언트 사이드 전송 가능, 보안 위험 존재SendGrid: 회원가입 절차 복잡, 구현 어려움Nodemailer: 서버리스 환경 구축 시 설정 문제 발생보안 중요성 재확인:클라이언트 사이드 전송 시 인증 코드 노출 위험 인지더 안전한 인증 방식 필요성 인식기존 리소스 활용의 이점:Supabase Magic Link 기능 재평가기존 솔루션 활용으로 개발 시간 단축 및 안정성 확보OTP 방식 도입:비밀번호 재설정 프로세스 개선URL 기반에서 OTP 방식으로 전환하여 보안 강화 결론 서버리스 환경에서의 이메일 인증 구현은 예상보다 복잡할 수 있습니.. 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.. 이전 1 2 3 4 5 6 ··· 13 다음
