Zustand๋ฅผ ์ฌ์ฉํ์ฌ ๋ก๊ทธ์ธ ์ํ์ ์ ์ ์ ๋ณด๋ฅผ ํจ์จ์ ์ผ๋ก ๊ด๋ฆฌํ๋ ค๋ ๊ณ ๋ฏผ
Taskify ํ๋ก์ ํธ๋ฅผ ๊ฐ๋ฐํ๋ฉด์, ์ฌ๋ฌ ์ปดํฌ๋ํธ์์ ์ฌ์ฉ๋๋ ์ธ์ฆ ์ํ ๊ด๋ฆฌ๊ฐ ์ ์ ๋ณต์กํด์ง๋ฉฐ ์ฝ๋๊ฐ ์ค๋ณต๋๋ ๋ฌธ์ ๊ฐ ๋ฐ์ํ์์ต๋๋ค.
์ธ์ฆ ์ํ๋ฅผ ๊ด๋ฆฌํ๋ ์ฝ๋๊ฐ ๊ฐ ์ปดํฌ๋ํธ์ ๋ถ์ฐ๋์ด ์์ด ์ ์ง๋ณด์๊ฐ ์ด๋ ค์์ง๊ณ , ์ธ์ฆ ๊ด๋ จ ๋ก์ง์ ์์ ํ ๋๋ง๋ค ์ฌ๋ฌ ๊ณณ์ ์์ ํด์ผ ํ๋ ๋ฒ๊ฑฐ๋ก์์ด ์์์ต๋๋ค.
์ด ๋ฌธ์ ํด๊ฒฐ์ ์ํด์ Zustand๋ฅผ ์ฌ์ฉํ์ฌ ์ธ์ฆ ์ํ๋ฅผ ์ ์ญ์ ์ผ๋ก ๊ด๋ฆฌ, ์ธ์ฆ ๊ด๋ จ ๋ก์ง์ authStore ๋ผ๋ ๋ณ๋์ ์ํ ๊ด๋ฆฌ๋ก ๋ถ๋ฆฌํ์ฌ ์ฌ์ฌ์ฉ ๊ฐ๋ฅํ๊ณ ํจ์จ์ ์ธ ๋ฐฉ์์ผ๋ก ๊ฐ์ ํ์์ต๋๋ค.
์ด๋ฒ ํฌ์คํ ์์๋ ์ด ๊ณผ์ ์ ๊ณต์ ํ๋ฉฐ, Zustand๋ฅผ ์ด์ฉํ ์ธ์ฆ ์ํ ๊ด๋ฆฌ ๋ฐฉ๋ฒ๊ณผ ์ฝ๋ ์ค๋ณต์ ์ค์ผ ์ ์์๋ ๊ฒฝํ์ ๋ํด์ ์์ฑํด๋ณด๊ฒ ์ต๋๋ค. ๐๐ป
โ๏ธ ๋ฌธ์ ์ํฉ - ์ธ์ฆ ์ํ ๊ด๋ฆฌ์ ๋ณต์กํจ๊ณผ ์ค๋ณต ์ฝ๋
ํ๋ก์ ํธ ์ด๊ธฐ์๋ ์ธ์ฆ ๊ด๋ จ ๋ก์ง์ ๊ฐ ์ปดํฌ๋ํธ์์ ์ง์ ์ฒ๋ฆฌํ์ต๋๋ค.
์๋ฅผ ๋ค์ด, ๋ก๊ทธ์ธ ์ํ๋ฅผ ์ฒ๋ฆฌํ๊ธฐ ์ํด ๊ฐ ํ์ด์ง๋ ์ปดํฌ๋ํธ์์ sessionStorage, cookies ๋๋ ์ ์ญ ์ํ๋ฅผ ์ง์ ๋ค๋ค์ผ ํ์ต๋๋ค. ์ด๋ก ์ธํด ๋ค์๊ณผ ๊ฐ์ ๋ฌธ์ ๊ฐ ๋ฐ์ํ์์ต๋๋ค.
์ค๋ณต๋ ์ฝ๋: ๋ก๊ทธ์ธ, ๋ก๊ทธ์์, ์ธ์ฆ ํ์ธ ๋ก์ง์ด ์ฌ๋ฌ ์ปดํฌ๋ํธ์ ๋ถ์ฐ๋์ด ์์ด ๊ฐ์ ์ฝ๋๊ฐ ๋ฐ๋ณต๋์๊ณ , ์ด๋ฅผ ์์ ํ ๋๋ง๋ค ์ฌ๋ฌ ํ์ผ์ ์ฐพ์ ์์ ํด์ผ ํ์ต๋๋ค.
๋ณต์กํ ์ํ ๊ด๋ฆฌ: ์ธ์ฆ ์ํ๋ฅผ ๊ด๋ฆฌํ๊ธฐ ์ํด ์ฌ๋ฌ ์ํ๋ฅผ ๊ฐ ์ปดํฌ๋ํธ์์ ๋ณ๋๋ก ๋ค๋ค์ผ ํ๊ธฐ ๋๋ฌธ์ ์ํ์ ํ๋ฆ์ ์ถ์ ํ๊ธฐ ์ด๋ ค์ ์ต๋๋ค.
์ ์ง๋ณด์ ์ด๋ ค์: ์ธ์ฆ ๊ด๋ จ ๋ก์ง์ ๋ณ๊ฒฝํด์ผ ํ ๋, ๊ฐ ์ปดํฌ๋ํธ์์ ๊ฐ๋ณ์ ์ผ๋ก ๊ด๋ฆฌ๋ ์ํ๋ฅผ ์์ ํด์ผ ํ๋ฏ๋ก ๋ฒ๊ทธ๊ฐ ๋ฐ์ํ ์ํ์ด ์ปธ์ต๋๋ค.
์ด๋ฌํ ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ๊ธฐ ์ํด, ์ธ์ฆ ๋ก์ง์ ์ ์ญ ์ํ๋ก ๊ด๋ฆฌํ๊ณ , ์ธ์ฆ ๊ด๋ จ ๋ก์ง์ ํ๋์ authStore๋ก ๋ชจ์์ ์ค์์์ ๊ด๋ฆฌํ๊ธฐ๋ก ํ์ต๋๋ค.
๐ ํด๊ฒฐ ๋ฐฉ์ - Zustand๋ฅผ ํ์ฉํ ์ธ์ฆ ์ํ ๋ถ๋ฆฌ
Zustand๋ ๋ฏธ๋๋ฉํ API๋ก ์ํ๋ฅผ ์ ์ญ์ ์ผ๋ก ๊ด๋ฆฌํ ์ ์์ด, ๋ณต์กํ ์ํ ๊ด๋ฆฌ ์์ด ์ฝ๊ฒ ์ํ๋ฅผ ๊ณต์ ํ ์ ์๋ค๋ ์ฅ์ ์ด ์์ต๋๋ค.
๋๋ถ์ ์ธ์ฆ ์ํ๋ฅผ ์ฌ๋ฌ ์ปดํฌ๋ํธ์์ ์ผ๊ด๋๊ฒ ์ฌ์ฉํ ์ ์๊ณ , ์ฝ๋์ ์ค๋ณต์ ์ค์ผ ์ ์์์ต๋๋ค.
๐ authStore ์ค๊ณ
์ฃผ์ ์ํ๋ isAuthenticated(๋ก๊ทธ์ธ ์ฌ๋ถ)์ user(์ฌ์ฉ์ ์ ๋ณด)์ด๋ฉฐ, ์ธ์ฆ ๊ด๋ จ ํจ์๋ค(login, logout, checkAuth)์ ํฌํจ
export const useAuthStore = create<AuthState>((set) => ({
isAuthenticated: false,
user: null,
setUser: (user: User) => {
set({ user, isAuthenticated: true });
},
// ๋ก๊ทธ์ธ ํ ์ฌ์ฉ์ ์ ๋ณด์ ํ ํฐ์ ์ํ์ ์ ์ฅํ๊ณ , ์ฟ ํค์ ํ ํฐ์ ์ค์
login: async (loginData) => {
const response = await getLogin(loginData);
setAccessToken(response.accessToken);
set({ user: response.user, isAuthenticated: true });
},
// ๋ก๊ทธ์์ ์ ์ํ๋ฅผ ์ด๊ธฐํํ๊ณ , ์ธ์ฆ ์ํ๋ฅผ false๋ก ์ค์
logout: () => {
set({ user: null, isAuthenticated: false });
},
// ํ์ด์ง ์๋ก๊ณ ์นจ ์ ์๋์ผ๋ก ์ฌ์ฉ์ ์ธ์ฆ ์ํ๋ฅผ ํ์ธ
checkAuth: async () => {
try {
const user = await getUserInfo();
set({ user, isAuthenticated: true });
} catch {
set({ user: null, isAuthenticated: false });
}
},
}));
์ด๋ฅผ ํตํด ์ ์ง๋ณด์์ฑ๊ณผ ํ์ฅ์ฑ์ด ํฅ์๋์๊ณ , ํ๋ก์ ํธ์ ์ธ์ฆ ๋ก์ง์ ๊น๋ํ๊ฒ ๊ด๋ฆฌํ ์ ์๊ฒ ๋์์ต๋๋ค :)
๐ ์ฝ๋ ์ค๋ณต ์ ๊ฑฐ์ ํจ์จ์ฑ ํฅ์
- ์ค๋ณต ์ฝ๋ ์ ๊ฑฐ: ์ธ์ฆ ๊ด๋ จ ๋ก์ง์ ํ ๊ณณ์ ์ง์ค์์ผ, ์ฝ๋์ ์ค๋ณต์ ์์ด์ต๋๋ค.
- ์ ์ญ ์ํ ๊ด๋ฆฌ: ์ฑ์ ๋ชจ๋ ์ปดํฌ๋ํธ์์ ์ธ์ฆ ์ํ๋ฅผ ์์ฝ๊ฒ ๊ฐ์ ธ์ ์ฌ์ฉํ ์ ์์ต๋๋ค.
- ์ ์ง๋ณด์ ์ฉ์ด์ฑ: ์ธ์ฆ ๊ด๋ จ ๋ก์ง์ ์์ ํ ๋ ํ ๊ณณ๋ง ์์ ํ๋ฉด ๋๋ฏ๋ก ์ ์ง๋ณด์๊ฐ ์ฌ์์ก์ต๋๋ค.
ํ์คํ
Zustand์ ๊ฐ๊ฒฐํ API ๋๋ถ์ ์ํ ๊ด๋ฆฌ๊ฐ ์ง๊ด์ ์ด๊ณ ์ฌ์, ์ถ๊ฐ์ ์ธ ๊ธฐ๋ฅ์ด๋ ์์ ์ด ํ์ํ ์ํฉ์์๋ ๋น ๋ฅด๊ณ ํจ์จ์ ์ผ๋ก ๋์ฒํ ์ ์์๋ค ~!!
'๐ ๏ธ ํ๋ก์ ํธ > [Taskify] - ํ์ ํด(์ผ์ ๊ด๋ฆฌ ์์คํ )' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
[Taskify] Zustand ์ํ๊ด๋ฆฌ ํธ๋ฌ๋ธ ์ํ (1) | 2025.01.15 |
---|---|
[ํธ๋ฌ๋ธ ์ํ ] ์๋ฌ ์ฒ๋ฆฌ ํตํฉ ๊ด๋ฆฌ - ์ผ๊ด๋ ์๋ฌ ๋ฉ์์ง๋ก ์ฌ์ฉ์ ๊ฒฝํ ๊ฐ์ ํ๊ธฐ (0) | 2024.11.08 |
[Taskify] - ํ๋ก์ ํธ๋ฅผ ๋ง์น๋ฉฐ (0) | 2024.11.08 |
[Taskify] - ํ๋ก์ ํธ ์์ฑ ๋ฐ ์ด๊ธฐ ์ธํ (0) | 2024.10.19 |