Supabase.Auth 회원가입 시 자동으로 세션 생성 문제  문제 발생Next.js와 Supabase를 사용하여 회원가입 및 로그인/로그아웃 페이지를 구현하던 중, 회원가입 후 자동으로 로그인되는 문제를 겪었다.이로 인해 회원가입 후 로그인 페이지로 이동해도 이미 로그인된 상태로 세션이 유지되었고, 결과적으로 예상치 못한 중복 로그인 문제가 발생했다. 내용을 찾아보니 `Supabase.auth.signUp`을 사용하면 자동으로 `session`에 저장이 되는 것...   해결해결 방법 1회원가입 후 로그아웃 처리 처음에는 아래와 같은 방식으로 문제를 해결했다.회원가입 성공 후, `signOut` 메서드를 호출하여 자동 생성된 세션을 초기화하고, 로그인 페이지로 이동하도록 처리를 했다. const { ..

Middlewaremiddleware는 특정 상황이 발생하기 전에 요청을 가로채어 미리 실행되는 코드라고 쉽게 생각하면 된다.이를 통해 인증된 사용자만 접근하도록 하거나 특정 조건을 만족하지 않을 경우 리디렉션하는 등 사전에 문제를 방지하는 역할을 한다.   🤦‍♂️ 문제 발생이번 프로젝트에서는 로그인 인증 상태에 따라 private route 처리를 하기 위해 `middleware`를 사용하기로 했다.돌아가는 로직은 이래와 같다.1. middleware는 요청을 가로채어 인증 상태를 확인2. 사용자에게 접근 권한이 있는지 판단3. 권한이 없는 경우(인증X) 로그인 페이지로 이동 이렇게 인증이 되지 않은 사용자가 보호된 페이지에 접근하는 것을 미리 방지하도록 구성했다.하지만 아무리 로그인을 하지 않아도..

Next.js에서 Supabase API URL과 API 키를 환경 변수로 설정하는 방법에 대해 간단하게 적어볼까 한다.왜냐?? 내가 고생했으니까..  Error 발견 : supabaseUrl is required 오랜만에 Supabase를 사용하게 되었다.먼저 기본 세팅을 위해 Supabase 문서에서 알려주는 가장 보변적인 방법 대로 설정을 한 후 확인을 해보니..  아니... 왜 계속 supabaseUrl is required. 오류가...    문제 해결!! 사실.. 엄청 쉽게 해결이 되었다.하지만 처음 Next.js와 supabase를 같이 사용하게 된다면 대다수의 사람들이 모르지 않을까 싶다..?  Next.js에서는 환경 변수를 사용하는 방법이 조금 다르다.Next.js는 클라이언트 측에서 ..

typeScript를 사용하다가 생긴 에러에 대해 이야기해보려고 한다.아직 typeScript에 익숙하지 않아서 그런지 생각보다 비슷한 오류가 자주 나고 있는 듯 하다. 'Champion[] | undefined' 형식은 'Champion[]' 형식에 할당할 수 없습니다. 'undefined' 형식은 'Champion[]' 형식에 할당할 수 없습니다. 이 에러가 발생하는 이유와 해결 방법에 대해서 알아볼까 한다.  🤔 에러의 원인TypeScript를 사용하다보면 자주 마주치는 오류 중 하나이고, 특히 API 호출 결과를 다룰 때 자주 발생한다고 한다.TypeScript는 함수가 반환하는 값의 타입을 검사를 한다.만약 `Champion[]` 타입을 반환할 것으로 예상하지만, `undefined`를 반환할..

SSG (Server Side Generation)서버에서 미리 HTML 파일을 만든 다음 브라우저에서 보여주는 형태의 렌더링 방식 `빌드 타임`에 홈페이지를 만들어줌 > `정적 페이지`라서 초기에 한번 페이지를 로드하고 나서는 다시 로드하지 않음vsCode 상 내용을 바꾸게 되면 다시 빌드를 해줘야함 실행과정- 아무것도 하지 않아도 됨!! (Next.js는 기본적으로 아무것도 설정하지 않는다면 SSG로 동작) yarn build && yarn start빌드, 실행을 하면 아래와 같이 터미널에 뜸 (Static) 이라고 적힌걸 보면 0/ 으로 되어있는 곳이 정적인 페이지로 만들어졌다는 이야기이다.  서버 컴포넌트에서는 데이터를 불러올 때 useEffect등을 이용하지 않아도 됨비동기 함수를 직접 사용할 ..

Next.js에서 컴포넌트를 사용const HomePage = () => { console.log("콘솔아 나타나라"); return ( Home Page );}; console.log가 브라우저 환경에서는 실행되지 않고, 서버에서만 실행됨   "use client" 추가하단에 있는 컴포넌트 들이 클라이언트에서 실행될 수 있는 로직이다는 걸 Next.js에게 알려주는 것Home에 의해 그려지는 render tree들은 모두 클라이언트 tree로 변하게 됨"use client";const HomePage = () => { console.log("콘솔아 나타나라"); return ( Home Page );}; 페이지를 새로고침하면 브라우저와 서버 둘 ..

// test.tstype Todo = { id: string; title: string; completed: boolean;};async function getTodos() { const res = await fetch("http://localhost:4000/todos"); const data: Todo[] = await res.json(); return data;}비동기 코드를 할때에는 API 콜이 언제 어디서 어떻게 올 지 모르기 때문에 명시적으로 타입을 지정해줘야 함.그래서 `const data`에 타입 Todo[] 로 어노테이션 해주는 것이러면 data의 타입을 Todo[]로 받아 볼 수 있음    props를 받을 때 갑자기 헷갈리기 시작function TodoItem({ id, ..

이번 프로젝트에서 개인적으로 가장 중요하게 생각했던 기능 중 하나는 `카카오 맵 api를 활용해서 내가 원하는 산책로`를 만드는 것이었다. 카카오맵 api 중에 `선의 거리`, `Drawing Library`를 활용해서 내 위치 기반으로 산책로를 그릴 수 있게 구현을 했고,점을 찍을때 마다 db.json에 `경도`와 `위도`를 저장시킨 후, `원, 선 사각형 다각형 표시하기` 기능을 활용해 지도 위에 직접 그린 산책로를 보여줄 수 있게 되었다.   추후 SNS에 공유할 수 있겠다는 생각에 코스가 그려진 지도를 캡쳐하면 좋겠다라는 생각이 들었다. 그래서 html2Canvas 라이브러리를 활용해 코스를 캡쳐해보기로!!  html2cnavas캡처할 영역 (DOM)을 지정하고 해당 영역에 대한 스크린샷을 찍을 ..