인프런 커뮤니티 질문&답변
작성한 질문수
6.8 zustand 세션 질문입니다.
작성
·
40
·
수정됨
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 />;
}
이렇게 하고 새로고침하면 콘솔에는 찍히긴 합니다
단순한 리덕스 툴킷 버그인지
콘솔에 찍히니까 넘어가도 상관없는지 모르겠습니다.
퀴즈
What are the main differences between Authentication and Authorization?
Authentication grants permissions, and authorization verifies identity.
Authentication verifies identity, and authorization grants permissions.
Authentication manages database access, while authorization manages server access.
Authentication is session-based, authorization is token-based.
답변 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 통합
구체적인 디버깅이 필요하시다면, 현재 환경의 문제를 확인하기 위해 다양한 시도를 해보실 수 있습니다. 추가적인 궁금증이 있으시면 주저하지 말고 이어서 질문해 주세요.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
감사합니다. 좋은강의 잘듣고 있습니다.