[Node.js] fetch API / SPRINT-๋น„๋™๊ธฐ๐Ÿ’ฏ๏ธ

delilahยท2020๋…„ 12์›” 17์ผ
1

Node.js

๋ชฉ๋ก ๋ณด๊ธฐ
6/27

goal

  • fetch๋ฅผ ์ด์šฉํ•ด ์›น์—์„œ ์ •๋ณด ๊ฐ€์ ธ์˜ค๊ธฐ

fetch ๐Ÿ’ฏ๏ธ

  • ์›น ๊ฐœ๋ฐœ์„ ํ•  ๋•Œ, ajaxํ†ต์‹ ์„ ์ž์ฃผ ์‚ฌ์šฉํ•˜๊ฒŒ ๋œ๋‹ค. ajax ๋ฅผ ์‚ฌ์šฉํ•  ๋•Œ, XHR, JQuery, Fetch ๋ฅผ ์“ธ ์ˆ˜ ์žˆ๋Š”๋ฐ, ๊ทธ ์ค‘ ๊ฐ€์žฅ ๋ฒ ์ŠคํŠธ์ธ fetch์— ๋Œ€ํ•ด์„œ ์•Œ์•„๋ณธ๋‹ค.

  • fetch๋ž€? : ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„œ => ์„œ๋ฒ„๋กœ ๋„คํŠธ์›Œํฌ ์š”์ฒญ(request)์„ ๋ณด๋‚ด๊ณ  ์‘๋‹ต(response)์„ ๋ฐ›์„ ์ˆ˜ ์žˆ๋„๋ก ํ•ด์ฃผ๋Š” ๋ฉ”์„œ๋“œ

  • XMLHttpRequest์™€ ๋น„์Šทํ•˜์ง€๋งŒ fetch๋Š” Promise ๊ธฐ๋ฐ˜์œผ๋กœ ๊ตฌ์„ฑ๋˜์–ด ์žˆ์–ด์„œ ๋” ๊ฐ„ํŽธํ•˜๊ฒŒ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค.

  • ๋น„๋™๊ธฐ ์š”์ฒญ์˜ ๊ฐ€์žฅ ๋Œ€ํ‘œ์ ์ธ ์‚ฌ๋ก€๋ฅผ ๊ผฝ์œผ๋ผ๊ณ  ํ•œ๋‹ค๋ฉด, ๋‹จ์—ฐ ๋„คํŠธ์›Œํฌ ์š”์ฒญ์„ ๋“ค ์ˆ˜ ์žˆ๋‹ค. ๋‹ค์–‘ํ•œ ๋„คํŠธ์›Œํฌ ์š”์ฒญ ์ค‘, URL๋กœ ์š”์ฒญํ•˜๋Š” ๊ฒฝ์šฐ๊ฐ€ ๊ฐ€์žฅ ํ”ํ•˜๋‹ค. ์ด๋ฅผ ๊ฐ€๋Šฅํ•˜๊ฒŒ ํ•ด์ฃผ๋Š” API๊ฐ€ ๋ฐ”๋กœ fetch API์ด๋‹ค!

  • ์œ„ ํ™”๋ฉด์—์„œ ๊ณ„์† ์ „์ฒด ํ™”๋ฉด์„ ์ƒˆ๋กœ ๋ถˆ๋Ÿฌ ์˜ค๋Š” ๊ฒƒ ๋ณด๋‹ค ์‹ค์‹œ๊ฐ„ ๋‰ด์Šค๋‚˜, ์ •ํ•ด์ง„ ์‹œ๊ฐ„์— ๋”ฐ๋ผ ๋ณ€๊ฒฝ๋˜๋Š” ๊ด‘๊ณ , ํฌ์ŠคํŒ… ๋“ฑ ์›ํ•˜๋Š” ์ •๋ณด๋งŒ ์—…๋ฐ์ดํŠธ ํ•˜๊ธฐ ์œ„ํ•ด์„œ, fetch API ๋ฅผ ์ด์šฉํ•˜์—ฌ ์›ํ•˜๋Š” ์ •๋ณด๋ฅผ ์›๊ฒฉ URL๋กœ๋ถ€ํ„ฐ ๋ถˆ๋Ÿฌ์˜จ๋‹ค.

  • fetch API๋Š” ํŠน์ • URL๋กœ๋ถ€ํ„ฐ ์ •๋ณด๋ฅผ ๋ฐ›์•„์˜ค๋Š” ์—ญํ• ์„ ์ˆ˜ํ–‰ํ•œ๋‹ค.

  • ์ด ๊ณผ์ •์€ ๋น„๋™๊ธฐ๋กœ ์ด๋ฃจ์–ด์ง„๋‹ค.

