Cookie๐Ÿชย ์™€ Web Storage

์ •์œ ์ • | yujeong choungยท2022๋…„ 9์›” 9์ผ
5

Frontend

๋ชฉ๋ก ๋ณด๊ธฐ
2/2

โญ๏ธ ํ‹€๋ฆฐ ๋‚ด์šฉ์ด ์žˆ๋‹ค๋ฉด ์–ธ์ œ๋“ ์ง€ ๋Œ“๊ธ€๋กœ ์•Œ๋ ค์ฃผ์„ธ์š”!


์ฟ ํ‚ค์™€ ์›น ์Šคํ† ๋ฆฌ์ง€ (์›น ์Šคํ† ๋ฆฌ์ง€๋Š” ๋‘๊ฐœ๋กœ ๋‚˜๋ˆ ์ง„๋‹ค. Local Storage, Session Storage)์— ๋Œ€ํ•œ ์ด์•ผ๊ธฐ๋Š” ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์ž๋กœ์„œ ์•„๋งˆ ๋งŽ์ด๋“ค ๋“ค์–ด๋ดค์„ ๊ฒƒ์ด๋ผ ์ƒ๊ฐํ•œ๋‹ค. ์ด๋Š” ์›น ํด๋ผ์ด์–ธํŠธ์— ๋ฌด์–ธ๊ฐ€๋ฅผ ์ €์žฅํ•˜๊ธฐ ์œ„ํ•ด ์ฟ ํ‚ค์™€ ์›น ์Šคํ† ๋ฆฌ์ง€๋ฅผ ์‚ฌ์šฉํ•˜๊ธฐ ๋•Œ๋ฌธ์ด๋ผ ์ƒ๊ฐํ•œ๋‹ค. ์ด๋•Œ ์ €์žฅํ•  ๋ฌด์–ธ๊ฐ€๋กœ๋Š” ๋กœ๊ทธ์ธ ์ •๋ณด๊ฐ€ ๋  ์ˆ˜๋„ ์žˆ๊ณ  ํ•ด๋‹น ์›น ์‚ฌ์ดํŠธ์— ์–ธ์–ด ์ •๋ณด๊ฐ€ ๋ ์ˆ˜๋„ ์žˆ์„ ๊ฒƒ์ด๋‹ค.

ํ•„์ž๋„ ์–ด๋Š ์ •๋„ ์•Œ๊ณ  ์žˆ๋Š” ๋‚ด์šฉ์ด๊ธฐ๋Š” ํ•˜๋‚˜ ์‚ด์ง์‹ ํ˜ผ๋™๋˜๋Š” ๋ถ€๋ถ„์ด ๋Š๊ปด์ ธ ์ •๋ฆฌํ•ด์•ผ์ง€ ํ•˜๊ณ  ์ƒ๊ฐ์„ ํ•˜๊ณ  ์žˆ์—ˆ๋‹ค. ๊ทธ๋Ÿฌ๋˜ ์ค‘ ์–ด๋Š ํ•œ ์‚ฌ์ดํŠธ๋ฅผ ๋“ค์–ด๊ฐ”๋‹ค๊ฐ€ ๋งˆ์ฃผ์นœ ์ฟ ํ‚ค ํ—ˆ์šฉ ํŒ์—…์ฐฝ์„ ๋ณด๊ณ  ์–ด์„œ ๋นจ๋ฆฌ ์ •๋ฆฌํ•˜๊ณ  ๊ธฐ์–ตํ•˜๋ผ๋Š” ์˜๋ฏธ์ธ ๊ฒƒ ๊ฐ™์•„ ์ด ๊ธ€์„ ์ ๊ฒŒ ๋˜์—ˆ๋‹ค.

