[✈️ 최종프로젝트] 배포 환경에 따라 다르게 보이는 오류 메세지

✏️ 문제 상황로그인 로직에서 사용자가 잘못된 이메일 또는 비밀번호를 입력할 경우 "잘못된 이메일 또는 비밀번호입니다." 라는 alert 메시지가 나타나도록 개발했다.이 로직은 개발 모드에서는 정상적으로 동작했으나, 프로적션 모드에서는 사용자 정의 메시지가 아닌 서버 오류 메시지가 알림창에 그대로 노출되는 문제가 발생했다. 🤯해당 오류가 발생하는 원인을 파악해 보고 해결한 방법을 정리해 보자!! ✏️  오류프로덕션 모드에서 기대한 결과개발모드에서는 의도한 대로 메시지가 표시되었다. 프로덕션 모드에서 실제 결과하지만 프로적션 모드에서는 아래와 같이 서버 오류 메시지가 그대로 노출되었다. ㅜㅜ ✏️  원인 분석이 문제는 Next.js 와 같은 프레임워크의 프로덕션 빌드 환경 특성 때문에 발생한 것이었다.프..

• format_list_bulleted 🔥 프로젝트
• · 2024. 11. 17.
• textsms

[✈️ 최종프로젝트] supabase 에서 transaction 적용하기

✅ 개요게시글 삭제 기능을 구현하는 과정에서, 게시글을 삭제할 때 해당 게시글에 연관된 이미지도 함께 삭제되어야 한다. 이 작업은 게시글과 이미지 두 개의 테이블에서 업데이트가 이루어져야 하며, 둘 중 하나라도 실패할 경우 데이터 무결성이 깨질 위험이 있다.  그러나... 수파베이스는 현재 트랜잭션을 간편하게 지원하지 않는다고한다. supabase Discussion 에도 언급되었듯, 수파베이스는 PostgreSQL 을 기반으로 하고 있어서 PostgreSQL 에서 제공하는 함수를 이용하면 특정 쿼리에 대해 트랜잭션을 적용할 수 있다! 🥹 따라서 두 요청(게시글 삭제/이미지 삭제) 을 안전하게 처리하려면 PostgreSQL 함수를 작성하여 트랜잭션을 적용해 보도록 하자. ✅ 함수 만들기PostgreSQ..

• format_list_bulleted 🔥 프로젝트
• · 2024. 11. 15.
• textsms

React Hook Form 의 setValue 를 사용하여 초기값 설정

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

• format_list_bulleted 🔥 프로젝트
• · 2024. 11. 5.
• textsms

[✈️ 최종 프로젝트] supabase 이메일 링크를 통한 비밀번호 변경

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

• format_list_bulleted 🔥 프로젝트
• · 2024. 10. 27.
• textsms

[✈️ 최종프로젝트] supabase storage private bucket 사용해보기 (signed url 과 함께...)

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

• format_list_bulleted 🔥 프로젝트
• · 2024. 10. 27.
• textsms

[Next.js] 회원가입 후 로그인 페이지 접속 안 되는 이슈

이슈 사항회원 가입 후에 로그인 페이지로 이동하도록 했는데 로그인 페이지 이동 버튼을 클릭해도 페이지 접속이 되지 않는 문제가 발생했다. 로그인 한 사람은 회원가입과 로그인 페이지 접속을 막아뒀는데 이 부분에서 뭔가 잘못된 것 같았다. 이슈 발생 코드import { NextResponse } from "next/server";import type { NextRequest } from "next/server";import { updateSession } from "./utils/supabase/middleware";import { createClient } from "./utils/supabase/server";export async function middleware(request: NextRequest..

• format_list_bulleted 🔥 프로젝트
• · 2024. 10. 15.
• textsms