devyu0001 님의 블로그

✅ 왜 이 조합이 최적인가?1. React Hook Form – 폼 상태 관리입력값 상태, 에러, 제출 상태 등을 효율적으로 관리성능 최적화에 강함 (필드별로 렌더링 최소화)2. Zod – 유효성 검사타입 기반 스키마로 선언적이고 일관된 검사TypeScript와 타입 추론 연동 → 코드 오류 감소zodResolver로 React Hook Form과 통합3. useFormState – 성능 최적화 + 세밀한 상태 추적특정 필드의 에러나 변경 여부만 구독 가능 → 불필요한 리렌더링 방지예: 비밀번호 입력 시 에러 메시지나 경고만 업데이트4. 서버 액션 (server actions) – 보안 및 백엔드 처리Next.js 13+에서는 서버 액션을 사용해 폼 데이터를 서버에서 직접 처리 가능POST API를 따로..

구현 내용MyPage에서 회원탈퇴 시, users 테이블의 is_deleted 필드를 true로 업데이트하여 소프트 삭제 방식으로 처리했습니다.탈퇴 이후에는 사용자를 자동으로 로그아웃시키고 홈 화면으로 이동시켰습니다.구현 이유실제 데이터를 바로 삭제하지 않고 소프트 삭제를 적용함으로써, 데이터 복구나 관리가 필요한 상황을 대비할 수 있도록 했습니다.주요 기술 및 흐름Supabase로 is_deleted 업데이트Zustand로 사용자 상태 초기화Next.js useRouter로 홈 리다이렉트탈퇴 버튼 클릭 시 확인 모달을 통해 UX 개선배운 점회원탈퇴 같은 민감한 기능에서는 단순 삭제가 아니라 데이터 보존과 복구 가능성까지 고려해야 하며, 탈퇴 후 상태 초기화 및 리다이렉트 흐름을 부드럽게 이어주는 것이 ..

