๐Ÿ’ป history

waterglassesยท2022๋…„ 4์›” 7์ผ
0

TIL

๋ชฉ๋ก ๋ณด๊ธฐ
15/50
post-thumbnail

์ด ๊ธ€์€ history ๋Œ€ํ•ด์„œ ๋‹ค๋ฃจ์—ˆ์Šต๋‹ˆ๋‹ค.
โš ๏ธ ์ •๋ฆฌํ•œ ๋‚ด์šฉ์€ ์˜คํƒ€๋‚˜ ์ž˜๋ชป๋œ ์ •๋ณด๊ฐ€ ์žˆ์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋Œ“๊ธ€๋กœ ์•Œ๋ ค์ฃผ์‹œ๋ฉด ๊ฐ์‚ฌํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค

๐Ÿ“ƒ ์˜ค๋Š˜ ๊ณต๋ถ€ํ•œ ๊ฒƒ

history

history๋Š” ๋ธŒ๋ผ์šฐ์ €์˜ ์„ธ์…˜ ๊ธฐ๋ก! ์ฆ‰ ํ˜„์žฌ ํŽ˜์ด์ง€๋ฅผ ๋ถˆ๋Ÿฌ์˜จ ํƒญ ๋˜๋Š” ํ”„๋ ˆ์ž„์˜ ๋ฐฉ๋ฌธ ๊ธฐ๋ก์„ ์กฐ์ž‘ํ•  ์ˆ˜ ์ž‡๋Š” ๋ฐฉ๋ฒ•์„ ์ œ๊ณตํ•œ๋‹ค.
ํžˆ์Šคํ† ๋ฆฌ๋Š” ๋ธŒ๋ผ์šฐ์ €์—์„œ ํŽ˜์ด์ง€ ๋กœ๋”ฉ์„ ํ•˜๋ฉด, ์„ธ์…˜ ํžˆ์Šคํ† ๋ฆฌ๋ผ๋Š” ๊ฒƒ์„ ๊ฐ–๋Š”๋ฐ ์„ธ์…˜ ํžˆ์Šคํ† ๋ฆฌ๋Š” ํŽ˜์ด์ง€๋ฅผ ์ด๋™ํ•  ๋–„๋งˆ๋‹ค ์Œ“์ด๊ฒŒ ๋˜๋ฉฐ, ์ด๋ฅผ ํ†ตํ•ด ๋’ค๋กœ๊ฐ€๊ธฐ ์‹œ ์ด์ „ ํŽ˜์ด์ง€๋กœ ๊ฐ€๊ฑฐ๋‚˜ ๋’ค๋กœ ๊ฐ„ ์ดํ›„ ๋‹ค์‹œ ์•ž์œผ๋กœ ๊ฐ€๋Š” ๋“ฑ์˜ ์ด๋™์ด ๊ฐ€๋Šฅํ•˜๋‹ค.

pushState

history.pushState(state, title, url)

state
์ƒˆ๋กœ์šด ์„ธ์…˜ ๊ธฐ๋ก ํ•ญ๋ชฉ์— ์—ฐ๊ฒฐํ•  ์ƒํƒœ ๊ฐ์ฒด

title
์ง€๊ธˆ์€ ๋Œ€๋ถ€๋ถ„์˜ ๋ธŒ๋ผ์šฐ์ €๊ฐ€ title ๋งค๊ฐœ๋ณ€์ˆ˜๋ฅผ ๋ฌด์‹œํ•œ๋‹ค.

url
์„ธ์…˜ ํžˆ์Šคํ† ๋ฆฌ์— ์ƒˆ๋กœ ๋„ฃ์„ url์ž…๋‹ˆ๋‹ค. aํƒœ๊ทธ๋ฅผ ํด๋ฆญํ•˜๊ฑฐ๋‚˜ location.href๋กœ url์„ ๋ณ€๊ฒฝํ•˜๋Š” ๊ฒƒ๊ณผ๋Š” ๋‹ค๋ฅด๊ฒŒ ํ™”๋ฉด์ด ๋ฆฌ๋กœ๋“œ ๋˜์ง€ ์•Š๋Š”๋‹ค

** state์™€ title์€ ๋ณดํ†ต null์„ ๋„ฃ์–ด์„œ ์ž‘์—…ํ•œ๋‹ค.

replaceState

history.replaceState(state, title, url)

state
์ƒˆ๋กœ์šด ์„ธ์…˜ ๊ธฐ๋ก ํ•ญ๋ชฉ์— ์—ฐ๊ฒฐํ•  ์ƒํƒœ ๊ฐ์ฒด

title
์ง€๊ธˆ์€ ๋Œ€๋ถ€๋ถ„์˜ ๋ธŒ๋ผ์šฐ์ €๊ฐ€ title ๋งค๊ฐœ๋ณ€์ˆ˜๋ฅผ ๋ฌด์‹œํ•œ๋‹ค.

