๐Ÿ’ป TIL 14 | fetch

hsk10271ยท2022๋…„ 4์›” 6์ผ
0

TIL

๋ชฉ๋ก ๋ณด๊ธฐ
14/35
post-thumbnail

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

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

Fetch API

Fetch API๋ฅผ ์ด์šฉํ•˜๋ฉด Request๋‚˜ Response์™€ ๊ฐ™์€ HTTP์˜ ํŒŒ์ดํ”„๋ผ์ธ์„ ๊ตฌ์„ฑํ•˜๋Š” ์š”์†Œ๋ฅผ ์กฐ์ž‘ํ•˜๋Š” ๊ฒƒ์ด ๊ฐ€๋Šฅํ•˜๋‹ค.
๋น„๋™๊ธฐ HTTP ์š”์ฒญ์„ ์ข€ ๋” ์“ฐ๊ธฐ ํŽธํ•˜๊ฒŒ ํ•ด์ฃผ๋Š” API์ด๋ฉฐ Promise ๊ธฐ๋ฐ˜์œผ๋กœ ๋™์ž‘ํ•œ๋‹ค.

์‚ฌ์šฉํ•˜๊ธฐ

fetch('http://example.com/movies.json')
  .then(function(response) {
    return response.json();
  })
  .then(function(myJson) {
    console.log(JSON.stringify(myJson));
  });

response.json() ์ฒ˜๋Ÿผ Response ๊ฐ์ฒด๋ฅผ ์–ป์€ ๋’ค์—” ์‘๋‹ต์„ json์œผ๋กœ ๋ฐ”๊พธ๊ฑฐ๋‚˜ text๋กœ ๋ฐ”๊พธ๋Š” ๋“ฑ์˜ ์ฒ˜๋ฆฌ๋ฅผ ํ•ด์ฃผ์–ด์•ผ ํ•œ๋‹ค.

fetch์—์„œ ์œ ๋…ํ•ด์•ผํ•  ์ 

fetch๋กœ๋ถ€ํ„ฐ ๋ฐ˜ํ™˜ํ•˜๋Š” ํ”„๋กœ๋ฏธ์Šค ๊ฐ์ฒด๋Š” HTTP error ์ƒํƒœ๋ฅผ rejectํ•˜์ง€ ์•Š๋Š”๋‹ค.
- ๋”ฐ๋ผ์„œ response์˜ status code๋‚˜ ok๋ฅผ ์ฒดํฌํ•ด์ฃผ๋Š” ๊ฒƒ์ด ์ข‹๋‹ค.

fetch์—์„œ์˜ ๋‘ ๋ฒˆ์งธ ํŒŒ๋ผ๋ฏธํ„ฐ ์ ์šฉ

const headers = new Headers()

headers.append('x-auth-token', 'TOKEN');

fetch('http://example.com/movies.json',{
  method: 'POST',
  headers,
  body: JSON.stringify(movie)
})

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

fetch api๋ฅผ ์ด์šฉํ•ด์„œ ์žฅ๋ฐ”๊ตฌ๋‹ˆ๋ฅผ ๋งŒ๋“ค์–ด๋ณด์•˜๋‹ค. ๊ตฌ์กฐ๋ฅผ ์ปดํฌ๋„ŒํŠธ ๋‹จ์œ„๋กœ ๋‚˜๋ˆ„๊ณ  ๋”๋ฏธ๋ฐ์ดํ„ฐ๋กœ ๊ธฐ๋ณธ ๋ฐ์ดํ„ฐ๋ฅผ ์„ค์ •ํ•ด๋†“์œผ๋ฉด์„œ ๊ตฌ์„ฑํ•ด ๋‚˜์•„๊ฐ”๋‹ค.๐Ÿ‘๐Ÿป
์ด๋ฒˆ์—๋„ ์—ญ์‹œ state, setState, render๋“ฑ์˜ ํ•จ์ˆ˜๋ฅผ ๊ธฐ๋ณธ์ ์œผ๋กœ ์‚ฌ์šฉํ•˜์˜€๊ณ  ๊ณ„์† ๊พธ์ค€ํžˆ ๋ˆˆ์— ์ตํžˆ๊ณ  ์†์œผ๋กœ ์ž‘์„ฑํ•˜๋‹ค ๋ณด๋‹ˆ ์ต์ˆ™ํ•ด์ง„ ๋Š๋‚Œ์ด๋‹ค.(๊ณผ์ œ๋ฅผ ์‹œ์ž‘ํ•˜๋ฉด ๋‹ค๋ฅด๊ฒ ์ง€๋งŒ..)
DOM์„ ์„ ํƒ, ํƒ์ƒ‰, ์กฐ์ž‘ํ•˜๋Š” ๋ฐฉ๋ฒ•๋„ ๋ชฐ๋ž๊ธฐ ๋•Œ๋ฌธ์— ํ•˜๋ฃจํ•˜๋ฃจ ์—ด์‹ฌํžˆ ์‚ด๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค..

๋”ฅ ๋‹ค์ด๋ธŒ ๋„์„œ ์Šคํ„ฐ๋”” ๊ทœ์น™์„ ๋‹ค์‹œ ์žฌ์ •๋ฆฝํ•˜์˜€๊ณ  12์žฅ ํ•จ์ˆ˜, 13์žฅ ์Šค์ฝ”ํ”„, 14์žฅ ์ „์—ญ ๋ณ€์ˆ˜์— ๋Œ€ํ•ด์„œ ํ† ๋ก , ์ •๋ฆฌ ๋“ฑ์„ ํ•˜์˜€๊ณ  ํ™•์‹คํžˆ ์Šคํ„ฐ๋””๋ฅผ ํ•˜๋‹ˆ๊นŒ ์ฝ์—ˆ๋˜ ๊ฐœ๋…๋“ค์ด ๋‹ค์‹œ ๋จธ๋ฆฌ์†์—์„œ ์ •๋ฆฌ๋˜๋Š” ๋Š๋‚Œ์ด๋ผ ์ข‹์•˜๋‹ค.๐Ÿค—
์Šคํ„ฐ๋””๋ฅผ ํ•œ๋ฒˆ ํ–ˆ๋‹ค๊ณ  ๊ทธ ๊ฐœ๋…์ด ๋‚ด ๊ฒƒ์ด ๋œ๊ฑด ์•„๋‹ˆ๋ผ๊ณ  ์ƒ๊ฐํ•œ๋‹ค. ์—ฌ๋Ÿฌ๋ฒˆ ๋‹ค์‹œ ๋ฐ˜๋ณตํ•˜๋ฉด์„œ ์ฒดํ™”ํ•  ์ˆ˜ ์žˆ๋„๋ก ํ•ด์•ผ๊ฒ ๋‹ค.

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

๊ณผ์ œ ์–ธ์ œํ•˜์ฃ ..?๐Ÿ˜ญ

Refer

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

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

๋ฐ๋ธŒ์ฝ”์Šค Day13 fetch

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

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