๐ ์๋
๋ก๊ทธ์ธ ๊ธฐ๋ฅ์ ๊ตฌํํ๋ ค๋ ์์ค ํ์๊ฐ์ → ๋ก๊ทธ์ธ์ ํ๋ฉด ๊ณ์ ๋ก๊ทธ์ธ ์ํ๋ฅผ ์ ์งํ๊ณ ๋ง์ฝ token ๊ฐ์ ๊ฐ์ง๊ณ ์์ง ์๋ค๋ฉด ๋ค๋ฅธ ๊ธฐ๋ฅ์ ์ฌ์ฉํ์ง ๋ชปํ๋๋ก ์ค์ ์ ํด์ผํ๋ค. ํ ๋ฒ ๋ก๊ทธ์ธ์ ํ๋ค๋ฉด ๊ณ์ ์ ์ง๋ฅผ ์์ผ์ผํ๋ฏ๋ก(์ฆ ๋ก๊ทธ์ธ์ ํ๋ค๋ ์ ๋ณด๋ฅผ ๊ฐ์ง๊ณ ์์ด์ผ ํ๋ค.) localStorage๋ฅผ ์ด์ฉํด์ ๋ก๊ทธ์ธ ์ ๋ณด๋ฅผ ์ ์งํ ์ ์๋๋ก token๊ฐ์ ์ ์ฅํด์ค์ผ ํ๋ค.
๐ localStorage
localStorage๋ ์๋ฐ์คํฌ๋ฆฝํธ์ Web Storage๋ฅผ ์ด์ฉํ ๊ฒ์ด๋ค. ์น ์คํ ๋ฆฌ์ง์๋ localStorage์ sessionStorage 2์ข ๋ฅ๊ฐ ์๋ค.
๋ ๊ฐ์ง์ ์ฐจ์ด์ ์ ๊ฐ๋จํ ์ค๋ช ํ์๋ฉด, ๋ฐ์ดํฐ ์ ์ฅ์ด ์ด๋ค ๋ฒ์๋ก ๊ณ์ ๋ณด์กด๋์ด ์๋์ง์ ๋ฌ๋ ค์๋ค.
localStorage๋ ์ด๋ค ์ธ์ ์ ๋ค์ด์ ์์ด ๊ทธ๊ฒ์ด ๋๋๋๋ผ๋ ๋ฐ์ดํฐ๊ฐ ์ง์์ง์ง ์๊ณ ๋ณด์กด๋์ด ์๋ค. ์ด๊ฒ์ ๊ฐ์ ํ์ด์ง์ ๋ํด ์ฌ๋ฌ ํ์ด์ง๊ฐ ํญ์ผ๋ก ์ด๋ ค ์ฌ์ฉํด๋ ๋ฐ์ดํฐ๊ฐ ์ง์์ง์ง ์๊ณ localStorage์ ๋ด์ฉ์ด ์ญ์ ๋์ง ์๋๋ค๋ ๊ฒ์ด๋ค.
sessionStorage๋ ๊ฐ ํญ๋ค์ด ๋ณ๊ฐ์ ๋ฐ์ดํฐ๋ฅผ ์ ์ฅํ๋ฉฐ ํญ ๋๋ ์ฐฝ์ด ๋ซํ ๋๋ง๋ค ๋ฐ์ดํฐ๊ฐ ์๋ฉธํ๊ฒ ๋๋ค.
๊ฒฐ๊ณผ์ ์ผ๋ก ๋ด ๋ธ๋ผ์ฐ์ ์์ ๋ฐ์ดํฐ๋ฅผ ๊ณ์ ๋ณด์กด์์ผ ์ฌ์ฉํ๊ณ ์ถ๋ค๋ฉด localStorage๋ฅผ ์ฐ๊ณ ์ฌ๋ฌ ํ์ด์ง๋ง๋ค ๋ค๋ฅธ ๋ฐ์ดํฐ๋ฅผ ๋ณด์กด์ํค๊ณ ์ถ๋ค๋ฉด sessionStorage๋ฅผ ์ฌ์ฉํ๋ฉด ๋๋ค. ์ด๋ localStorage์์ ์ ์ฅ(์ ์ง)๋๋ ๋ฐ์ดํฐ๋ ๋ด ์ปดํจํฐ, ๋ด ๋ธ๋ผ์ฐ์ ์์๋ง ์ ์ฅ๋์ด ์์ด์ ๋ค๋ฅธ ์ปดํจํฐ์๋ ๋ฐ์ดํฐ๊ฐ ์ ์ฅ๋์ด์์ง ์๋ค.
๐ ์ฌ์ฉ๋ฒ
// ๋ฐ์ดํฐ ์ ์ฅ
localStorage.setItem("key", value);
// ๋ฐ์ดํฐ ์ฝ๊ธฐ
localStorage.getItem("key");
// ๋ฐ์ดํฐ ์ญ์
localStorage.removeItem("key");
// ๋ชจ๋ ๋ฐ์ดํฐ ์ญ์
localStorage.clear();
// ์ ์ฅ๋ ํค/๊ฐ ์์ ๊ฐ์
localStorage.length;
์ฐ๋ฆฌ๋ token ๊ฐ์ ์ ๋ฌ๋ฐ์ ๊ทธ๊ฒ์ setItem์ ํตํด value์ ์ ์ฅํ ์ ์๊ฒ ๋ค.
๊ฐ๋ฐ์๋๊ตฌ์ ๋ค์ด๊ฐ์ ์ ํ๋ฆฌ์ผ์ด์ ์ ๋ค์ด๊ฐ๋ฉด ๋ก์ปฌ ์คํ ๋ฆฌ์ง๋ฅผ ํ์ธํ ์ ์๋ค.
ํ์ฌ๋ ์๋ฌด๋ฐ ์์ ๋ ํ์ง ์์์ ๋น์ด์๋ ๊ฒ์ ๋ณผ ์ ์๋ค. ์ด์ ์ฌ๊ธฐ๋ค๊ฐ ๋ก๊ทธ์ธ์ ํ์ ๋ ํ ํฐ์ ์ ์ฅํ๋ ์์ ์ ํด๋ณด๋ ค๊ณ ํ๋ค.
๋๋ ๋ก๊ทธ์ธ ๋ฒํผ์ ๋๋ ์ ๋ ๋ฐ์ํ๋ ์ด๋ฒคํธ๋ฅผ axios๋ฅผ ์ฌ์ฉํ๋ค. axios๋ฅผ ํตํด์ ์์ฒญ์ ์๋ฒ์ ๋ณด๋ด๊ณ ์๋ต์ ๋ฐ์์ผํ๋ค.
๊ทธ๋ ์๋ต์ผ๋ก ๋ฐ์ ์ ๋ณด๋ฅผ localStorage์ ์ ์ฅํ๋ฉด ๋๋ค.
๊ตฌํ ์ฝ๋
axios๋ฅผ ์ฐ๊ฒฐํ๊ณ token์ ์๋ต๋ฐ์์ ๋์ access_token์ ๋ณ์๋ก ์ ์ฅํด์ค๋ค.
์ด๋ ๊ฒ access_token์ผ๋ก ์ ์ฅํด์ค ์ด์ ๋ ๋ด๊ฐ ๋ก๊ทธ์ธ์ ํ์ ๋ ์๋ต๋ฐ์ ์ฝ๋๋ฅผ ์ดํด๋ดค์ ๋ ๋ฐ๊ณผ ๊ฐ์ด ์ฝ์์ ์ฐํ๊ฒ ๋๋ค.
์ด๋ ์๋ต๊ฒฐ๊ณผ(res)์ data.access_token์ ๋ณ์์ ์ ์ฅํด์ค ๊ฒ์ด๋ค.
์ด ํ ํฐ์ localStorage์ ์ ์ฅํด์ผํ๋ฏ๋ก setItem์ ํตํด์ ์ด ์ ๋ณด๋ฅผ ์ ์ฅํด์ค๋ค.
๊ทธ๋ฌ๋ฉด ์ด๋ฐ์์ผ๋ก ํ ํฐ์ด ์ ์ ์ฅ๋์ด์๋ ๊ฒ์ ๋ณผ ์ ์๋ค.
๊ทธ๋ฆฌ๊ณ ๋ก๊ทธ์ธ์ ํ์ผ๋ todoList ํ์ด์ง๋ก ๋ฐ๋ก ์ด๋์ ์์ผ๋ณด์.
์ด๋ ๋๋ window.location.replace()๋ฅผ ์ฌ์ฉํ๋ค.
์ด๊ฑธ ์ฌ์ฉํ ์ด์ ๋ URL์ด ๊นจ๋ํ๊ฒ ๊ต์ฒด๋๊ธฐ ๋๋ฌธ์ด๋ค. location.replace๋ ํ์คํ ๋ฆฌ ์์ ์ ์ฅ์ด ์๋๋ค.
์ด ๋ง์ ์ ์ ๊ฐ back(๋ค๋ก๊ฐ๊ธฐ) ๋ฒํผ์ ๋๋ฌ๋ ์ด์ ํ์ด์ง๊ฐ ๋์ค์ง ์๋๋ค. ๋ฐ๋ผ์ ๋ก๊ทธ์ธ์ ํ์ผ๋ฏ๋ก ๋ค์ ๋ค๋ก๊ฐ์ ๋ก๊ทธ์ธ์ ํ์ง ์๋๋ก ํ๊ธฐ ์ํด ์ฌ์ฉํ๋ค.
์ด๋ ๊ฒ๊น์งํ๋ฉด ๋ก๊ทธ์ธ ํ ๋ฐ๋ก ํฌ๋๋ฆฌ์คํธ ํ์ด์ง๋ก ๋์ด๊ฐ๊ฒ ๋๋ค!
๊ฒฐ๊ณผ