localStorage ?
- localStorage์ ์น ๋ธ๋ผ์ฐ์ ์ ๋ฐ์ดํฐ๋ฅผ ์ ์ฅํ ์ ์๋ ๊ธฐ๋ฅ์ผ๋ก, ์ฌ์ฉ์๊ฐ ๋ธ๋ผ์ฐ์ ๋ฅผ ๋ซ์๋ ์ ์ฅํ ๋ฐ์ดํฐ๋ฅผ ๊ณ์ํด์ ์ ์งํ ์ ์๋ค.
firebase๋ฅผ ํตํด ๋ก๊ทธ์ธ & ํ์๊ฐ์ ์ ๊ตฌํํ๊ณ , ๋ก๊ทธ์ธํ ์ฌ์ฉ์ ์ ๋ณด๋ฅผ localStorage์ ์ ์ฅํ๋ ๋ฐฉ์์ ์ด์ฉํด๋ณด์๋ค.
์ฐ์ ๋ก๊ทธ์ธํ ์ฌ์ฉ์ ์ ๋ณด๋ฅผ localStorage์ ์ ์ฅํ๊ธฐ ์ํด์๋ localStorage.setItem(key, value)๋ฅผ ์ด์ฉํ๋ค.
const handleSubmit = (e) => {
e.preventDefault();
signInWithEmailAndPassword(auth, id, password)
.then((userCredential) => {
const user = userCredential.user;
localStorage.setItem(
"user",
JSON.stringify({
uid: user.uid,
email: user.email,
})
);
alert(`${user.email}๋ todoto๋ฅผ ์ฆ๊ฒ๊ฒ ์ฌ์ฉํด์ฃผ์ธ์ !`);
navigate("/todos");
})
.catch((error) => {
const errorCode = error.code;
switch (errorCode) {
case "auth/invalid-credential":
alert("์ด๋ฉ์ผ ํน์ ๋น๋ฐ๋ฒํธ๊ฐ ์ฌ๋ฐ๋ฅด์ง ์์ต๋๋ค.");
break;
default:
alert(error.message);
}
});
};
์ด๋๋, localStorage.setItem("user", JSON.stringify({ uid : user.uid, email : user.email })) ์ด๋ ๊ฒ ์ ์ฅํด์
๋ก๊ทธ์ธํ์ ๋ uid์ email์ด ์๋์ ๊ฐ์ด localStorage์ ์ ์ฅ๋๊ฒ ํ์๋ค.
๐ localStorage์ ๊ฐ์ฒด๋ฅผ ๋ฃ์ ๋๋, JSON ํํ๋ก ๋ฃ์ด์ฃผ์ด์ผํ๋ค.
๋ฐ๋ผ์ JSON.stringify()๋ฅผ ์ด์ฉํด ๊ฐ์ฒด๋ฅผ JSONํํ๋ก ๋ฐ๊พธ์ด์ฃผ์ !
๋ก๊ทธ์์์ ํ๋ฉด localStorage.removeItem(key)๋ฅผ ํตํด์ user์ ๋ณด๋ฅผ localStorage์์ ์ง์์ฃผ๋ ๋ฐฉ์์ ์ฌ์ฉํ๋ค.
const logout = async () => {
await auth.signOut();
localStorage.removeItem("user");
navigate("/", { replace: true });
};
์ถ๊ฐ๋ก localStorage์ ๋ฃ์ user์ uid๊ฐ์ ๊ฐ์ ธ์ค๊ธฐ ์ํด์ ์๋์ ๊ฐ์ด ์ ์ฅ๋ ๊ฐ์ JSON.parse()๋ฅผ ํตํด ๋ค์ ๊ฐ์ฒด์ ํํ๋ก ๋ฐํ ํ ์ฌ์ฉํด์ผํ๋ค.
const user = JSON.parse(localStorage.getItem("user"));
const uid = user && user.uid; // user๊ฐ ์กด์ฌํ๋ฉด user.uid ์กด์ฌํ์ง ์์ผ๋ฉด undefined