์‚ฌ์‹ค ์ฟ ํ‚ค์™€ ์›น ์Šคํ† ๋ฆฌ์ง€๋Š” ํ•„์ž๊ฐ€ ์‹ค์ œ๋กœ ํ”„๋ก ํŠธ์—”๋“œ ๋ฉด์ ‘์„ ๋ณด๋ฉด์„œ ๋งŽ์ด ๋ฐ›์•˜๋˜ ๊ธฐ์ˆ  ์งˆ๋ฌธ๋“ค TOP์— ์†ํ•˜๋Š” ๋‚ด์šฉ์ด๊ธฐ๋„ ํ•˜๋‹ค.

๐ŸŸก Cookie์™€ Web Storage์— ๋Œ€ํ•ด ๋น„๊ต ์„ค๋ช…ํ•ด์ฃผ์„ธ์š”.
๐ŸŸก Cookie์™€ Web Storage ๊ฐ๊ฐ์˜ ์žฅ,๋‹จ์ ์ด ์กด์žฌํ•˜๋Š”๋ฐ ๊ทธ์— ๋Œ€ํ•ด ์„ค๋ช…ํ•ด์ฃผ์„ธ์š”.
๐ŸŸก ์„ธ์…˜๊ณผ ์ฟ ํ‚ค์— ๋Œ€ํ•ด ์„ค๋ช…ํ•ด์ฃผ์„ธ์š”. (์‚ฌ์‹ค ์„ธ์…˜๊ณผ ์ฟ ํ‚ค๋Š” ์ด๋ฒˆ ํฌ์ŠคํŒ…์—์„œ ์ค‘์ ์„ ๋‘˜ ์ €์žฅ์†Œ์™€๋Š” ๋˜ ๋‹ค๋ฅธ 
๋‚ด์šฉ์ด์ง€๋งŒ ์„ธ์…˜๊ณผ ์ฟ ํ‚ค๋ฅผ ์–ด๋””์— ์ €์žฅํ•˜๋Š๋ƒ๋ฅผ ์ด์–ด ์„ค๋ช…ํ•  ๋•Œ ์Šคํ† ๋ฆฌ์ง€ ๊ฐœ๋…์ด ๋‚˜์˜ฌ ์ˆ˜ ์žˆ๋‹ค๊ณ  ๋ณธ๋‹ค.)
๐ŸŸก ๋กœ๊ทธ์ธ ์ฒ˜๋ฆฌ๋Š” ์–ด๋–ป๊ฒŒ ํ•˜์…จ๋Š”์ง€ ์„ค๋ช…ํ•ด์ฃผ์„ธ์š”.
๐ŸŸก ํ† ํฐ์„ ๋ฐ›์•„์™€ ์–ด๋””์— ์ €์žฅํ–ˆ๋‚˜์š”?
...
..
.

์ž, ๊ทธ๋ ‡๋‹ค๋ฉด ํ•˜๋‚˜์”ฉ ๊ณต๋ถ€ํ•ด๋ณด๋„๋ก ํ•˜์ž.

์ฟ ํ‚ค์™€ ์›น ์Šคํ† ๋ฆฌ์ง€๋Š” ์™œ ์‚ฌ์šฉํ•˜๋Š”๊ฑธ๊นŒ?


๋ณธ๊ฒฉ์ ์œผ๋กœ ์ฟ ํ‚ค์™€ ์›น ์Šคํ† ๋ฆฌ์ง€์— ๋Œ€ํ•ด ์ด์•ผ๊ธฐ ํ•ด๋ณด๊ธฐ ์ „์— ์ฟ ํ‚ค์™€ ์›น ์Šคํ† ๋ฆฌ์ง€๋Š” ์™œ ์‚ฌ์šฉํ•˜๋Š”์ง€์— ๋Œ€ํ•ด ๋จผ์ € ์•Œ๊ณ  ๋“ค์–ด๊ฐ€๋ฉด ์ข‹์„ ๊ฒƒ ๊ฐ™๋‹ค.