fetch API ์‚ฌ์šฉ๋ฒ•

  • fetch (url, [options])

    • url : ์ ‘๊ทผํ•˜๊ณ ์ž ํ•˜๋Š” URL
    • options : ์„ ํƒ์ ์ธ ๋งค๊ฐœ๋ณ€์ˆ˜๋กœ, method๋‚˜ header ๋“ฑ์„ ์ง€์ •ํ•  ์ˆ˜ ์žˆ์Œ
      • options์— ์•„๋ฌด๊ฒƒ๋„ ๋„˜๊ธฐ์ง€ ์•Š์œผ๋ฉด, ์š”์ฒญ์€ ์–ธ์ œ๋‚˜ GET method ๋กœ ์ง„ํ–‰๋˜์–ด, url๋กœ๋ถ€ํ„ฐ ์ปจํ…Œ์ธ ๊ฐ€ ๋‹ค์šด๋กœ๋“œ ๋œ๋‹ค.
      • fetch()๋ฅผ ํ˜ธ์ถœํ•˜๋ฉด ๋ธŒ๋ผ์šฐ์ €๋Š” ๋„คํŠธ์›Œํฌ ์š”์ฒญ์„ ๋ณด๋‚ด๊ณ  ํ”„๋ผ๋ฏธ์Šค๊ฐ€ ๋ฐ˜ํ™˜๋œ๋‹ค.
      • ๋ฐ˜ํ™˜๋˜๋Š” ํ”„๋ผ๋ฏธ์Šค๋Š” fetch()๋ฅผ ํ˜ธ์ถœํ•˜๋Š” ์ฝ”๋“œ์—์„œ ์‚ฌ์šฉ๋œ๋‹ค.
  • ์š”์ฒญํ—ค๋”, ์‘๋‹ตํ—ค๋”, POST์š”์ฒญ์— ๋Œ€ํ•œ ์ž์„ธํ•œ ์„ค๋ช…์€ ๐Ÿ‘‰๏ธ ์—ฌ๊ธฐ๋ฅผ ์ฐธ๊ณ 

  • fetch ๋งค์„œ๋“œ๋Š” JavaScript์—์„œ ์„œ๋ฒ„๋กœ ๋„คํŠธ์›Œํฌ ์š”์ฒญ์„ ๋ณด๋‚ด๊ณ  ์‘๋‹ต์„ ๋ฐ›์„ ์ˆ˜ ์žˆ๋„๋ก ํ•ด์ฃผ๋Š” ๋งค์„œ๋“œ

  • fetch์˜ ๋‘ ๋ฒˆ์งธ ํŒŒ๋ผ๋ฏธํ„ฐ๋กœ ์š”์ฒญ์— ๋Œ€ํ•œ ์ถ”๊ฐ€์ ์ธ ๋ฐ์ดํ„ฐ๋ฅผ ์ž…๋ ฅํ•  ์ˆ˜ ์žˆ๋‹ค.( fetch์˜ ํŒŒ๋ผ๋ฏธํ„ฐ๋“ค์€ ๐Ÿ‘‰๏ธ ์—ฌ๊ธฐ๋ฅผ ์ฐธ๊ณ  )

  • fetch API๋Š” ๊ธฐ๋ณธ์ ์œผ๋กœ Promise์˜ ํ˜•์‹์œผ๋กœ ์ด๋ฃจ์–ด์ ธ ์žˆ๋‹ค.

  • fetch๋กœ๋Š” ์›ํ•˜๋Š” ๋ฐ์ดํ„ฐ๋ฅผ ๋ฐ”๋กœ ์‚ฌ์šฉํ•  ์ˆ˜ ์—†๋‹ค.

  • ์˜ฌ๋ฐ”๋ฅธ url๋กœ ์š”์ฒญ์„ ๋ณด๋‚ด์•ผ ํ•˜๊ณ , then์œผ๋กœ ๋ถˆ๋Ÿฌ์˜ค๋Š” ์‘๋‹ต์— ๋Œ€ํ•ด ์ž์ฒด ๋‚ด์žฅ ๋ฉ”์†Œ๋“œ์ธ json()์„ ์ ์šฉํ•ด์•ผ ํ•œ๋‹ค.

  • json()์€ Response ์ŠคํŠธ๋ฆผ (์ŠคํŠธ๋ฆผ์— ๋Œ€ํ•œ ์งง๋ง‰ํ•œ ์„ค๋ช…์€ ๐Ÿ‘‰๏ธ ์—ฌ๊ธฐ๋ฅผ ์ฐธ๊ณ )์„ ๊ฐ€์ ธ์™€์„œ ์ŠคํŠธ๋ฆผ์ด ์™„๋ฃŒ๋  ๋•Œ๊นŒ์ง€ ์ฝ์€ ํ›„, ๋‹ค ์ฝ์€ body์˜ ํ…์ŠคํŠธ๋ฅผ Promiseํ˜•ํƒœ๋กœ ๋ฐ˜ํ™˜ํ•œ๋‹ค.

  • fetch ๋กœ ์ธํ•ด ๋ฐ˜ํ™˜๋˜๋Š” ๊ฐ’์€ ๋ฐ์ดํ„ฐ๊ฐ€ ์•„๋‹Œ, Promis๋กœ ๊ฐ์‹ธ์ ธ ์žˆ๋Š” Response ๊ฐ์ฒด. ๊ทธ๋ฆฌ๊ณ  ์ด Reponse ๊ฐ์ฒด๋Š” json ์ด๋ผ๋Š” ๋ฉ”์†Œ๋“œ๋ฅผ ๊ฐ€์ง€๊ณ  ์žˆ๋Š”๋ฐ, ์ด ๋ฉ”์†Œ๋“œ๋ฅผ ์‹คํ–‰ ์‹œ์ผœ์•ผ ๋น„๋กœ์„œ ์šฐ๋ฆฌ๊ฐ€ ์›ํ•˜๋Š” ๋ฐ์ดํ„ฐ๊ฐ€ Promise ์— ๊ฐ์‹ธ์ ธ์„œ ๋‚˜์˜ค๊ฒŒ ๋œ๋‹ค.

  • ์ž‘๋™ ์ˆœ์„œ
    fetch ์š”์ฒญ๐Ÿ‘‰๏ธ
    Promise<Response> ๊ฐ€ ๋ฐ˜ํ™˜ ๋จ๐Ÿ‘‰๏ธ
    Response ๋ฅผ ๊บผ๋ƒ„ (Promise ํŒจํ„ด ํ˜น์€ async await ํŒจํ„ด)๐Ÿ‘‰๏ธ
    Response ์˜ json ๋ฉ”์†Œ๋“œ๋ฅผ ์‹คํ–‰๐Ÿ‘‰๏ธ
    Promise<data> ๊ฐ€ ๋ฐ˜ํ™˜ ๋จ๐Ÿ‘‰๏ธ
    data๋ฅผ ๊บผ๋ƒ„

