๋ก๊ทธ์ธ ์ํ ์ ์ง
๋ก๊ทธ์ธ ์ํ ์ ์ญ ๊ด๋ฆฌ
firebase๋ ๋ก๊ทธ์ธ์ด๋ ํ์๊ฐ์
์ ํ๋ฉด, ์ด์ ๊ฐ์ด user์ ๋ณด๋ฅผ ๋ฆฌํดํด์ค๋ค.
์ด ์ ์ ์ ๋ณด๋ฅผ ํตํด ๋ก๊ทธ์ธ ์ํ์, ํ๋กํ, ๋ณธ์ธ์ ๊ฒ์๊ธ/๋๊ธ ์ฌ๋ถ๊ฐ์ ์์
๋ค์ ํ ๊ฒ์ด๋ฏ๋ก ์ ์ญ(zustand)์ผ๋ก user์ ๋ณด๋ฅผ ๊ด๋ฆฌํ๋ค.
์ฒ์์ ์๋ก๊ณ ์นจ์ด ๋ฐ์ํด๋ ์ ์ญ ์ํ ์ด๊ธฐํ๊ฐ ๋ฐ์ํ์ง ์๋๋ก, zustand์ persist ๋ฏธ๋ค์จ์ด๋ฅผ ์ฌ์ฉํ์ฌ localStorage์ ๋ด์ ์ด ๋ก๊ทธ์ธ ์ํ(์ ์ ์ ๋ณด ์กด์ฌ ์ฌ๋ถ)๋ฅผ ์ ์ง๊ฐ ๋๋๋ก ํด์ผ๊ฒ ๋ค๊ณ ์๊ฐํ๋ค.
ํ์ง๋ง, ์ฐพ์๋ณด๋ firebase ์ธ์ฆ ์์คํ
์ด ์ฌ์ฉ์์ ๋ก๊ทธ์ธ ์ํ๋ฅผ ๊ด๋ฆฌํ๊ธฐ ์ํด, ์ธ์ฆ ํ ํฐ์ ์ฌ์ฉํ๊ณ ์ด ์ธ์ฆํ ํฐ์ ์๊ฐ์ด ์ฝ 1์๊ฐ ์ ๋์ด๊ธฐ ๋๋ฌธ์, ์ด ํ ํฐ์ด ๋ง๋ฃ๋๊ฑฐ๋ ๊ฐฑ์ ์ ์คํจํ๋ฉด ๋ก์ปฌ์คํ ๋ฆฌ์ง์๋ ๋ก๊ทธ์ธ์ํ์ด์ง๋ง, ์ค์ง์ ์ผ๋ก ๋ก๊ทธ์์ ์ํ๊ฐ ๋ ์ ์๋ค๊ณ ํ๋ค.
๋ํ, ์์๋ณด๋ firebase์์ ์์ฒด์ ์ผ๋ก ์ธ์ฆ ์ํ๋ฅผ ๋ก์ปฌ์คํ ๋ฆฌ์ง์ ์ ์ฅํ๊ธฐ ๋๋ฌธ์ ๋ persist๋ฅผ ์ฌ์ฉํด ๋ก์ปฌ์คํ ๋ฆฌ์ง์ ๋ฃ์ ํ์๊ฐ ์๋ค.
ํด๊ฒฐ ๋ฐฉ๋ฒ
1. onAuthStateChanged โ
onAuthStateChanged๋ ์ธ์ฆ ์ํ ๋ณํ๋ฅผ ๊ฐ์งํด์ฃผ๊ธฐ ๋๋ฌธ์, ์ํ์ ๋ฐ๋ผ ์ฌ์ฉ์ ์ธ์ฆ์ ๋ณด๋ฅผ ์ฒ๋ฆฌํ๋ค.
๋ํ, ๋ง๋ฃ๋ ์ธ์ฆ ํ ํฐ์ผ๋ก ์ธํด ์ฌ์ฉ์๊ฐ ๋ก๊ทธ์์๋๋ฉด onAuthStateChanged ์ฝ๋ฐฑ ํจ์๊ฐ ํธ์ถ๋์ด ์ฌ์ฉ์ ์ ๋ณด๊ฐ null๋ก ์ ๋ฌ๋๋ค๊ณ ํ๋ค.
2. firebase JS SDK๋ก ์ธ์ฆ์ํ ์ ์ง ๋ฐฉ์ ์ง์ ํ๊ธฐ
-
local : ๋ก๊ทธ์ธํ ์ฌ์ฉ์๊ฐ ๋ช ์์ ์ผ๋ก ๋ก๊ทธ์์ํ ๋๊น์ง ๋ฌด๊ธฐํ ์ ์งํ ์ง → ์๋ ๋ก๊ทธ์ธ ๊ธฐ๋ฅ ๊ตฌํ ๊ฐ๋ฅ?!
-
session : ์ฐฝ์ ๋ซ์ผ๋ฉด ์ํ๋ฅผ ์ญ์ → ๋ก๊ทธ์ธ ์ ์ง
useAuthํ ์ผ๋ก ๊ถํ ์ ์ด ๋ฐ ๋ณดํธ
์ ์ ํ๋กํ์ด๋ ์์ฑํ ๊ฒ์๊ธ ์์ ํ์ด์ง๊ฐ์ ๊ฒฝ์ฐ, ๋ณธ์ธ์ด ์๋ ํ์ธ์ด ์ ๊ทผํ ์ ์๋๋ก ๋ณดํธ๊ฐ ํ์ํ๋ค.
- profile update : /profiles/update/:userId
- post update : /posts/update/:postId
route ๊ฒฝ๋ก๊ฐ ๋ค์๊ณผ ๊ฐ๊ธฐ ๋๋ฌธ์, userId, postId๋ง ์์๋ธ๋ค๋ฉด ์ถฉ๋ถํ ํ์ธ์ด ์์ ํ์ด์ง์ ์ ๊ทผํ ์์๋ ์ํ์ด๋ค.
๐๐ป userId์ ๋ก๊ทธ์ธํ user์ id๊ฐ์ ๋น๊ตํด์ ์ผ์นํ์ง ์๋ค → ์ ๊ทผ์ ํ ๋ฆฌ๋ค์ด๋ ํธ
๐ firebase์ ๋ณด์๊ท์น์ ํตํด, 2์ฐจ์ ์ผ๋ก DB์ write ๊ถํ์ ๋ง์์๋ ์๋ค.
type CheckPermission = (user: User) => boolean;
export const useAuth = (checkPermission?: CheckPermission) => {
const { user, loading } = useAuthStore();
const navigate = useNavigate();
useEffect(() => {
if (!loading) {
if (!user) {
navigate(PATHS.logIn);
} else if (checkPermission && !checkPermission(user)) {
toast.error("์ ๊ทผ ๊ถํ์ด ์์ต๋๋ค.");
navigate(-1);
}
}
}, [loading, user, navigate, checkPermission]);
return { user, loading };
};
'ํ๋ก์ ํธ' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
code Splitting, prefetch ๋ก๋ฉ์๋ ๊ฐ์ (0) | 2024.07.10 |
---|---|
[react-query] ์ข์์ ๊ธฐ๋ฅ ์ต์ ํํ๊ธฐ (0) | 2024.07.02 |
[Next.js] SEO ์ต์ ํํ๊ธฐ (0) | 2024.04.29 |
[useRef] ์ฑํ ์ ๋ ฅ์ ์ต์ ํญ๋ชฉ์ผ๋ก ์คํฌ๋กค ์ด๋ํ๊ธฐ (0) | 2024.04.26 |
[emoji-picker-react ๐] ์ด๋ชจํฐ์ฝ ์ ๋ ฅ์ฐฝ์ผ๋ก input ๋ฐ๋๋ฐฉ๋ฒ (0) | 2024.04.25 |