์šฐ๋ฆฌ์˜ HTTP ํ”„๋กœํ† ์ฝœ์€ ๋น„์—ฐ๊ฒฐ์„ฑ(Connectionless)๊ณผย ๋น„์ƒํƒœ์„ฑ(Stateless) ์ด๋ผ๋Š” ํŠน์„ฑ์„ ๊ฐ€์ง€๊ณ  ์žˆ๋‹ค.

  • ๋น„์—ฐ๊ฒฐ์„ฑ์€ ์„œ๋ฒ„์— ์—ฐ๊ฒฐ ํ›„ request ์— response ๋ฅผ ๋ฐ›์œผ๋ฉด ์—ฐ๊ฒฐ์„ ๋ฐ”๋กœ ๋Š์–ด๋ฒ„๋ฆฌ๋Š” ํŠน์„ฑ์ด๊ณ ,
  • ๋น„์ƒํƒœ์„ฑ์€ ํ†ต์‹ ์ด ๋๋‚˜๋ฉด ์ƒํƒœ๋ฅผ ์œ ์ง€ํ•˜์ง€ ์•Š๋Š” ํŠน์ง•์ด๋‹ค.

์ฆ‰, ๋น„์—ฐ๊ฒฐ์„ฑ์ด๋ผ๋Š” ํŠน์„ฑ ๋•Œ๋ฌธ์— ์—ฐ๊ฒฐ์ด ๋Š์–ด์ง€๊ณ  ๋‚˜๋ฉด ํด๋ผ์ด์–ธํŠธ์™€ ์„œ๋ฒ„ ์‚ฌ์ด์— ํ†ต์‹ ์ด ๋๋‚œ ๊ฒƒ์ด๊ธฐ ๋•Œ๋ฌธ์— ์ƒํƒœ๋ฅผ ์œ ์ง€ํ•˜์ง€ ์•Š๊ฒŒ ๋˜๋Š” ๊ฒƒ์ด๋‹ค.

์ด๊ฒƒ์ด ์™œ ๋ฌธ์ œ๊ฐ€ ๋ ๊นŒ? ์˜ˆ๋ฅผ ๋“ค์–ด,

1. A๊ฐ€ ์˜ท์ด ์‚ฌ๊ณ  ์‹ถ์–ด์ ธ์„œ ํ•ญ์ƒ ์ž์ฃผ๊ฐ€๋Š” ์‚ฌ์ดํŠธ์— ์ ‘์†์„ ํ–ˆ๋‹ค.
2. A๋Š” ๊ทธ ์‚ฌ์ดํŠธ์— ๋“ค์–ด๊ฐ€์ž๋งˆ์ž ๋กœ๊ทธ์ธํ•˜๊ธฐ๋ฅผ ๋ˆŒ๋ €๊ณ  ๋กœ๊ทธ์ธ์— ์„ฑ๊ณตํ–ˆ๋‹ค.
3. ๊ทธ๋Ÿฐ๋ฐ ์‹ค์ œ๋กœ ์˜ท์„ ๊ตฌ๋งคํ•˜๋ ค๊ณ  ํ•˜๋‹ˆ ๋กœ๊ทธ์ธ ํ–ˆ๋˜ ์ƒํƒœ๊ฐ€ ์œ ์ง€๋˜์ง€ ์•Š์•„ ๋‹ค์‹œ ๋กœ๊ทธ์ธ์„ ํ•ด์•ผํ•œ๋‹ค ๐Ÿค”

์ด๋Ÿฌํ•œ ๋น„์—ฐ๊ฒฐ์„ฑ๊ณผ ๋น„์ƒํƒœ์„ฑ์„ ๋ณด์•ˆํ•˜๊ณ ์ž ์„œ๋ฒ„์— ์ƒˆ๋กœ์šด ์š”์ฒญ์„ ๋ณด๋‚ผ ๋•Œ ์œ ์ง€ํ•˜๊ณ ์‹ถ์€ ์ƒํƒœ๋“ค์„ ํด๋ผ์ด์–ธํŠธ์— ์ €์žฅํ•ด๋‘๋Š” ๊ฒƒ์ด๋‹ค. HTML5๊ฐ€ ๋‚˜์˜ค๊ธฐ ์ „๊นŒ์ง€๋Š” ์ฟ ํ‚ค๊ฐ€ ์ƒํƒœ๋ฅผ ์ €์žฅํ•˜๋Š” ์ฃผ๋œ ๋ฐฉ๋ฒ•์ด์—ˆ์œผ๋‚˜ HTML5๊ฐ€ ๋‚˜์˜จ ํ›„์—๋Š” HTML5๊ฐ€ ์ง€์›ํ•˜๋Š” ์›น ์Šคํ† ๋ฆฌ์ง€(Local Storage, Session Storage)์—๋„ ์ƒํƒœ๋ฅผ ์ €์žฅํ•ด๋‘˜ ์ˆ˜ ์žˆ๊ฒŒ ๋˜์—ˆ๋‹ค.