fetch VS axios ๋น„๊ต


SPRINT-๋น„๋™๊ธฐ ๐Ÿ’ฏ๏ธ

fetch / Promise์™€ then์„ ์ด์šฉ

var newsURL = 'http://localhost:5000/data/latestNews';
var weatherURL = 'http://localhost:5000/data/weather';

function getNewsAndWeather() {
  
  return fetch(newsURL)		 // ์˜ฌ๋ฐ”๋ฅธ url์š”์ฒญ์„ ๋ณด๋‚ธ๋‹ค
  .then(res => res.json()) 
  	// ๋ฐ”๋กœ ๋’ค์— ์˜ค๋Š” ์‘๋‹ต์— ๋Œ€ํ•ด json()์„ ํ•ด์ค€๋‹ค 
 	// (axios๋Š” ์ด๊ณผ์ •์„ ์ž๋™์œผ๋กœ ํ•ด์ค€๋‹ค)
	// ์ž์ฒด์ ์œผ๋กœ json()๋ฉ”์†Œ๋“œ๊ฐ€, ์‘๋‹ต(res)์„ JSONํ˜•ํƒœ๋กœ ๋ณ€ํ™˜์‹œํ‚จ ๋’ค, ๋‹ค์Œ Promise๋กœ ์ „๋‹ฌํ•œ๋‹ค
  .then((result1) => {	 	// result1์€ newsURL์—์„œ ๋ฐ›์€ ๊ฒฐ๊ณผ
    return fetch(weatherURL) 
    .then(res => res.json()) 
    .then((result2) => {  
      
      	 //! ์‹คํŒจํ•œ ๋ฐฉ๋ฒ•
     	 // let obj = {}
     	 // obj.news = result1;
     	 // obj.weather = result2;
     	 // return obj
      
   //! ์‹คํŒจํ•œ ๋ฐฉ๋ฒ•
   // return `{news: ${result1.data}, weather: ${result2}}`
      return {news: result1.data, weather: result2}
    })
  })
  .catch((err) => console.log(err)) 	// ์—๋Ÿฌ๋ฉ”์‹œ์ง€๋ฅผ ํ™•์ธํ•  ์ˆ˜ ์žˆ์Œ
  
}