url
์„ธ์…˜ ํžˆ์Šคํ† ๋ฆฌ์—์„œ ํ˜„์žฌ url๊ณผ ๋Œ€์ฒด๋  url. a ํƒœ๊ทธ๋ฅผ ํด๋ฆญํ•˜๊ฑฐ๋‚˜ location.href๋กœ url์„ ๋ณ€๊ฒฝํ•˜๋Š” ๊ฒƒ๊ณผ๋Š” ๋‹ค๋ฅด๊ฒŒ ์ด url์ด ๋ณ€๊ฒฝ๋œ๋‹ค๊ณ  ํ•ด์„œ ํ™”๋ฉด์ด ๋ฆฌ๋กœ๋“œ ๋˜์ง€ ์•Š๋Š”๋‹ค

** state์™€ title์€ ๋ณดํ†ต null์„ ๋„ฃ์–ด์„œ ์ž‘์—…ํ•œ๋‹ค.

history api ์‚ฌ์šฉ ์‹œ ๊ธฐ์–ตํ•  ์ 

  1. ํ˜„์žฌ location์˜ pathname์œผ๋กœ ์–ด๋–ค ๊ฒƒ์„ ๊ทธ๋ ค์•ผ ํ• ์ง€ ๊ฒฐ์ •ํ•˜๋Š” route ๋กœ์ง์ด ํ•„์š”ํ•˜๋‹ค.
  2. ์‹ค์ œ๋กœ ํ™”๋ฉด์ด๋™์€ ์•„๋‹ˆ์ง€๋งŒ pushstate๋ฅผ ํ˜ธ์ถœ ์‹œํ‚ฌ ์ด๋ฒคํŠธ ์ฒ˜๋ฆฌ
  3. ์•ž์œผ๋กœ ๊ฐ€๊ธฐ ๋˜๋Š” ๋’ค๋กœ๊ฐ€๊ธฐ ์‹œ์— popstate ์ด๋ฒคํŠธ๋ฅผ ์ฒ˜๋ฆฌํ•ด์•ผํ•œ๋‹ค.

์ •๋ฆฌ

  • history๋ฅผ ์ด์šฉํ•˜๋ฉด ํ™”๋ฉด ์ด๋™์„ ์ผ์œผํ‚ค์ง€ ์•Š๊ณ ๋„ ๋ธŒ๋ผ์šฐ์ €์˜ url์„ ๋ฐ”๊ฟ€ ์ˆ˜ ์žˆ๋‹ค.
  • history api์˜ url์„ ๋ณ€๊ฒฝํ•œ ํ›„ ์ƒˆ๋กœ๊ณ ์นจํ•˜๋ฉด, ๋ณ€๊ฒฝ๋œ url์˜ ์‹ค์ œ ํŒŒ์ผ์„ ์ฐพ์œผ๋ ค๊ณ  ํ•˜๊ธฐ ๋•Œ๋ฌธ์— 404์—๋Ÿฌ๊ฐ€ ๋‚œ๋‹ค. => 404์ผ ๊ฒฝ์šฐ root์˜ index.html๋กœ ์š”์ฒญ์„ ๋Œ๋ ค์ฃผ๋Š” ์ฒ˜๋ฆฌ๊ฐ€ ํ•„์š”

๐Ÿ”ฅ ์˜ค๋Š˜์˜ ๋Š๋‚€์ 

history api์— ๋Œ€ํ•ด์„œ ๋‹ค๋ฃจ์—ˆ๋‹ค. ์•„๋ฌด๋ž˜๋„ ์ฒ˜์Œ ์•Œ๊ฒŒ ๋˜์—ˆ๊ธฐ ๋•Œ๋ฌธ์— ์ข€ ๋‚ฎ์„ค์—ˆ๋‹ฌ๊นŒ..?๐Ÿ˜‚ ์•„ ๊ทธ๋ฆฌ๊ณ ๋ฆฌ์•กํŠธ์—์„œ ๋ผ์šฐํ„ฐ ์ฒ˜๋ฆฌ๋ฅผ ์–ด๋–ป๊ฒŒ ํ•˜๋Š”๊ฑธ๊นŒ?๋ฅผ ์ฐพ์•„ ๋ณด๋ฉด ์ข‹์„ ๊ฒƒ ๊ฐ™๋‹ค๊ณ  ํ•˜์…”์„œ ์ฐพ์•„๋ณด์•˜๋‹ค. React๋Š” ๋Œ€๋ถ€๋ถ„ React-Router ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์‚ฌ์šฉํ•ด์„œ ๋ผ์šฐํŒ…์„ ํ•ด๊ฒฐํ•˜๋Š”๋ฐ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์—์„œ location์ด๋‚˜ history๊ฐ™์€ ๋ธŒ๋ผ์šฐ์ € ๋‚ด์žฅ api์™€ ์™„๋ฒฝํ•˜๊ฒŒ ์—ฐ๋™์ด ๋œ๋‹ค๊ณ  ํ•œ๋‹ค. ์ด ๋ถ€๋ถ„์€ ๋‹ค์‹œ ์ž์„ธํžˆ ์ฐพ์•„๋ด์•ผ๊ฒ ๋‹ค.