์ž, ๊ทธ๋ ‡๋‹ค๋ฉด ์ฟ ํ‚ค์— ๋Œ€ํ•ด์„œ ๋จผ์ € ์•Œ์•„๋ณด์ž.

์ฟ ํ‚ค


์•„๋งˆ ์–ด๋–ค ์›น ์‚ฌ์ดํŠธ๋ฅผ ์ฒ˜์Œ ๋“ค์–ด๊ฐ”์„ ๋•Œ ์•„๋ž˜์™€ ๊ฐ™์ด ์ฟ ํ‚ค ํ—ˆ์šฉํ•˜๊ธฐ์— ๋Œ€ํ•œ ๋‚ด์šฉ์„ ๋งŽ์ด ๋ดค์„ ๊ฒƒ์ด๋‹ค.

์ด๋ฏธ์ง€๋Š” ๋น„๋งˆ์ดํ”„๋ Œ์ฆˆ ์›น์‚ฌ์ดํŠธ์— ๋“ค์–ด๊ฐ”๋‹ค๊ฐ€ ๋ฐœ๊ฒฌํ•œ ์ฟ ํ‚ค ํ—ˆ์šฉ ๋‚ด์šฉ์ด๋‹ค.
(์—ฌ๋‹ด์œผ๋กœ ํ•„์ž๋Š” ๋น„๋งˆ์ดํ”„๋ Œ์ฆˆ์™€ ์ „ํ˜€ ๊ด€๋ จ์ด ์—†๋Š” ์‚ฌ๋žŒ์ด์ง€๋งŒ ์›น ์‚ฌ์ดํŠธ๋ฅผ ๋“ค์–ด๊ฐ”์„ ๋•Œ ๋ณด์—ฌ์ค€ ์ € ์ฟ ํ‚ค ํ—ˆ์šฉํ•˜๊ธฐ๊ฐ€ ์ด๊ธ€์„ ์“ฐ๋Š”๊ฑธ ๋…๋ คํ•ด์คฌ๊ธฐ ๋•Œ๋ฌธ์— ๊ฐ€์ ธ์™€๋ดค๋‹ค.)

์ฟ ํ‚ค๋Š” ํ˜„์žฌ ์‚ฌ์ดํŠธ (์œ„์™€ ๊ฐ™์€ ๊ฒฝ์šฐ์—๋Š” ๋น„๋งˆ์ดํ”„๋ Œ์ฆˆ ์‚ฌ์ดํŠธ)๋ฅผ ์ด์šฉํ•˜๋Š” ์‚ฌ์šฉ์ž๊ฐ€ ๋กœ๊ทธ์ธ์„ ํ–ˆ๋˜ ์‚ฌ์šฉ์ž๋ฉด ๋กœ๊ทธ์ธ์„ ์œ ์ง€์‹œ์ผœ ์ฃผ๊ณ , ์‚ฌ์šฉ์ž๊ฐ€ ์„ค์ •ํ•ด ๋‘” ํ™˜๊ฒฝ์„ค์ •(์˜ˆ๋ฅผ ๋“ค์–ด, ์˜ค๋Š˜๋™์•ˆ ํŒ์—… ๋ณด์ง€ ์•Š๊ธฐ, ์‚ฌ์ดํŠธ ์–ธ์–ด๋ฅผ ํ•œ๊ตญ์–ด๋กœ ์„ค์ •ํ•˜๊ธฐ)๋“ฑ์„ ๊ธฐ์–ตํ•˜๋ฉฐ ์‚ฌ์šฉ์ž๊ฐ€ ํ•ด๋‹น ์‚ฌ์ดํŠธ๋ฅผ ๋‹ค์‹œ ์ ‘์†ํ•˜๊ฒŒ ๋์„ ๋•Œ ์ด์ „์— ์„ค์ •ํ•ด ๋‘” ๊ทธ๋Œ€๋กœ์˜ ๋ชจ์Šต์„ ๋ณด์—ฌ์ฃผ๊ฒŒ๋œ๋‹ค.

