[TIL] d+34

riverยท2022๋…„ 4์›” 9์ผ
0

Dday๊ฐ€ ํ•˜๋ฃจ ๋ฐ€๋ ธ๋Š”๋ฐ ์–ด์ฉŒ๋‹ค๊ฐ€ ์–ธ์ œ ๋ฐ€๋ฆฐ ๊ฑด์ง€ ๋ชจ๋ฅด๊ฒ ๋‹ค...?

์˜ค๋Š˜ ํ•œ ์ผ

  • ํฌ์ŠคํŒ… ๊ด€๋ จ ๋ฆฌ๋•์Šค ์ถ”๊ฐ€
  • Mock API๋ฅผ ์‚ฌ์šฉํ•ด ๋ฐ์ดํ„ฐ๊ฐ€ ์ž˜ ๋ถˆ๋Ÿฌ์™€์ง€๋Š”์ง€ ํ…Œ์ŠคํŠธ
    • ๊ฒŒ์‹œ๊ธ€ ๋ชฉ๋ก
    • ์ƒ์„ธํŽ˜์ด์ง€

๋ฐ›์•„์˜จ ๋ฐ์ดํ„ฐ๋ฅผ ๋ชฉ๋ก์— ๋ฟŒ๋ ค์ฃผ๋Š” ๊ฒƒ ๊นŒ์ง„ ์„ฑ๊ณตํ–ˆ๋Š”๋ฐ ๊ฐ ๊ฒŒ์‹œ๋ฌผ๋ณ„ ์ƒ์„ธํŽ˜์ด์ง€์— ๋ฐ์ดํ„ฐ๋ฅผ ์–ด๋–ค ๋ฐฉ์‹์œผ๋กœ ๋งค์น˜์‹œ์ผœ ๋ฟŒ๋ ค์ค˜์•ผํ• ์ง€๊ฐ€ ๊ณ ๋ฏผ์ด์—ˆ๋‹ค.

์ผ๋‹จ ์˜ˆ์ „์— ๊ฐ•์˜์—์„œ ๋ฐฐ์› ๋˜ ๊ฒƒ ์ฒ˜๋Ÿผ url ํŒŒ๋ผ๋ฏธํ„ฐ๋กœ ๋ฐ์ดํ„ฐ์˜ index๋ฅผ ๋„ฃ์–ด ๋ฐ์ดํ„ฐ๋ฅผ ๊บผ๋‚ผ ๋•Œ๋„ ํŒŒ๋ผ๋ฏธํ„ฐ๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๋ฐฉ๋ฒ•์€ ์ง€๊ธˆ ํ”„๋กœ์ ํŠธ์—์„  urlํŒŒ๋ผ๋ฏธํ„ฐ๋ฅผ postid๋กœ ์ฃผ์—ˆ๊ธฐ ๋•Œ๋ฌธ์— ๊ธ€์ด ์‚ญ์ œ๋˜๊ฑฐ๋‚˜ ํ•  ๊ฒฝ์šฐ ๋ชฉ๋ก๊ณผ ์ƒ์„ธํŽ˜์ด์ง€์˜ ๋ฐ์ดํ„ฐ๊ฐ€ ๊ผฌ์ผ ์ˆ˜ ์žˆ์–ด ์‚ฌ์šฉํ•  ์ˆ˜ ์—†์—ˆ๋‹ค.
๊ทธ๋ ‡๋‹ค๊ณ  ํŒŒ๋ผ๋ฏธํ„ฐ๋ฅผ ๊ทธ๋ƒฅ ์ธ๋ฑ์Šค๋กœ ์ฃผ์ž๋‹ˆ ์™ ์ง€ ๊ทธ๋Ÿฌ๊ธด ์‹ซ์–ด์„œ... ๐Ÿ˜…

