전체 글 (106) 썸네일형 리스트형 TIL - 운동 기록 루틴 Supabase 연동 운동 루틴 등록 API 구현import { createClient } from '@/supabase/server';import { NextRequest, NextResponse } from 'next/server';export const POST = async (request: NextRequest) => { try { const supabase = createClient(); // 사용자 인증 확인 const { data: { user }, error: authError, } = await supabase.auth.getUser(); if (authError || !user) return NextResponse.json({ error: 'Unauthoriz.. TIL - 드롭다운 구현 select에서 커스텀 button+ul로의 전환 초기 설계 의도:목표: 텍스트 입력과 드롭다운 선택을 모두 지원하는 범용 Input 컴포넌트 생성접근 방식: InputText와 InputSelect를 하나의 Input 컴포넌트로 통합type InputProps = (InputTextProps | InputSelectProps) & { isDropdown?: boolean };초기 구현의 문제점:InputSelect에서 HTML 요소 사용 시도타입 정의type InputSelectProps = BaseInputProps & ComponentProps & { dropdownOptions: string[];};발생한 문제:스타일링 제한: 의 드롭다운 모양 커스터마이징의 어려움타입 불일치: select 속성과 필요한 커스텀 기능 간 충돌이벤트 처리의 복잡.. TIL - border bottom 그라데이션 구현하기 오늘 input 요소의 border-bottom에 그라데이션을 적용하는 과정에서 여러 방법을 시도하고 학습했습니다. 1. border-image 속성 사용 (첫 번째 시도): - 시도한 코드:'border-image': 'linear-gradient(to right, #12F287 0%, rgba(18, 242, 135, 1) 50%, #12F287 100%)1 - 문제점: 시작과 끝 부분이 rgba가 아니어서 그라데이션 효과가 제대로 나타나지 않았음2. Tailwind plugin을 사용한 방법 (두 번째 시도): - tailwind.config.js에 다음과 같은 plugin 추가: plugin(function ({ addUtilities }) { const newUtilit.. 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 방식으로 전환하여 보안 강화 결론 서버리스 환경에서의 이메일 인증 구현은 예상보다 복잡할 수 있습니.. 이전 1 2 3 4 5 6 ··· 14 다음