ํด๋ผ์ด์–ธํŠธ์— ์ €์žฅ๋ผ์žˆ๋Š” ์ฟ ํ‚ค ๊ฐ’๋“ค์€ Inspect - Application - Cookie์—์„œ ํ™•์ธํ•  ์ˆ˜ ์žˆ๋‹ค.

์ด๋Ÿฌํ•œ ์ฟ ํ‚ค์˜ ํŠน์ง•์€ ๋ฌด์—‡์ผ๊นŒ?


  • ์ฟ ํ‚ค๋Š” document.cookie ์„ ์ด์šฉํ•ด ํด๋ผ์ด์–ธํŠธ์—์„œ ์ง์ ‘ ๊ฐ’์„ ๋งŒ๋“ค์–ด ๋‚ผ์ˆ˜๋„ ์žˆ์ง€๋งŒ ์ฃผ๋กœ ์›น ์„œ๋ฒ„์—์„œ ๋งŒ๋“ค์–ด์ง„๋‹ค.
    ์˜ˆ๋ฅผ๋“ค์–ด, ์‚ฌ์šฉ์ž๊ฐ€ ์‚ฌ์ดํŠธ์— ๋ฐฉ๋ฌธํ•˜๋ฉด ๋กœ๊ทธ์ธ์„ ํ•œ๋‹ค๊ณ  ํ•ด๋ณด์ž.
    1. ์‚ฌ์šฉ์ž๊ฐ€ ๋กœ๊ทธ์ธ request๋ฅผ ๋ณด๋‚ด๋ฉด ์„œ๋ฒ„๋Š” ์‚ฌ์šฉ์ž์— ๋กœ๊ทธ์ธ ์š”์ฒญ์— ๋Œ€ํ•ด HTTP response๋ฅผ ๋ณด๋‚ธ๋‹ค.
       - ์ด ์„œ๋ฒ„์˜ ์‘๋‹ต ํ—ค๋”์— Set-Cookie์—๋Š” ์ธ์ฆ๋œ ์‚ฌ์šฉ์ž์˜ ์ •๋ณด๊ฐ€ ๋‹ด๊ฒจ์žˆ๊ณ  ์ด๋Š” ๋ธŒ๋ผ์šฐ์ €์— ์ €์žฅ๋œ๋‹ค.
    2. ์‚ฌ์šฉ์ž๊ฐ€ ๋™์ผํ•œ ์‚ฌ์ดํŠธ(๋™์ผํ•œ ๋„๋ฉ”์ธ)์—์„œ ์ƒˆ๋กœ์šด request๋ฅผ ๋ณด๋‚ด๋ ค ํ•˜๋ฉด ๋ธŒ๋ผ์šฐ์ €๋Š” HTTP request ํ—ค๋”์— ์ธ์ฆ๋œ ์‚ฌ์šฉ์ž์˜ ์ •๋ณด๊ฐ€ ๋‹ด๊ธด ์ฟ ํ‚ค ๊ฐ’์„ ์ž๋™์œผ๋กœ ์ถ”๊ฐ€ํ•˜์—ฌ ๋ณด๋‚ธ๋‹ค.
    3. ์„œ๋ฒ„๋Š” ํ—ค๋”์— ๋‹ด๊ฒจ ๋‚ ๋ผ์˜จ ์ธ์ฆ๋œ ์‚ฌ์šฉ์ž์˜ ์ •๋ณด๋ฅผ ํ™•์ธํ•˜๊ณ  ์‚ฌ์šฉ์ž๋ฅผ ์‹๋ณ„ํ•˜๊ฒŒ ๋œ๋‹ค.
  • ํ•˜๋‚˜์˜ ์ฟ ํ‚ค๋Š” 4KB๋ฅผ ๋„˜์„ ์ˆ˜ ์—†๊ณ  ํ•˜๋‚˜์˜ ๋„๋ฉ”์ธ๋‹น ์ €์žฅํ•  ์ˆ˜ ์žˆ๋Š” ์ฟ ํ‚ค์˜ ๊ฐœ์ˆ˜๋Š” 20์—ฌ๊ฐœ ์ •๋„์ด๋‹ค.
    • ์ฆ‰, ์ฟ ํ‚ค๋Š” ๋„๋ฉ”์ธ์— ๋”ฐ๋ผ ์ œํ•œ๋œ๋‹ค.
  • ๋™์ผํ•œ ๋„๋ฉ”์ธ์—์„œ ์„œ๋ฒ„์— request๋ฅผ ๋ณด๋‚ผ๋•Œ๋งˆ๋‹ค ์ž๋™์œผ๋กœ HTTP Cookie ํ—ค๋”์— ์ฟ ํ‚ค๋ฅผ ์ถ”๊ฐ€ํ•˜์—ฌ ๋ณด๋‚ด๊ฒŒ ๋œ๋‹ค.
  • ์œ ํšจ๊ธฐ๊ฐ„(expires์™€ max-age) ์„ค์ •์— ๋”ฐ๋ผ ์ฟ ํ‚ค๋Š” ์„ธ์…˜ ์ฟ ํ‚ค(session cookies)์™€ ์ง€์†์  ์ฟ ํ‚ค(persistent cookies)๋กœ ๋‚˜๋ˆ ์ง„๋‹ค.
    • ์„ธ์…˜ ์ฟ ํ‚ค : ์ฟ ํ‚ค์— 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";
  • ๊ฒฝ๋กœ(path), ๋„๋ฉ”์ธ(domain), secure, samesite, httpOnly ์ •๋ณด ๋“ฑ์œผ๋กœ ๊ตฌ์„ฑ๋ผ์žˆ๋‹ค.
    • ๊ฒฝ๋กœ : ๊ฒฝ๋กœ๋ฅผ ์„ค์ •ํ•˜๊ฒŒ ๋œ๋‹ค๋ฉด ์„ค์ •ํ•œ ๊ฒฝ๋กœ๋‚˜ ์„ค์ •ํ•œ ๊ฒฝ๋กœ ํ•˜์œ„ ๊ฒฝ๋กœ์—์„œ๋งŒ ์ฟ ํ‚ค์— ์ ‘๊ทผํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋œ๋‹ค.
      // ์ด์™€ ๊ฐ™์€ ๊ฒฝ์šฐ์—๋Š” 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