๊ณผ์ œ๋ฅผ ์–ด์ œ ์ƒˆ๋ฒฝ์— 4์‹œ๊ฐ„๋™์•ˆ ๊ธฐ๋Šฅ ํ•œ๊ฐœ๋ฅผ ์Šค์Šค๋กœ ๊ตฌํ˜„ํ•ด๋ณธ ํ›„์—๋Š” ์ง„๋„๊ฐ€ ํŒํŒ ๋‚˜๊ฐ”๋‹ค.. ๐Ÿ˜‚ ๊ธฐ๋Šฅ ํ•˜๋‚˜์— 4์‹œ๊ฐ„์ด๋ผ๋‹ˆ!ใ… ใ… 
๊ธฐ์—…์—์„œ ๋ฐ”๋‹๋ผJS๋กœ ๊ณผ์ œ๋ฅผ ๋ณผ ๋•Œ 3์‹œ๊ฐ„ ์ •๋„ ์ฃผ์–ด์ง€๋Š” ๊ฑธ๋กœ ์•„๋Š”๋ฐ ์ง€๊ธˆ ์‹ค๋ ฅ์ด๋ฉด ๊ธฐ๋Šฅ ํ•˜๋‚˜ ๊ตฌํ˜„ํ•˜๋ฉด ๋์ผ๊ฑฐ๋ผ๋Š” ์ƒ๊ฐ์ด ๋“ค์—ˆ๋‹ค. ๋‹ค๋“ค ์–ด๋–ป๊ฒŒ ๊ทธ๋ ‡๊ฒŒ ์ž˜ํ•˜์‹œ๋Š”์ง€!! ๋‚˜๋„ ๋ฐ”๋‹๋ผJS์— ์ต์ˆ™ํ•ด์ ธ์•ผ์ง€!

์š”์ฆ˜ ์ •๋ง CSS๋ฅผ ์ž˜ ์“ฐ๊ณ  ์‹ถ๋‹ค. ์• ๋‹ˆ๋ฉ”์ด์…˜์ด๋ผ๋˜์ง€ ๋ฐ˜์‘ํ˜•์ด๋ผ๋˜์ง€ ์‚ฌ์šฉ์ž๊ฐ€ ๋Š๋ผ๊ธฐ์—๋„ ์ž์—ฐ์Šค๋Ÿฝ๊ฒŒ ์—ฐ๊ฒฐ๋˜๋„๋ก? ๋งŒ๋“ค๊ณ  ์‹ถ๋‹ค.
๋‹ค๋ฅธ ํ”„๋กฑ์ด ๋ถ„๋“ค์ด ๊ณผ์ œ ๋‚ผ ๋•Œ ์ด์˜๊ฒŒ ๊พธ๋ฉฐ์„œ ์ œ์ถœํ•˜์‹œ๋Š”๋ฐ ๋ณธ๋ฐ›์•„์•ผ๊ฒ ๋‹ค. ๋‚˜๋Š” ๊ทธ๋ƒฅ ๊ธฐ๋ณธ.. ๊ฐ•์˜..๊ทธ๋Œ€๋ก ๋ฐ..ใ… ใ… 
๋”์šฑ ๋” ์—ด์‹ฌํžˆ ์‚ด์•„์•ผ์ง€๐Ÿ”ฅ๐Ÿ”ฅ๐Ÿ”ฅ

๐Ÿ—ฃ ์˜ค๋Š˜์˜ TMI

ํ•  ๊ฒƒ์ด ๋„ˆ๋ฌด ๋งŽ๋„ค์š”~~ ๋น™๊ธ€๋น™๊ธ€ ๐Ÿ˜ตโ€๐Ÿ’ซ ์•ž๋จธ๋ฆฌ๊ฐ€ ์š”์ฆ˜ ๋„ˆ๋ฌด ๊ฑฐ์Šฌ๋ฆฐ๋‹ค,, ๊ดœํžˆ ์ž˜๋ž๋‚˜๋ด์š”๐Ÿ˜…

Refer

ํ”„๋กœ๊ทธ๋ž˜๋จธ์Šค ๋ฐ๋ธŒ์ฝ”์Šค
MDN - History

์˜ค๋Š˜์˜ ๋‚ด์šฉ ์ •๋ฆฌ

๋ฐ๋ธŒ์ฝ”์Šค Day14 history

profile
๋งค ์ˆœ๊ฐ„ ์„ฑ์žฅํ•˜๋Š” ๊ฐœ๋ฐœ์ž๊ฐ€ ๋˜๋ ค๊ณ  ๋…ธ๋ ฅํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

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

comment-user-thumbnail
2022๋…„ 4์›” 8์ผ

๋ฌผ์•ˆ๊ฒฝ์ด์‹œ๊ตฐ์š”

๋‹ต๊ธ€ ๋‹ฌ๊ธฐ