โญ๏ธ ํ๋ฆฐ ๋ด์ฉ์ด ์๋ค๋ฉด ์ธ์ ๋ ์ง ๋๊ธ๋ก ์๋ ค์ฃผ์ธ์!
์ฟ ํค
์ ์น ์คํ ๋ฆฌ์ง (์น ์คํ ๋ฆฌ์ง๋ ๋๊ฐ๋ก ๋๋ ์ง๋ค. Local Storage
, Session Storage
)์ ๋ํ ์ด์ผ๊ธฐ๋ ํ๋ก ํธ์๋ ๊ฐ๋ฐ์๋ก์ ์๋ง ๋ง์ด๋ค ๋ค์ด๋ดค์ ๊ฒ์ด๋ผ ์๊ฐํ๋ค. ์ด๋ ์น ํด๋ผ์ด์ธํธ์ ๋ฌด์ธ๊ฐ๋ฅผ ์ ์ฅํ๊ธฐ ์ํด ์ฟ ํค์ ์น ์คํ ๋ฆฌ์ง๋ฅผ ์ฌ์ฉํ๊ธฐ ๋๋ฌธ์ด๋ผ ์๊ฐํ๋ค. ์ด๋ ์ ์ฅํ ๋ฌด์ธ๊ฐ๋ก๋ ๋ก๊ทธ์ธ ์ ๋ณด๊ฐ ๋ ์๋ ์๊ณ ํด๋น ์น ์ฌ์ดํธ์ ์ธ์ด ์ ๋ณด๊ฐ ๋ ์๋ ์์ ๊ฒ์ด๋ค.
ํ์๋ ์ด๋ ์ ๋ ์๊ณ ์๋ ๋ด์ฉ์ด๊ธฐ๋ ํ๋ ์ด์ง์ ํผ๋๋๋ ๋ถ๋ถ์ด ๋๊ปด์ ธ ์ ๋ฆฌํด์ผ์ง ํ๊ณ ์๊ฐ์ ํ๊ณ ์์๋ค. ๊ทธ๋ฌ๋ ์ค ์ด๋ ํ ์ฌ์ดํธ๋ฅผ ๋ค์ด๊ฐ๋ค๊ฐ ๋ง์ฃผ์น ์ฟ ํค ํ์ฉ ํ์ ์ฐฝ์ ๋ณด๊ณ ์ด์ ๋นจ๋ฆฌ ์ ๋ฆฌํ๊ณ ๊ธฐ์ตํ๋ผ๋ ์๋ฏธ์ธ ๊ฒ ๊ฐ์ ์ด ๊ธ์ ์ ๊ฒ ๋์๋ค.
์ฌ์ค ์ฟ ํค์ ์น ์คํ ๋ฆฌ์ง๋ ํ์๊ฐ ์ค์ ๋ก ํ๋ก ํธ์๋ ๋ฉด์ ์ ๋ณด๋ฉด์ ๋ง์ด ๋ฐ์๋ ๊ธฐ์ ์ง๋ฌธ๋ค TOP์ ์ํ๋ ๋ด์ฉ์ด๊ธฐ๋ ํ๋ค.
๐ก Cookie์ Web Storage์ ๋ํด ๋น๊ต ์ค๋ช
ํด์ฃผ์ธ์.
๐ก Cookie์ Web Storage ๊ฐ๊ฐ์ ์ฅ,๋จ์ ์ด ์กด์ฌํ๋๋ฐ ๊ทธ์ ๋ํด ์ค๋ช
ํด์ฃผ์ธ์.
๐ก ์ธ์
๊ณผ ์ฟ ํค์ ๋ํด ์ค๋ช
ํด์ฃผ์ธ์. (์ฌ์ค ์ธ์
๊ณผ ์ฟ ํค๋ ์ด๋ฒ ํฌ์คํ
์์ ์ค์ ์ ๋ ์ ์ฅ์์๋ ๋ ๋ค๋ฅธ
๋ด์ฉ์ด์ง๋ง ์ธ์
๊ณผ ์ฟ ํค๋ฅผ ์ด๋์ ์ ์ฅํ๋๋๋ฅผ ์ด์ด ์ค๋ช
ํ ๋ ์คํ ๋ฆฌ์ง ๊ฐ๋
์ด ๋์ฌ ์ ์๋ค๊ณ ๋ณธ๋ค.)
๐ก ๋ก๊ทธ์ธ ์ฒ๋ฆฌ๋ ์ด๋ป๊ฒ ํ์
จ๋์ง ์ค๋ช
ํด์ฃผ์ธ์.
๐ก ํ ํฐ์ ๋ฐ์์ ์ด๋์ ์ ์ฅํ๋์?
...
..
.
์, ๊ทธ๋ ๋ค๋ฉด ํ๋์ฉ ๊ณต๋ถํด๋ณด๋๋ก ํ์.
๋ณธ๊ฒฉ์ ์ผ๋ก ์ฟ ํค์ ์น ์คํ ๋ฆฌ์ง์ ๋ํด ์ด์ผ๊ธฐ ํด๋ณด๊ธฐ ์ ์ ์ฟ ํค์ ์น ์คํ ๋ฆฌ์ง๋ ์ ์ฌ์ฉํ๋์ง์ ๋ํด ๋จผ์ ์๊ณ ๋ค์ด๊ฐ๋ฉด ์ข์ ๊ฒ ๊ฐ๋ค.
์ฐ๋ฆฌ์ HTTP ํ๋กํ ์ฝ์ ๋น์ฐ๊ฒฐ์ฑ(Connectionless)๊ณผย ๋น์ํ์ฑ(Stateless) ์ด๋ผ๋ ํน์ฑ์ ๊ฐ์ง๊ณ ์๋ค.
์ฆ, ๋น์ฐ๊ฒฐ์ฑ์ด๋ผ๋ ํน์ฑ ๋๋ฌธ์ ์ฐ๊ฒฐ์ด ๋์ด์ง๊ณ ๋๋ฉด ํด๋ผ์ด์ธํธ์ ์๋ฒ ์ฌ์ด์ ํต์ ์ด ๋๋ ๊ฒ์ด๊ธฐ ๋๋ฌธ์ ์ํ๋ฅผ ์ ์งํ์ง ์๊ฒ ๋๋ ๊ฒ์ด๋ค.
์ด๊ฒ์ด ์ ๋ฌธ์ ๊ฐ ๋ ๊น? ์๋ฅผ ๋ค์ด,
1. A๊ฐ ์ท์ด ์ฌ๊ณ ์ถ์ด์ ธ์ ํญ์ ์์ฃผ๊ฐ๋ ์ฌ์ดํธ์ ์ ์์ ํ๋ค.
2. A๋ ๊ทธ ์ฌ์ดํธ์ ๋ค์ด๊ฐ์๋ง์ ๋ก๊ทธ์ธํ๊ธฐ๋ฅผ ๋๋ ๊ณ ๋ก๊ทธ์ธ์ ์ฑ๊ณตํ๋ค.
3. ๊ทธ๋ฐ๋ฐ ์ค์ ๋ก ์ท์ ๊ตฌ๋งคํ๋ ค๊ณ ํ๋ ๋ก๊ทธ์ธ ํ๋ ์ํ๊ฐ ์ ์ง๋์ง ์์ ๋ค์ ๋ก๊ทธ์ธ์ ํด์ผํ๋ค ๐ค
์ด๋ฌํ ๋น์ฐ๊ฒฐ์ฑ๊ณผ ๋น์ํ์ฑ์ ๋ณด์ํ๊ณ ์ ์๋ฒ์ ์๋ก์ด ์์ฒญ์ ๋ณด๋ผ ๋ ์ ์งํ๊ณ ์ถ์ ์ํ๋ค์ ํด๋ผ์ด์ธํธ์ ์ ์ฅํด๋๋ ๊ฒ์ด๋ค. HTML5๊ฐ ๋์ค๊ธฐ ์ ๊น์ง๋ ์ฟ ํค๊ฐ ์ํ๋ฅผ ์ ์ฅํ๋ ์ฃผ๋ ๋ฐฉ๋ฒ์ด์์ผ๋ HTML5๊ฐ ๋์จ ํ์๋ HTML5๊ฐ ์ง์ํ๋ ์น ์คํ ๋ฆฌ์ง(Local Storage, Session Storage)์๋ ์ํ๋ฅผ ์ ์ฅํด๋ ์ ์๊ฒ ๋์๋ค.
์, ๊ทธ๋ ๋ค๋ฉด ์ฟ ํค์ ๋ํด์ ๋จผ์ ์์๋ณด์.
์๋ง ์ด๋ค ์น ์ฌ์ดํธ๋ฅผ ์ฒ์ ๋ค์ด๊ฐ์ ๋ ์๋์ ๊ฐ์ด ์ฟ ํค ํ์ฉํ๊ธฐ์ ๋ํ ๋ด์ฉ์ ๋ง์ด ๋ดค์ ๊ฒ์ด๋ค.
์ด๋ฏธ์ง๋ ๋น๋ง์ดํ๋ ์ฆ ์น์ฌ์ดํธ์ ๋ค์ด๊ฐ๋ค๊ฐ ๋ฐ๊ฒฌํ ์ฟ ํค ํ์ฉ ๋ด์ฉ์ด๋ค.
(์ฌ๋ด์ผ๋ก ํ์๋ ๋น๋ง์ดํ๋ ์ฆ์ ์ ํ ๊ด๋ จ์ด ์๋ ์ฌ๋์ด์ง๋ง ์น ์ฌ์ดํธ๋ฅผ ๋ค์ด๊ฐ์ ๋ ๋ณด์ฌ์ค ์ ์ฟ ํค ํ์ฉํ๊ธฐ๊ฐ ์ด๊ธ์ ์ฐ๋๊ฑธ ๋
๋ คํด์คฌ๊ธฐ ๋๋ฌธ์ ๊ฐ์ ธ์๋ดค๋ค.)
์ฟ ํค๋ ํ์ฌ ์ฌ์ดํธ (์์ ๊ฐ์ ๊ฒฝ์ฐ์๋ ๋น๋ง์ดํ๋ ์ฆ ์ฌ์ดํธ)๋ฅผ ์ด์ฉํ๋ ์ฌ์ฉ์๊ฐ ๋ก๊ทธ์ธ์ ํ๋ ์ฌ์ฉ์๋ฉด ๋ก๊ทธ์ธ์ ์ ์ง์์ผ ์ฃผ๊ณ , ์ฌ์ฉ์๊ฐ ์ค์ ํด ๋ ํ๊ฒฝ์ค์ (์๋ฅผ ๋ค์ด, ์ค๋๋์ ํ์ ๋ณด์ง ์๊ธฐ, ์ฌ์ดํธ ์ธ์ด๋ฅผ ํ๊ตญ์ด๋ก ์ค์ ํ๊ธฐ)๋ฑ์ ๊ธฐ์ตํ๋ฉฐ ์ฌ์ฉ์๊ฐ ํด๋น ์ฌ์ดํธ๋ฅผ ๋ค์ ์ ์ํ๊ฒ ๋์ ๋ ์ด์ ์ ์ค์ ํด ๋ ๊ทธ๋๋ก์ ๋ชจ์ต์ ๋ณด์ฌ์ฃผ๊ฒ๋๋ค.
ํด๋ผ์ด์ธํธ์ ์ ์ฅ๋ผ์๋ ์ฟ ํค ๊ฐ๋ค์ Inspect - Application - Cookie์์ ํ์ธํ ์ ์๋ค.
์ฃผ๋ก ์น ์๋ฒ์์ ๋ง๋ค์ด์ง๋ค.
์๋ฅผ๋ค์ด, ์ฌ์ฉ์๊ฐ ์ฌ์ดํธ์ ๋ฐฉ๋ฌธํ๋ฉด ๋ก๊ทธ์ธ์ ํ๋ค๊ณ ํด๋ณด์.
1. ์ฌ์ฉ์๊ฐ ๋ก๊ทธ์ธ request๋ฅผ ๋ณด๋ด๋ฉด ์๋ฒ๋ ์ฌ์ฉ์์ ๋ก๊ทธ์ธ ์์ฒญ์ ๋ํด HTTP response๋ฅผ ๋ณด๋ธ๋ค.
- ์ด ์๋ฒ์ ์๋ต ํค๋์ Set-Cookie์๋ ์ธ์ฆ๋ ์ฌ์ฉ์์ ์ ๋ณด๊ฐ ๋ด๊ฒจ์๊ณ ์ด๋ ๋ธ๋ผ์ฐ์ ์ ์ ์ฅ๋๋ค.
2. ์ฌ์ฉ์๊ฐ ๋์ผํ ์ฌ์ดํธ(๋์ผํ ๋๋ฉ์ธ)์์ ์๋ก์ด request๋ฅผ ๋ณด๋ด๋ ค ํ๋ฉด ๋ธ๋ผ์ฐ์ ๋ HTTP request ํค๋์ ์ธ์ฆ๋ ์ฌ์ฉ์์ ์ ๋ณด๊ฐ ๋ด๊ธด ์ฟ ํค ๊ฐ์ ์๋์ผ๋ก ์ถ๊ฐํ์ฌ ๋ณด๋ธ๋ค.
3. ์๋ฒ๋ ํค๋์ ๋ด๊ฒจ ๋ ๋ผ์จ ์ธ์ฆ๋ ์ฌ์ฉ์์ ์ ๋ณด๋ฅผ ํ์ธํ๊ณ ์ฌ์ฉ์๋ฅผ ์๋ณํ๊ฒ ๋๋ค.
์ธ์
์ฟ ํค
: ์ฟ ํค์ expires(์ ํจ ์ผ์)๋ max-age(๋ง๋ฃ ๊ธฐ๊ฐ) ์ต์
์ด ์ง์ ๋์ด์์ง ์์ผ๋ฉด ๋ธ๋ผ์ฐ์ ๊ฐ ๋ซํ ๋ ์ฟ ํค๋ ํจ๊ป ์ฌ๋ผ์ง๊ฒ ๋๋ค.์ง์์ ์ฟ ํค
: ์ฟ ํค์ expires(์ ํจ ์ผ์)๋ max-age(๋ง๋ฃ ๊ธฐ๊ฐ) ์ต์
์ ์ง์ ํ๋ฉด ๋ธ๋ผ์ฐ์ ๊ฐ ๋ซํ๋ ์ฟ ํค๋ ์ฌ๋ผ์ง์ง ์๋๋ค. ๋ธ๋ผ์ฐ์ ๋ ์ค์ ๋ ์ ํจ ์ผ์๊น์ง ์ฟ ํค๋ฅผ ์ ์งํ๋ค๊ฐ, ํด๋น ์ผ์๊ฐ ๋์ ๋ ์ฟ ํค๋ฅผ ์๋์ผ๋ก ์ญ์ ํ๋ค.// expires(์ ํจ ์ผ์)๋ ๋ฐ๋์ GMT ํฌ๋งท์ผ๋ก ์ค์ ํด์ผ ํ๋ค.
document.cookie = "expires=Fri, 24 Oct 2032 00:00:00 GMT"
// 1์๊ฐ ๋ค์ ์ฟ ํค๊ฐ ์ญ์ ๋๋ค.
document.cookie = "max-age=3600";
// ๋ง๋ฃ ๊ธฐ๊ฐ์ 0์ผ๋ก ์ง์ ํ์ฌ ์ฟ ํค๋ฅผ ๋ฐ๋ก ์ญ์ ํ๋ค.
document.cookie = "max-age=0";
๊ฒฝ๋ก
: ๊ฒฝ๋ก๋ฅผ ์ค์ ํ๊ฒ ๋๋ค๋ฉด ์ค์ ํ ๊ฒฝ๋ก๋ ์ค์ ํ ๊ฒฝ๋ก ํ์ ๊ฒฝ๋ก์์๋ง ์ฟ ํค์ ์ ๊ทผํ ์ ์๊ฒ ๋๋ค.// ์ด์ ๊ฐ์ ๊ฒฝ์ฐ์๋ www.example.com/myPath, www.exmple.com/myPath/something ์์๋ง
// ์ ๊ทผ ๊ฐ๋ฅํ ๊ฒ์ด๋ค.
document.cookie = "path=/myPath"
๋๋ฉ์ธ
: ์ฟ ํค์ ์ ๊ทผ ๊ฐ๋ฅํ ๋๋ฉ์ธ์ ์ง์ ํ ์ ์๋๋ฐ ์๋ฌด ๊ฐ๋ ์ค์ ํ์ง ์์๋ค๋ฉด ์ฟ ํค๋ฅผ ์ค์ ํ ๋๋ฉ์ธ์์๋ง ์ ๊ทผ ๊ฐ๋ฅํ๋ค. ์ฆ, ์๋ฌด๊ฐ๋ ์ค์ ํ์ง ์์๋ค๋ฉด ์๋ธ ๋๋ฉ์ธ์์๋ ์ ๊ทผ ํ ์ ์์์ ์๋ฏธํ๋ค. ๋ง์ฝ์ ์๋ธ ๋๋ฉ์ธ์์ ์ ๊ทผ์ด ๊ฐ๋ฅํ๊ณ ์ถ๋ค๋ฉด domain์ ๋ฃจํธ ๋๋ฉ์ธ์ ๋ช
์์ ์ผ๋ก ์ ์ด์ฃผ๋ฉด ๋๋ค.// domain: example.com ์ ์ ์ด์ค๋ค๋ฉด example.com์ ์๋ธ ๋๋ฉ์ธ์ธ text.example.com
// ์์๋ ์ฟ ํค์ ์ ๊ทผ๊ฐ๋ฅํ๊ฒ ๋๋ค.
document.cookie = "domain=example.com"
secure
: secure๋ฅผ ์ค์ ํ๊ฒ ๋๋ฉด HTTPS๋ก ํต์ ํ๋ ๊ฒฝ์ฐ์๋ง ์ฟ ํค๊ฐ ์ ์ก๋๋ค.document.cookie = "secure";
samesite
: ์ฌ์ฉ์๊ฐ ์ฌ์ดํธ ์ธ๋ถ์์ ์์ฒญ์ ๋ณด๋ด๋ ์ํ ์ผ ๋ ์ฟ ํค์ ์ต์
์ดย samesite=strict
httpOnly
: ์๋ฒ์์ response Set-Cookie ํค๋์ httpOnly๋ฅผ ์ค์ ํ๊ฒ ๋๋ฉด ํด๋ผ์ด์ธํธ์์๋ document.cookie๋ฅผ ํตํด ์ฟ ํค๋ฅผ ๋ณผ ์๋ ์กฐ์ ํ ์๋ ์๊ฒ๋๋ค.์ฌ์ค ์ด๋ ๊ฒ๋ง ๋ณด๋ฉด HTTP์ ๋น์ฐ๊ฒฐ์ฑ๊ณผ ๋น์ํ์ฑ์ ์ฟ ํค๋ง์ผ๋ก๋ ๋ณด์์ด ๋ค ๊ฐ๋ฅํ ๊ฒ์ฒ๋ผ ๋ณด์ธ๋ค. ๊ทธ๋ฐ๋ฐ ์ Web Storage (Local Storage, Session Storage)๋ ์ฌ์ฉํ๋ ๊ฒ์ผ๊น?
Web Storage (Local Storage, Session Storage)๋ฅผ ์ฌ์ฉํ๊ฒ ๋๋ ์ด์ ๋ ์๋์ ๊ฐ์ ๊ฒ์ด๋ค.
Web Storage์ ๋ํด ์กฐ๊ธ ๋ ์ค๋ช ํด๋ณด์๋ฉด, ์น ์คํ ๋ฆฌ์ง๋ HTML5๋ถํฐ ์๋กญ๊ฒ ์ง์ํ๋ ์ ์ฅ์๋ก ๋ก์ปฌ ์คํ ๋ฆฌ์ง(local storage)์ย ์ธ์ ์คํ ๋ฆฌ์ง(session storage)๋ก ์ด๋ฃจ์ด์ ธ ์๋ค.
window.localStorage
window.sessionStorage
localStorage.setItem(key, value),
sessionStorage.setItem(key, value) // ํค-๊ฐ ์์ ์ค์ ํ๋ค.
localStorage.getItem(key)
sessionStorage.getItem(key) // ํค์ ํด๋นํ๋ ๊ฐ์ ๊ฐ์ ธ์จ๋ค.
....
removeItem(key) // ํค์ ๊ทธ์ ํด๋นํ๋ ๊ฐ์ ์ญ์ ํ๋ค.
clear() // ์คํ ๋ฆฌ์ง๋ด์ ์ ์ฅ๋ ๋ชจ๋ ๊ฒ์ ์ญ์ ํ๋ค.
key(index) // ์ธ๋ฑ์ค(index)์ ํด๋นํ๋ ํค๋ฅผ ๋ฐ์์จ๋ค.
length // ์คํ ๋ฆฌ์ง์ ์ ์ฅ๋ ๋ฐ์ดํฐ๋ค์ ๊ฐ์๋ฅผ ๊ฐ์ ธ์จ๋ค.
๊ทธ๋ ๋ค๋ฉด ๋ก์ปฌ ์คํ ๋ฆฌ์ง(local storage)์ย ์ธ์ ์คํ ๋ฆฌ์ง(session storage)์ ์ฐจ์ด์ ์ ๋ฌด์์ผ๊น?
๋๊ฐ์ ๊ฐ์ฅ ํฐ ์ฐจ์ด์ ์ ๋ฐ์ดํฐ๊ฐ ์ด๋ค ๋ฒ์ ๋ด์์ ์ผ๋ง๋ ๋ณด์กด๋๋์ง์ ์๋ค
๊ณ ๋ณผ ์ ์๋ค.
์ฌ๊ธฐ๊น์ง Cookie์ Web Storage (Local Storage, Session Storage)์ ๋ํด ๊ฐ๊ฐ ์์๋ดค๋๋ฐ ์ฟ ํค์ ์น ์คํ ๋ฆฌ์ง๋ฅผ ๋น๊ตํด๋ณด๋ฉด์ ํฌ์คํ ์ ๋ง์น๋ฉด ์ข์ ๊ฒ ๊ฐ๋ค.