Web Storage (Local Storage, Session Storage)๋ฅผ ์‚ฌ์šฉํ•˜๊ฒŒ ๋˜๋Š” ์ด์œ ๋Š” ์•„๋ž˜์™€ ๊ฐ™์„ ๊ฒƒ์ด๋‹ค.

  • ์ฟ ํ‚ค์™€๋Š” ๋‹ค๋ฅด๊ฒŒ ์ €์žฅ์†Œ์— ์žˆ๋Š” ๊ฐ’๋“ค์€ HTTP ์š”์ฒญ์—์„œ ์ž๋™์œผ๋กœ ์ถ”๊ฐ€๊ฐ€ ๋˜์ง€ ์•Š๊ธฐ ๋•Œ๋ฌธ์— ์ฟ ํ‚ค๋ณด๋‹ค ๋” ๋งŽ์€ ๋ฐ์ดํ„ฐ๋ฅผ ๋ณด๊ด€ํ•  ์ˆ˜ ์žˆ๊ณ , ํด๋ผ์ด์–ธํŠธ์™€ ์„œ๋ฒ„๊ฐ„์˜ ํ†ต์‹ ์—์„œ ์ž๋™์œผ๋กœ ์ฟ ํ‚ค๊ฐ€ ์ถ”๊ฐ€๋˜๋ฉด์„œ ๋‚ญ๋น„๋˜๋Š” ๋„คํŠธ์›Œํฌ ํŠธ๋ž˜ํ”ฝ์„ ์ค„์ผ ์ˆ˜ ์žˆ๋‹ค.
  • ๋ณดํ†ต ์„œ๋ฒ„์—์„œ ์กฐ์ž‘ํ•˜๋˜ ์ฟ ํ‚ค์™€๋Š” ๋‹ค๋ฅด๊ฒŒ Web Storage ์กฐ์ž‘์€ ๋ชจ๋‘ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋‚ด์—์„œ ํ•˜๊ฒŒ๋œ๋‹ค.