๊ทธ๋ฆฌ๊ณ  ์ง€๊ธˆ์ด์•ผ ๊ฒŒ์‹œ๊ธ€ ๋ฐ์ดํ„ฐ ์ˆ˜๊ฐ€ ์ ์ง€๋งŒ, ๋งŒ์•ฝ ๊ธ€ ์ˆ˜๊ฐ€ ๋งŽ์„ ๊ฒฝ์šฐ ์ผ์ผํžˆ ๊ทธ ๋งŽ์€ ๋ฐ์ดํ„ฐ๋“ค์˜ postid๋ฅผ ๋น„๊ตํ•˜๋Š” ์ž‘์—…์„ ๋Œ๋ฆฌ๋Š” ๊ฒŒ ๋งž๋Š”์ง€...?

๊ทผ๋ฐ ๋ˆ„๋ฆฌ๋‹˜์ด ์–ด์ฐจํ”ผ ์ƒ์„ธํŽ˜์ด์ง€ ๋ฐ”๊นฅ์—์„œ map๋Œ๋ ค์„œ ๋ฟŒ๋ ค์ค€ ๋ฐ์ดํ„ฐ๊ฐ€ ์žˆ์œผ๋‹ˆ ๊ทธ๊ฑธ props๋กœ ๋„˜๊ฒจ์ฃผ๋Š” ๊ฒŒ ์–ด๋–ป๊ฒ ๋ƒ๋Š” ํžŒํŠธ๋ฅผ ์ฃผ์…”์„œ ์ข€ ์ฐพ์•„๋ณด๋‹ค๊ฐ€ history๋กœ props๋ฅผ ๋„˜๊ฒจ์ฃผ๋Š” ์‹์œผ๋กœ ํ•ด๊ฒฐํ–ˆ๋‹ค! ใ… .ใ… 

  • 04/10 - history๋ฅผ ํ†ตํ•ด props๋ฅผ ๋„˜๊ฒจ์ฃผ๋Š” ์‹์œผ๋กœ ์ง„ํ–‰ํ•˜๋ฉด post url์„ ์ง์ ‘ ์ž…๋ ฅํ•ด ์ ‘๊ทผ์‹œ ํŽ˜์ด์ง€ ๋ Œ๋”๋ง์ด ๋˜์ง€ ์•Š๋Š”๋‹ค ใ… ใ… ...!
  • ๊ทธ๋ƒฅ ์ƒ์„ธํŽ˜์ด์ง€์— ํ•ด๋‹นํ•˜๋Š” api url์—์„œ ํ•ด๋‹น ๋ฐ์ดํ„ฐ๋งŒ ๋ฐ›์•„์˜ค๋ฉด ํ›จ์”ฌ ํŽธํ•˜๋‹ค!

useHistory()๋ฅผ ์‚ฌ์šฉํ•ด props ๋„˜๊ฒจ์ฃผ๊ธฐ

history๋กœ ๋„˜์–ด์˜จ props ๋ฐ›์•„๋‹ค ์‚ฌ์šฉํ•˜๊ธฐ

// ๋น„๊ตฌ์กฐํ™”ํ• ๋‹น
const { props1, props2, props3 } = location.state; 

๋ฐ์ดํ„ฐ๊ฐ€ ์ž˜ ๋„˜์–ด์™”๋‹ค!





๋‚ด์ผ ํ•  ์ผ

  • Mock API ์ฝ”๋ฉ˜ํŠธ ๋ฐ์ดํ„ฐ ๋ถˆ๋Ÿฌ์˜ค๊ธฐ
  • ๋กœ๊ทธ์ธ, ํšŒ์›๊ฐ€์ž… ๋ฐ์ดํ„ฐ ๋ฆฌ๋•์Šค๋กœ ๋„˜๊ฒจ์ฃผ๊ธฐ
  • WIL ์ž‘์„ฑ





๋ˆ„๋ฆฌ๋‹˜์˜ jwt ํ† ํฐ ๋””์ฝ”๋”ฉ ํŒ

jwt ๋””์ฝ”๋”ฉ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ : jwt-decode
๋””์ฝ”๋”ฉ ์ฝ”๋“œ : JSON.parse(atob(token.split(".")[idx]))

profile
๊ฐ€๋ณด์ž๊ณ 

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