Minji Log

마이페이지 수정 기능을 진행 중이다. 구현해야 할 것은 닉네임 수정하기이다. React Hook Form 을 사용하기 전에는 useState 로 닉네임 상태를 관리하였고 DB 에서 조회한 정보로 setNickname() 해주면 됐는데.. react hook form 은..? 이 사항을 놓치고 있어서 수정페이지 가면 DB 에서 가져온 유저 정보가 보이지 않는다. 보통 수정페이지 가면 원래 설정해 놓은 정보가 뜨기 마련이니.. 나는 기존 정보를 표시해 줄 데이터가 필요했다..! 이슈React Hook form 을 사용할 때 DB 에 있는 기존 정보를 화면에 어떻게 보여주어야 하는가? 현재는 수정 버튼을 누르면 기존의 닉네임이 보이지 않는다. 해결이것저것 찾아보니.. setValue 가 있었다. 생각보다 쉽게..

이메일 전송 const { data: resetData, error } = await supabase.auth.resetPasswordForEmail(email, { redirectTo: window.origin + '이메일 변경 페이지 경로', }); 비밀번호 변경 const { data, error } = await supabase.auth.updateUser({ password: newPassword, }); 참고공식문서

프로젝트에서 마이페이지 개발을 맡았다. 마이페이지에는 유저의 프로필 이미지를 등록하는 기능이 있다. 프로젝트 주제가 프라이빗한 공간에서 여행을 기록하는 것이기 때문에 유저의 프로필 이미지는 보안이 중요하다고 생각했다.  데이터베이스는 수파베이스를 사용 중이어서 알아봤더니 signed URL 을 만들 수 있는 것을 제공한다. 이거를 사용하기로 했다.  signed URL 이란 서명된 URL 을 의미하는데 사진 링크에 만료 시간을 설정하여 해당 시간 동안만 유효한 URL 이다. signed URL 을 사용하면 링크가 만료되면 해당 링크에 대한 데이터에 접근할 수 없어서 보안이 강화된다.  구조signed url 을 사용하기 위해 프로필 이미지를 어떻게 관리해야 할지 고민이 필요했다. 왜냐gk면 이미지 링크를..

react hook from 과 zod 를 사용해서 회원가입 폼을 만들었다. React hook Form 설치yarn add react-hook-form Zod 설치yarn add zod// react hook form 이랑 같이 사용할 때 설치yarn add @hookform/resolvers 코드"use client";import { FieldValues, useForm } from "react-hook-form";import { z } from "zod";import { zodResolver } from "@hookform/resolvers/zod";import Link from "next/link";import { useRouter } from "next/navigation";import { si..

푸터의 위치를 원하는대로 배치해보자. 챔피언 목록처럼 데이터가 많아서 스크롤이 생길 경우 푸터가 자연스럽게 아래로 가게 되는데, 챔피언 상세 화면에서 스크롤이 생길 정도로 데이터가 많지 않으면 푸터가 중앙에 자리 잡고 있는 현상이 발생했다. 😮‍💨 문제점목록은 푸터가 내가 원하는 대로 알아서 아래에 잘 자리 잡고 있다. 그러나. . 챔피언 상세 페이지에서는...데이터의 양이 적기 때문에 스크롤이 생기지 않고 애매한 중앙에 위치해 있는 상태가 되었다. 내가 원하던 것은.. 스크롤이 생기면 스크롤이 끝나고 푸터가 보이고, 데이터가 별로 없어서 스크롤이 생기지 않는다면 뷰포인트 하단에 푸더가 보이도록 하는 것이다. 이를 해결해 보자. 변경 전 코드 홈 ..

키 발급riotgames developer 에 접속하여 Key 를 받아보자. 로그인 완료 후 MY ACCOUNT - DASHBOARD 에서 API KEY 를 발급한다. 환경변수루트 경로의 .env.local 에 발급받은 key 를 넣는다. NEXT_PUBLIC_RIOT_API_KEY=RG...-5.....-45......d......위와 같은 방식으로 key 를 넣어주면 완료