Web Storage์— ๋Œ€ํ•ด ์กฐ๊ธˆ ๋” ์„ค๋ช…ํ•ด๋ณด์ž๋ฉด, ์›น ์Šคํ† ๋ฆฌ์ง€๋Š” HTML5๋ถ€ํ„ฐ ์ƒˆ๋กญ๊ฒŒ ์ง€์›ํ•˜๋Š” ์ €์žฅ์†Œ๋กœ ๋กœ์ปฌ ์Šคํ† ๋ฆฌ์ง€(local storage)์™€ย ์„ธ์…˜ ์Šคํ† ๋ฆฌ์ง€(session storage)๋กœ ์ด๋ฃจ์–ด์ ธ ์žˆ๋‹ค.


window ๊ฐ์ฒด์˜ ํ”„๋กœํผํ‹ฐ์ด๊ณ  ๊ฐ™์€ 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)์˜ ์ฐจ์ด์ ์€ ๋ฌด์—‡์ผ๊นŒ?

๋‘๊ฐœ์˜ ๊ฐ€์žฅ ํฐ ์ฐจ์ด์ ์€ ๋ฐ์ดํ„ฐ๊ฐ€ ์–ด๋–ค ๋ฒ”์œ„ ๋‚ด์—์„œ ์–ผ๋งˆ๋‚˜ ๋ณด์กด๋˜๋Š”์ง€์— ์žˆ๋‹ค๊ณ  ๋ณผ ์ˆ˜ ์žˆ๋‹ค.

๋กœ์ปฌ ์Šคํ† ๋ฆฌ์ง€(local storage)


  • ์ถœ์ฒ˜(Origin)๊ฐ€ ๊ฐ™์€ ๊ฒฝ์šฐ ์—ฌ๋Ÿฌ ํƒญ์ด๋‚˜ ์ฐฝ ๊ฐ„์— ๋ฐ์ดํ„ฐ๊ฐ€ ์„œ๋กœ ๊ณต์œ ๋œ๋‹ค.
  • ํƒญ์ด๋‚˜ ์ฐฝ์„ ๋‹ซ์•„๋„ ๋ฐ์ดํ„ฐ๋Š” ๋ธŒ๋ผ์šฐ์ €์—์„œ ์‚ฌ๋ผ์ง€์ง€ ์•Š๋Š”๋‹ค.
    • ๋ช…์‹œ์ ์œผ๋กœ ์ง€์šฐ์ง€ ์•Š๋Š” ํ•œ ์˜๊ตฌ์ ์œผ๋กœ ์ €์žฅ๋œ๋‹ค.
  • ์ž๋™ ๋กœ๊ทธ์ธ๊ณผ ๊ฐ™์€ ์ง€์†์ ์œผ๋กœ ํ•„์š”ํ•œ ์ •๋ณด๋ฅผ ์ €์žฅํ•˜๊ธฐ์— ์ข‹๋‹ค.

