Inflearn コミュニティ Q&A
投稿した質問数
6.8 zustand 세션 질문입니다.
作成
·
55
·
編集済み
0
session.ts
import type { Session } from "@supabase/supabase-js";
import { create } from "zustand";
import { combine, devtools } from "zustand/middleware";
type State = {
isLoaded: boolean;
session: Session | null;
};
const initialState = {
isLoaded: false,
session: null,
} as State;
const useSessionStore = create(
devtools(
combine(initialState, (set) => ({
actions: {
setSession: (session: Session | null) => {
set({ session, isLoaded: true });
},
},
})),
{
name: "sessionStore",
},
),
);
export const useSession = () => {
const session = useSessionStore((store) => store.session);
return session;
};
export const useIsSessionLoaded = () => {
const isSessionLoaded = useSessionStore((store) => store.isLoaded);
return isSessionLoaded;
};
export const useSetSession = () => {
const setSession = useSessionStore((store) => store.actions.setSession);
return setSession;
};
App.tsx
import { Button } from "@/components/ui/button";
import RootRoute from "./root-route";
import supabase from "@/lib/supabase";
import { useEffect } from "react";
import { useSetSession } from "@/store/session";
export default function App() {
const setSession = useSetSession();
useEffect(() => {
//console.log("111");
supabase.auth.onAuthStateChange((event, session) => {
setSession(session);
});
}, []);
return <RootRoute />;
}
코드는 강의와 동일하게 잘따라간 것 같은데
개발자 도구 에서 session이랑 isLoaded가 안보입니다.
새로고침을 해도, 탭을 껏다 켜도, 리액트를 껏다 켜도,
제미나이한테 물어봐도 이게 해결이 안됩니다.....
+추가
App.tsx
import { Button } from "@/components/ui/button";
import RootRoute from "./root-route";
import supabase from "@/lib/supabase";
import { useEffect } from "react";
import { useIsSessionLoaded, useSession, useSetSession } from "@/store/session";
export default function App() {
const setSession = useSetSession();
const session = useSession();
const isLoaded = useIsSessionLoaded();
useEffect(() => {
//console.log("111");
supabase.auth.onAuthStateChange((event, session) => {
setSession(session);
});
}, []);
useEffect(() => {
console.log("현재 세션 상태:", { session, isLoaded });
}, [session, isLoaded]); // 값이 바뀔 때마다 실행됨
return <RootRoute />;
}
이렇게 하고 새로고침하면 콘솔에는 찍히긴 합니다
단순한 리덕스 툴킷 버그인지
콘솔에 찍히니까 넘어가도 상관없는지 모르겠습니다.
クイズ
認証（Authentication）と認可（Authorization）の主な違いは何でしょうか？
認証は権限を付与し、認可は身元を確認します。
認証は身元を確認し、認可は権限を付与します。
認証はデータベースアクセスを、認可はサーバーアクセスを管理します。
認証はセッション基盤、認可はトークン基盤方式です。
回答 2
1
안녕하세요 kin412님 이정환입니다.
강의 소스코드로 확인해본 결과 다음과 같이 setSession 이후의 변경된 State가 잘 출력되어야 하는데, Redux Devtools의 버그로 보입니다 ... 🥲
버그의 원인과 해결책을 정확히 알기 어렵기에 이처럼 확인이 잘 안되시는 경우 console.log를 이용하시는 편이 좋을 것 같습니다.
(토큰 노출의 위험이 있어 누추하게 가린 점 죄송합니다)
0
안녕하세요, 인프런 AI 인턴입니다. kin412님.
zustand와 Redux DevTools를 연동할 때 발생할 수 있는 문제를 겪으셨군요. 문제를 해결하기 위해 몇 가지 점을 확인해 보겠습니다.
문제 발생 원인 및 해결 방법
- 개발자 도구에서 상태 미표시 문제:
상태가 표시되지 않는 문제는 주로 Redux DevTools가 zustand 미들웨어를 올바르게 인식하지 못해서 발생할 수 있습니다. 코드에서는 이미 devtools 미들웨어를 사용하고 있지만, 상태가 보이지 않는다면 다음 사항들을 점검해보세요.
DevTools가 실제로 zustand 스토어를 인식하고 있는지 확인하세요. 특정 브라우저에서는 DevTools 확장 프로그램이 정상적으로 상태 업데이트를 감지하지 못할 수 있습니다.
코드를 실행하는 브라우저 환경에서 Redux DevTools 확장 프로그램이 제대로 설치되어 있는지 확인하세요. 특정한 상황에서는 확장 프로그램이 제대로 작동하지 않을 수 있습니다.
- 무명 액션 표시 문제:
zustand에서 액션 명이 ‘anonymous’로 표시되는 경우에는 액션 명을 직접 설정해 주어야 합니다. set 메서드의 세 번째 인자인 액션 이름을 추가해주시면 됩니다. 이 부분은 잘 구현하신 것 같습니다.
set({ session, isLoaded: true }, undefined, 'actions.setSession');
- Redux DevTools 설정 문제:
zustand의 devtools 사용 시, 추가로 세부 설정이 필요할 수 있습니다. 예를 들어, 아래와 같이 devtools 미들웨어에 옵션을 제공하여 구체적인 설정을 할 수 있습니다.
const useSessionStore = create(
devtools(
combine(initialState, (set) => ({
actions: {
setSession: (session: Session | null) => {
set({ session, isLoaded: true }, undefined, 'actions.setSession');
},
},
})),
{
name: "sessionStore",
trace: true,
traceLimit: 25,
},
),
);
추가 점검 사항
의존성 배열:
useEffect에 비어 있는 의존성 배열을 사용하는 것은 한 번만 실행되도록 하는 의도입니다. 필요한지 여부를 점검해보세요.라이브러리 버전: 사용 중인 zustand 및 Redux DevTools의 버전을 확인하고 최신 버전으로 업데이트되어 있는지 확인하십시오.
관련 토픽의 유사 질문은 아래 링크를 참고해주세요:
- Zustand 상태관리와 Redux DevTools 통합
구체적인 디버깅이 필요하시다면, 현재 환경의 문제를 확인하기 위해 다양한 시도를 해보실 수 있습니다. 추가적인 궁금증이 있으시면 주저하지 말고 이어서 질문해 주세요.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
감사합니다. 좋은강의 잘듣고 있습니다.