Daily/Today I Learned

22.06.24_TIL

ํ˜ธ๋ฐ€์ด 2022. 6. 24. 09:29

๐Ÿ“Œ ์Šตํ•˜๊ณ  ๋ˆ…๋ˆ…ํ•˜๋˜ ๋ชฉ์š”์ผ์ด ์ง€๋‚˜๊ณ  ๋ง‘์€ ํ•˜๋ฃจ๋ฅผ ์กธ๋ฆฐ๋ˆˆ์œผ๋กœ ์‹œ์ž‘ํ–ˆ์Šต๋‹ˆ๋‹ค๐Ÿฅฒ ์ƒˆ๋ฒฝ๊นŒ์ง€ ์ƒˆ๋กœ์šด ๋ฆฌ์•กํŠธ ๊ฐ•์˜๋ฅผ ๋“ค์—ˆ๋Š”๋ฐ ๋‚ด์šฉ์ด ๋„ˆ๋ฌด ์ข‹์•„์„œ ์‹œ๊ฐ„ ๊ฐ€๋Š”์ค„ ๋ชจ๋ฅด๊ณ  ๋“ค์—ˆ์Šต๋‹ˆ๋‹ค. ๊ฐ•์˜๋Š” ์œ ๋ฐ๋ฏธ์˜ 'React ์™„๋ฒฝ๊ฐ€์ด๋“œ'๋ผ๋Š” ์ œ๋ชฉ์˜ ์™ธ๊ตญ ๊ฐ•์‚ฌ๋ถ„๊ป˜์„œ ๊ฐ•์˜ํ•˜๋Š” ๋‚ด์šฉ์ด์—ˆ๋Š”๋ฐ ๋ฆฌ์•กํŠธ๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ์ด์œ ๋ถ€ํ„ฐ ์ฐจ๊ทผ์ฐจ๊ทผ ์„ค๋ช…ํ•ด์ฃผ์‹œ๊ณ  ๋‚ด์šฉ์ด ๋ฆฌ์•กํŠธ์— ๋Œ€ํ•œ ๋‚ด์šฉ์ด ๊นŠ์ด์žˆ์–ด์„œ ์ฒœ์ฒœํžˆ ํ•™์Šต ํ•  ์ˆ˜ ์žˆ์—ˆ์Šต๋‹ˆ๋‹ค.
๋˜, ์ด๋ฒˆ์— ์ง„ํ–‰ํ–ˆ๋˜ express ์„œ๋ฒ„๋ฅผ ๊ตฌํ˜„ํ•ด์„œ ๋ฆฌ์•กํŠธ๋ฅผ ์ด์šฉํ•œ crud๋ฅผ ํ”„๋กœ์ ํŠธ์— fetch๋ฅผ ํ•ด์„œ ์‹ค์ œ ์„œ๋ฒ„์—์„œ API ๋ฐ์ดํ„ฐ๋ฅผ ๋ฐ›์•„์™€ ๋ Œ๋”๋ง์„ ํ•ด๋ณด๊ธฐ๋กœ ํ•ด์„œ ๋งˆ์Œ์ด ๋“ค๋–ด์Šต๋‹ˆ๋‹ค. ์ด๋ฒˆ์—๋„ ๋ฌด์‚ฌํžˆ ํ•ด๊ฒฐํ•  ์ˆ˜ ์žˆ๋„๋ก ๊ธฐ๋Œ€ํ•ด ๋ด…๋‹ˆ๋‹ค.**

 

๐Ÿ“— ์˜ค๋Š˜ ํ•™์Šตํ•œ ๋‚ด์šฉ

JSON (JavaScript Object Notation)

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

JSON ์ „์†ก ๊ฐ€๋Šฅํ•œ ์กฐ๊ฑด (transferable codition)

  • ์ˆ˜์‹ ์ž์™€ ๋ฐœ์ง„๊ฐ€๊ฐ€ ๊ฐ™์€ ํ”„๋กœ๊ทธ๋žจ์„ ์‚ฌ์šฉํ•œ๋‹ค.
  • ๋ฌธ์ž์—ด์ฒ˜๋Ÿผ ๋ฒ”์šฉ์ ์œผ๋กœ ์ฝ์„ ์ˆ˜ ์žˆ์–ด์•ผ ํ•œ๋‹ค.

JSON.stringify: ๊ฐ์ฒด๋ฅผ JSON์œผ๋กœ ๋ณ€ํ™˜

  • ์ง๋ ฌํ™”(serialize)
  • ๋ณ€ํ™˜๋œ ๊ฐ์ฒด์˜ ํƒ€์ž…์€ ๋ฌธ์ž์—ด

JSON.parse: JSON์„ ๊ฐ์ฒด๋กœ ๋ณ€ํ™˜

  • ์—ญ์ง๋ ฌํ™”(deserialize)

 

๐Ÿ“˜ ์ถ”๊ฐ€๋กœ ๊ณต๋ถ€ํ•  ๋‚ด์šฉ

[udemy] React ์™„๋ฒฝ ๊ฐ€์ด๋“œ ๊ฐ•์˜ ๋ณด๊ธฐ (๋งค์ผ ์กฐ๊ธˆ์”ฉ ์ด๋ผ๋„ ๊พธ์ค€ํžˆ ๋“ฃ๊ธฐ)

React์— ๋กœ์ปฌ์„œ๋ฒ„ API ๋ฐ์ดํ„ฐ ๋ถˆ๋Ÿฌ์˜ค๊ธฐ

  • express ๋กœ์ปฌ ์„œ๋ฒ„ ๊ตฌํ˜„ 
    • ๋ฐ์ดํ„ฐ ์กฐํšŒ
    • ๋ฐ์ดํ„ฐ ์ถ”๊ฐ€
    • ๋ฐ์ดํ„ฐ ์ˆ˜์ •
    • ๋ฐ์ดํ„ฐ ์‚ญ์ œ
  • React CRUD ํ”„๋กœ์ ํŠธ์— ์ ์šฉ
    • API ๋ฐ์ดํ„ฐ ์กฐํšŒ ํ›„ ๋ Œ๋”๋ง
      • React๋กœ ๋งŒ๋“  ํŽ˜์ด์ง€ ์ƒˆ๋กœ๊ณ ์นจํ•ด๋„ ๋ฐ์ดํ„ฐ ๋‚ ์•„๊ฐ€์ง€ ์•Š๊ฒŒํ•˜๊ธฐ.
    • API ๋ฐ์ดํ„ฐ์— ์ถ”๊ฐ€
    • API ๋ฐ์ดํ„ฐ ์ˆ˜์ • ํ›„ ์ถ”๊ฐ€
    • API์˜ ๋ฐ์ดํ„ฐ ์‚ญ์ œ

 

๐Ÿ“ ์ค‘์š”ํ•œ ๋‚ด์šฉ

  • JSON.stringify: ๊ฐ์ฒด๋ฅผ JSON์œผ๋กœ ๋ณ€ํ™˜
  • JSON.parse: JSON์„ ๊ฐ์ฒด๋กœ ๋ณ€ํ™˜

'Daily > Today I Learned' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€

22.06.28_TIL  (0) 2022.06.28
22.06.27_TIL  (0) 2022.06.27
22.06.23_TIL  (0) 2022.06.23
22.06.22_Section2 ํšŒ๊ณ   (0) 2022.06.22
22.06.21_TIL  (0) 2022.06.21