2021년 3월 16일 (

Ji Taek Lim·2021년 3월 16일

Everything You Ever Wanted to Know About Authentication

https://www.youtube.com/watch?v=j8Yxff6L_po

Node.js With Passport Authentication | Full Project

https://www.youtube.com/watch?v=6FOq4cUdH8k

fetch

https://www.youtube.com/watch?v=tc8DU14qX6I

Using Fetch MDN

https://developer.mozilla.org/ko/docs/Web/API/Fetch_API/Using_Fetch

https://www.youtube.com/watch?v=drK6mdA9d_M

fetch() 함수 사용법

https://yeri-kim.github.io/posts/fetch/

fetch를 써서 json 파일을 한데로 묶어 주는 함수를 만든다.

node에서는 안되므로 개발자콘솔에서 확인한다.

01_basicChaining

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

function getNewsAndWeather() {
  const obj = {};
  return fetch(newsURL)
    .then((res) => {
      return res.json();
    })
    .then((res) => {
      obj.news = res.data;
      console.log(obj);
      return fetch(weatherURL);
    })
    .then((res) => {
      return res.json();
    })
    .then((res) => {
      obj.weather = res;
      return obj;
    });
}

Refactoring

function getNewsAndWeather() {
  return fetch(newsURL)
    .then((res) => res.json())
    .then((json1) => {
      return fetch(weatherURL)
        .then((res) => res.json())
        .then((json2) => {
          return {
            news: json1.data,
            weather: json2,
          };
        });
    });
}

02_promiseAll

코드를 객체를 하나씩 하나씩 만들어서

나중에 promiseAll에 한번에 넣어주게 된다.

promiseAll MDN

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all

function getNewsAndWeatherAll() {
  const obj = {};
  const news = fetch(newsURL).then((res) => {
    return res.json();
  });

  const weather = fetch(weatherURL).then((res) => {
    return res.json();
  });

  return Promise.all([news, weather]) // promise를 반환
    .then((res) => {
      // console.log(data) = [ news의 반환값, weather의 반환값 ]
      obj.news = res[0].data;
      obj.weather = res[1];
      return obj;
    });
}

Refactoring

function getNewsAndWeatherAll() {
  return Promise.all([fetch(newsURL), fetch(weatherURL)])
    .then(([newsResponse, weatherResponse]) => {
      return Promise.all([newsResponse.json(), weatherResponse.json()]);
    })
    .then(([json1, json2]) => {
      return {
        news: json1.data,
        weather: json2,
      };
    });
}

2번째꺼는 처음부터 프로미스 올을 썼지만

읽기 편하게 하기 위해서는 위에것이 더욱 낳은 것같다.

한번 더 refactoring을 하자면

function getNewsAndWeatherAll() {
  const json1 = fetch(newsURL).then((res) => {
    return res.json();
  });

  const json2 = fetch(weatherURL).then((res) => {
    return res.json();
  });

  return Promise.all([json1, json2]) // promise를 반환
    .then((res) => {
      return {
        news: res[0].data,
        weather: res[1],
      };
    });
}

이렇게 하는게 낳지 않을가 싶다.

03_asyncAwait

async function getNewsAndWeatherAsync() {
  // TODO: async/await 키워드를 이용해 작성합니다
  const obj = {};

  await fetch(newsURL)
    .then((res) => {
      return res.json();
    })
    .then((res) => {
      obj.news = res.data;
    });

  await fetch(weatherURL)
    .then((res) => {
      return res.json();
    })
    .then((res) => {
      obj.weather = res;
    });

  return obj;
}

Refactoring

async function getNewsAndWeatherAsync() {
  // TODO: async/await 키워드를 이용해 작성합니다

  const json1 = await fetch(newsURL).then((res) => res.json());
  const json2 = await fetch(weatherURL).then((res) => res.json());

  return {
    news: json1.data,
    weather: json2,
  };
}