회원가입 시 자동으로 세션 생성 문제 (Next.js & Supabase)
·
프론트엔드/Next.js
Supabase.Auth 회원가입 시 자동으로 세션 생성 문제  문제 발생Next.js와 Supabase를 사용하여 회원가입 및 로그인/로그아웃 페이지를 구현하던 중, 회원가입 후 자동으로 로그인되는 문제를 겪었다.이로 인해 회원가입 후 로그인 페이지로 이동해도 이미 로그인된 상태로 세션이 유지되었고, 결과적으로 예상치 못한 중복 로그인 문제가 발생했다. 내용을 찾아보니 `Supabase.auth.signUp`을 사용하면 자동으로 `session`에 저장이 되는 것...   해결해결 방법 1회원가입 후 로그아웃 처리 처음에는 아래와 같은 방식으로 문제를 해결했다.회원가입 성공 후, `signOut` 메서드를 호출하여 자동 생성된 세션을 초기화하고, 로그인 페이지로 이동하도록 처리를 했다. const { ..
Next.js에서 middleware.ts 사용 시 주의사항 (tsconfig.json 설정)
·
프론트엔드/Next.js
Middlewaremiddleware는 특정 상황이 발생하기 전에 요청을 가로채어 미리 실행되는 코드라고 쉽게 생각하면 된다.이를 통해 인증된 사용자만 접근하도록 하거나 특정 조건을 만족하지 않을 경우 리디렉션하는 등 사전에 문제를 방지하는 역할을 한다.   🤦‍♂️ 문제 발생이번 프로젝트에서는 로그인 인증 상태에 따라 private route 처리를 하기 위해 `middleware`를 사용하기로 했다.돌아가는 로직은 이래와 같다.1. middleware는 요청을 가로채어 인증 상태를 확인2. 사용자에게 접근 권한이 있는지 판단3. 권한이 없는 경우(인증X) 로그인 페이지로 이동 이렇게 인증이 되지 않은 사용자가 보호된 페이지에 접근하는 것을 미리 방지하도록 구성했다.하지만 아무리 로그인을 하지 않아도..
Next.js - 4가지 렌더링 방식 (SSG, SSR, CSR, ISR)
·
프론트엔드/Next.js
SSG (Server Side Generation)서버에서 미리 HTML 파일을 만든 다음 브라우저에서 보여주는 형태의 렌더링 방식 `빌드 타임`에 홈페이지를 만들어줌 > `정적 페이지`라서 초기에 한번 페이지를 로드하고 나서는 다시 로드하지 않음vsCode 상 내용을 바꾸게 되면 다시 빌드를 해줘야함 실행과정- 아무것도 하지 않아도 됨!! (Next.js는 기본적으로 아무것도 설정하지 않는다면 SSG로 동작) yarn build && yarn start빌드, 실행을 하면 아래와 같이 터미널에 뜸 (Static) 이라고 적힌걸 보면 0/ 으로 되어있는 곳이 정적인 페이지로 만들어졌다는 이야기이다.  서버 컴포넌트에서는 데이터를 불러올 때 useEffect등을 이용하지 않아도 됨비동기 함수를 직접 사용할 ..
Next.js - 클라이언트 컴포넌트, 서버 컴포넌트
·
프론트엔드/Next.js
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 );}; 페이지를 새로고침하면 브라우저와 서버 둘 ..