프로젝트를 하면서 알게 된 것과 진행 과정을 정리해 보려고 한다.

dotenv

처음에 supabase를 프로젝트에 적용할 때 API key가 노출되었다. 이를 방지하기 위해 dotenv를 사용하기로 했는데, dotenv의 사용법이 프로젝트의 기술 스택마다 다르다는 것을 알게 되었다. react에서의 사용 방식은 이렇다.

1. 일단 react에는 dotenv가 기본적으로 내장이 되어있다. 루트 경로에 .env만 만들어서 필요한 변수를 넣고 사용하면 된다.(물론 gitignore에도 추가해 줘야 한다.)
2. .env에 들어가는 변수명은 무조건 REACT_APP으로 시작해야 한다.
3. .env를 변경했다면 서버를 재시작해야 한다.
4. 변수를 불러올 때는 process.env로 접근한다

그러나 react도 내가 진행하는 프로젝트와 차이점이 있었다. 나는 vite를 사용했기 때문이다. vite는 규칙이 따로 있었다.

1. 변수명이 VITE_로 시작해야한다.
2. 변수를 불러올때 import.meta.env 로 접근한다.
3. typescript를 사용할 경우 vite-env.d.ts파일에 타입을 작성한다.

typescript설정까지 마쳤다면 변수 자동완성 기능을 사용할 수 있다.

로그인 상태 관리에서 생긴 문제

기본적인 supabase 세팅을 마친 뒤 회원가입, 로그인, 비밀번호 찾기 기능을 supabase에 연동하여서 구현하였다. 이후에 로그인 상태 관리를 구현하는데, 문제가 발생하였다. 나는 전역 상태 관리를 하기 위해 zustand를 사용하였고 store(전역변수)를 만들었다. 이렇게 해서 store변수에 로그인 상태 정보를 넣고 각 페이지에 store를 불러와서 로그인 상태를 공유할 수 있을 것이라고 생각했다. **그러나 store변수가 페이지를 이동할 때마다 초기화가 되었다. 구글링을 진행해 보니 페이지를 이동할 때 React가 전체 애플리케이션을 다시 렌더링 한다고 하였다. 그래서 store가 초기화가 되었던 것이다. 그렇다면 어떻게 이 문제를 해결할 수 있을까?

로컬 스토리지

로그인 상태관리를 위해 브라우저의 로컬 스토리지를 이용해 문제를 해결하기로 했다. 이렇게 하면 페이지 이동이나 새로고침 후에도 상태가 유지된다. 로컬 스토리지 코드는 zustand의 persist middleware를 이용해 state를 storage에 저장하는 방법을 사용했다.

import { create } from "zustand";
import { persist } from "zustand/middleware";

const useSessionStore = create(
  persist(
    (set) => ({
      session: false,
      setSession: (state: boolean) => set({ session: state }),
    }),
    {
      name: "session-storage", // 저장소의 이름
      getStorage: () => localStorage, // 로컬 스토리지에 저장
    }
  )
);