fetch / Promise.all์„ ์ด์šฉ

function getNewsAndWeatherAll() {

  //! ์‹คํŒจํ•œ ๋น™๋ฒ•
  //! return Promise.all([newsURL, weatherURL])
  //! .then(([contents1, contents2]) => {
  //!   return {news: contents1.data, weather: contents2}
  //! })

  //! ์ •๋‹ต 1
  let news = fetch(newsURL).then(res => res.json())	// json์œผ๋กœ ๋ฐ”๋กœ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š” ํ˜•ํƒœ๋กœ ๋งŒ๋“ค์–ด์„œ
  let weather = fetch(weatherURL).then(res => res.json()) 
  return Promise.all([news, weather]) 			// promise๋กœ ๊ฐ์‹ธ์ง„ ๋ฐ์ดํ„ฐ๋ฅผ all๋กœ ํ•œ๋ฒˆ์— ๊ฐ€์ ธ์˜ค๊ธฐ
  .then(([n, w]) => { 					// ์ธ์ž๊ฐ€ ๋‘๊ฐœ์ด๋ฏ€๋กœ, ๋‘๊ฐœ์˜ ์ธ์ž๋ฅผ ๋„˜๊ธฐ๊ณ 
    return {news: n.data, weather: w}			// ์›ํ•˜๋Š” ํ˜•์‹์œผ๋กœ ์ถœ๋ ฅ
  })

  // or

  //! ์ •๋‹ต 2
   return Promise.all([fetch(newsURL), fetch(weatherURL)])	// fetch๋กœ ๊ฐ url์„ ๋ฐฐ์—ด์— ๋‹ด์•„ ๊ฐ€์ ธ์™€์„œ
   .then(([news, weather]) => { 				// ๋ฐฐ์—ด๋กœ ๋‹ด๊ธด ์ธ์ž๋ฅผ ๋„˜๊ธฐ๊ณ 
     return Promise.all([news.json(), weather.json()]) 		// json์„ ํ•ด์ฃผ๋Š”๋ฐ, ์ด๋•Œ Promise๋กœ ๊ฐ์‹ธ์ฃผ์–ด์•ผ
   })
   .then(([n,w]) => { 						// ๊ฐ์‹ธ์ค€ ๋ฐ์ดํ„ฐ๋ฅผ all๋กœ ๋‘๊ฐœ๋ฅผ ๋„˜๊ฒผ์œผ๋ฏ€๋กœ, ๋‘๊ฐœ์˜ ์ธ์ž๋ฅผ ๋ฐฐ์—ด๋กœ ๋ฌถ์–ด์„œ
     return {news: n.data, weather: w} 				// ์›ํ•˜๋Š” ํ˜•์‹์œผ๋กœ ์ถœ๋ ฅ
   })

}

fetch / async, await์„ ์ด์šฉ

// async function ์„ ์–ธ์€ AsyncFunction๊ฐ์ฒด๋ฅผ ๋ฐ˜ํ™˜ํ•˜๋Š” ํ•˜๋‚˜์˜ ๋น„๋™๊ธฐ ํ•จ์ˆ˜๋ฅผ ์ •์˜ํ•œ๋‹ค.
async function getNewsAndWeatherAsync() {
  let news = await fetch(newsURL).then(res => res.json())
  let weather = await fetch(weatherURL).then(res => res.json())
  return {news: news.data, weather: weather}
}

์ถœ์ฒ˜ : https://hoorooroob.tistory.com/๐Ÿ’š๏ธ
์ถœ์ฒ˜ : https://ko.javascript.info/fetch๐Ÿ’š๏ธ

profile
delilah's journey

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