[인프런x코드캠프] 훈훈한 Javascript_14日

오늘은 아주 간단하게 비동기, 동기에 대해서 학습하고 api를 통해서 나의 위치, 날씨를 받아오는 기능을 구현했다.

 

비동기 동기에 대해서는 아래 영상을 보면 쉽게 이해할 수 있다.

간단하게 말해서

동기는 순차적으로 1번이 끝나고 2번을 실행하고, 2번이 끝난 후 3번을 실행하는 방식이다.

비동기는 1번이 끝나지 않아도 2번을 실행하고, 1 또는 2번이 끝나지 않아도 3번을 실행하는 방식이다.

 

js에서는 fetch, then, catch를 사용해서 비동기적 프로그래밍을 할 수 있다.

먼저 fetch를 통해서 api통신을 한다.

 

const weatherSearch = function (position) {
  fetch(
    `https://api.openweathermap.org/data/2.5/weather?lat=${position.latitude}&lon=${position.longitude}&appid={apiKey}`
  )
};

api 통신을 해서 응답메세지를 받아오고 난 후에! 

then을 실행한다.

then을 사용하지않으면 응답메세지를 받아오지 못한 상태에서 프로그램을 실행한다.

따라서 api통신의 응답값을 사용하고자 한다면 then을 사용하여 응답이 온 후에 사용할 수 있다.

 

const weatherSearch = function (position) {
  fetch(
    `https://api.openweathermap.org/data/2.5/weather?lat=${position.latitude}&lon=${position.longitude}&appid=24cee7ef262b90e3f8635c5c561a20d8`
  )
    .then((res) => {
      return res.json();
    })
    .then((json) => {
      console.log(json.name, json.weather[0].description);
    })
    .catch((err) => {
      console.log(err);
    });
};

catch는 fetch 블록에서 오류가 나면 실행하는 부분이다.

 

이렇게 해서 나의 위치와 날씨 정보를 받아왔다.

 

이제 강의도 거의 다 끝나간다. 빠르면 이번주? 아니면 다음주에 끝날 듯 하다~

[인프런x코드캠프] 훈훈한 Javascript - 인프런 | 강의

얼른 집에가서 둠레행성주황박사를 꾸며서 민지랑 배타야지~