로그아웃 후에도 이전 데이터가 남아있는 문제문제 상황로그아웃 시 queryClient.clear()를 사용해 캐시 초기화하며, 캐시를 초기화한 후에 스토리지에 남아있는 부분까지 비워주었습니다.해결 방법로그아웃 시 queryClient.clear()를 사용해 캐시 초기화 const handleLogout = async () => { try { await supabase.auth.signOut(); queryClient.clear(); logout(); // Zustand 상태 초기화 localStorage.removeItem("auth-storage"); // Zustand 캐시 제거 router.push("/login"); // 로그인 페이지로 이동 ..

로그인 회원가입을 얼추 만들고 로그인 하고 새로고침을 해도 유지가 되게 하기 위해서 Zustand middleware persist를 사용해 보려고 한다🟢 Zustand persist란?Zustand의 persist는 상태(state)를 브라우저의 localStorage나 sessionStorage 등에 저장하여 새로고침 후에도 유지할 수 있도록 하는 기능입니다. 먼저 src/stores/store.ts를 만들어서 아래 코드를 작성합니다import { create } from "zustand";import { persist } from "zustand/middleware";import { User } from "@supabase/supabase-js"; // Supabase 유저 타입interface ..

회원가입을 할때 ID, Password, nickname을 작성하면 nickname이 supabase users 테이블에 추가 되게 하려고 한다아래 블로그를 참고 하면서 작성을 했는데 잘 안된다..https://velog.io/@39busy/supabase-auth [supabase] Supabase 이메일 로그인/회원가입 with Next.jsSupabase + Next.js로 이메일 로그인/회원가입을 구현한다. 데이터베이스에 사용자 정보를 자동으로 등록하는 것까지!velog.io users 테이블은 이런식으로 되어있다블로그를 참고해서 이런식으로 SQL Data를 작성했는데 500 error가 나왔다...;;-- public.users에 function 추가create function public.ha..

팀 프로젝트를 하는데 로그인, 회원가입 페이지를 맡게 되어 어떻게 할지 생각하던 중 튜터님이 React Hook Form을 이용해서 만들면 될 것 같다고 하셔 알아보니 useForm이란 것을 알게 되었다 useForm은 React Hook Form 라이브러리에서 폼 데이터를 관리하고 검증하는 데 사용하는 훅(hook)입니다. 이 훅을 사용하면, 간단하게 폼을 만들고, 폼 입력 값의 상태를 추적하며, 유효성 검사와 에러 메시지를 처리할 수 있습니다.useForm의 주요 기능useForm을 호출하면 여러 가지 중요한 함수나 객체가 반환됩니다. 예를 들어, register, handleSubmit, formState 등이 그것입니다.const { register, handleSubmit, formState: ..

프로젝트를 하던중 로테이션 데이터를 불러오는 중 데이터는 들어오는 데 Promise 객체를 받아오는 경우가 있었다왜 이렇게 나오는 걸까?비동기 데이터 처리 과정 중 (pending 상태)Promise는 비동기 요청이 완료되지 않은 상태에서 pending 상태로 남아 있을 수 있어.하지만 네트워크 요청이 정상적으로 완료되면 fulfilled 상태가 되면서 데이터를 포함하게 돼.비동기 데이터를 올바르게 처리하지 못한 경우await을 사용하지 않고 Promise를 콘솔에 찍으면 위와 같은 Promise { } 상태로 보일 수 있어.예를 들어, 다음 코드처럼 fetch 요청을 콘솔에서 직접 확인하면 pending 상태일 수 있어const championRotationData = fetchChampionRota..

프로젝트를 하던중 타입스크립트를 사용하니까 any타입으로 지정하면 안되고 명확하게 타입을 지정해서 오류를 만들지 않아야 한다!! //최신 버전 가져오기async function getLatestVersion(): Promise { try { const res = await fetch( "https://ddragon.leagueoflegends.com/api/versions.json" ); if (!res.ok) throw new Error("Failed to fetch versions"); const data = await res.json(); return data[0]; } catch (error: any) { error는 상관없는줄 알았는데 yarn bui..

파비콘이란??브라우저 탭에 제목 옆에 아이콘을 말한다. 프로젝트를 하던중 파비콘도 변경하고 싶어서 검색을 해보니src 폴더안에 public 폴더를 만들고 그안에 이미지를 넣고 제일 상위 layout.tsx 파일에 아래와 같이 입력하면 된다고하는데 잘 되지않았다.export const metadata: Metadata = { title: "League of Legend Info", description: "League of Legend API를 활용한 정보 앱", icons: { icon: "/src/public/파비콘.png", },};찾아보던중 public 폴더를 src폴더와 같은 선상에 놓고 다시 경로를 적으면 바뀌긴 했는데 원래는 src폴더안에 public 폴더가 위치해 있어야 한다고 ..

프로젝트를 하던중 메타데이터를 설정하여 SEO를 향상시킵니다 라는 요구사항이 보였다🤔 메타데이터는 뭘까???검색해본 결과 페이지에 보이지는 않지만 페이지의 HTML속에 포함되어있는 웹페이지의 추가적인 정보들을 말한다고 한다.왜 중요한가???메타데이터는 웹페이지의 SEO에서 중대한 역할을 차지하고 있다. 서지 엔진들과 소셜 미디어 플랫폼들이 페이지에 더 잘 접근하고 더 잘 이해할 수 있게 해주는 역할을 수행한다. 검색 결과의 랭킹을 향상시키는데 도움을 준다 SEO는 무엇인가??SEO(검색 엔진 최적화, Search Engine Optimization)는 웹사이트나 웹 페이지가 검색 엔진에서 더 높은 순위에 노출되도록 최적화하는 과정입니다.SEO를 잘 활용하면 웹사이트의 트래픽을 늘리고, 사용자 경험을 개..