์„ธ์…˜ ์Šคํ† ๋ฆฌ์ง€(session storage)


  • ํƒญ ๋‹จ์œ„๋กœ ์„ธ์…˜ ์Šคํ† ๋ฆฌ์ง€๊ฐ€ ์ƒ์„ฑ๋˜๊ธฐ ๋•Œ๋ฌธ์— ์„ธ์…˜ ์Šคํ† ๋ฆฌ์ง€๋Š” ํ˜„์žฌ ๋– ์žˆ๋Š” ํƒญ์—์„œ๋งŒ ์œ ์ง€๋œ๋‹ค.
    • ๊ฐ™์€ ํŽ˜์ด์ง€๋ผ๋„ ๋‹ค๋ฅธ ํƒญ์— ์žˆ์œผ๋ฉด ์„œ๋กœ ๋‹ค๋ฅธ ์„ธ์…˜ ์Šคํ† ๋ฆฌ์ง€์— ์ €์žฅํ•˜๊ฒŒ ๋œ๋‹ค.
  • ํƒญ์ด๋‚˜ ์ฐฝ์„ ๋‹ซ์œผ๋ฉด ๋ฐ์ดํ„ฐ๋Š” ๋ธŒ๋ผ์šฐ์ €์—์„œ ์‚ฌ๋ผ์ง„๋‹ค.
  • ์ผํšŒ์„ฑ ๋กœ๊ทธ์ธ๊ณผ ๊ฐ™์€ ์ผ์‹œ์ ์œผ๋กœ ํ•„์š”ํ•œ ์ •๋ณด๋ฅผ ์ €์žฅํ•˜๊ธฐ์— ์ข‹๋‹ค.

์—ฌ๊ธฐ๊นŒ์ง€ Cookie์™€ Web Storage (Local Storage, Session Storage)์— ๋Œ€ํ•ด ๊ฐ๊ฐ ์•Œ์•„๋ดค๋Š”๋ฐ ์ฟ ํ‚ค์™€ ์›น ์Šคํ† ๋ฆฌ์ง€๋ฅผ ๋น„๊ตํ•ด๋ณด๋ฉด์„œ ํฌ์ŠคํŒ…์„ ๋งˆ์น˜๋ฉด ์ข‹์„ ๊ฒƒ ๊ฐ™๋‹ค.


  1. ์ฟ ํ‚ค๋Š” ๋งค๋ฒˆ ์„œ๋ฒ„๋กœ ์ „๋‹ฌ๋˜์ง€๋งŒ ์›น ์Šคํ† ๋ฆฌ์ง€๋‚ด์˜ ๋ฐ์ดํ„ฐ๋Š” ์›ํ• ๋•Œ๋งŒ ์ „์†กํ•  ์ˆ˜ ์žˆ๋‹ค.
  2. ์ฟ ํ‚ค๋Š” ์›น ์Šคํ† ๋ฆฌ์ง€์— ๋น„ํ•ด ๋น„๊ต์  ์ ์€ ์šฉ๋Ÿ‰๊ณผ ๊ฐœ์ˆ˜๋ฅผ ๊ฐ€์ง€๊ณ  ์žˆ๋‹ค.
  3. ์ฟ ํ‚ค๋Š” ์›น ์Šคํ† ๋ฆฌ์ง€์™€ ๋‹ค๋ฅด๊ฒŒ ์œ ํšจ ๊ธฐ๊ฐ„์„ ์„ค์ •ํ•  ์ˆ˜ ์žˆ๊ธฐ ๋•Œ๋ฌธ์— โ€˜์ผ์ฃผ์ผ๋™์•ˆ ๋ณด์ง€ ์•Š๊ธฐโ€™์™€ ๊ฐ™์€ ๊ธฐ๋Šฅ์„ ๊ตฌํ˜„ํ•ด๋‚ผ ์ˆ˜ ์žˆ๋‹ค.

Reference


profile
์–ธ์ œ๋‚˜ ์ƒˆ๋กœ์šด ๋„์ „์„ ๊ฟˆ๊พธ๋Š” ๊ฐœ๋ฐœ์ž

0๊ฐœ์˜ ๋Œ“๊ธ€