[TIL] 엘리스 SW 엔지니어 트랙 Day 019

📖 오늘 배운 내용 - 2021.11.18

• fetch
• async / awiat
• JSON.parse
• JSON.stringify()

 

📝 fetch

• 통신해서 받으면 promise로 반환해준다. 그래서 then/catch을 사용해줘야 된다.
• 데이터를 가져올 때는 get
• 데이터를 추가할 때는 post

[자바스크립트] 날씨 정보 가져오기, Geolocation API

Using Fetch - Web API | MDN

📝 JSON

• JSON.parse : 전달받은 문자열을 자바스크립트 객체로 변환하여 반환
• JSON.stringify() : 전달받은 자바스크립트 객체를 문자열로 변환하여 반환

JSON.stringify({title:_title, body:_body})

[자바스크립트] JSON.stringify(value), JSON.parse()

 

📝 API에서 받아온 정보로 새로운 객체 생성

• 객체 생성해주는 함수를 따로 빼서 만들어주기

import API from "./api";

function transformUser(user) {
    const email = user.email;
    const name = `${user.name.first} ${user.name.last}`;
    const pictureUrl = user.picture.large;
    const username = user.login.username;
    const location = `${user.location.country}, ${user.location.state}, ${user.location.city}`;
    const age = user.dob.age; 

    return {email, name, pictureUrl, username, location, age}
}

const requestUsers = () => {
  return API.fetchUsers().then((users) => {
    return users.map(user => transformUser(user)).filter(el => el.age >= 40)
  });
};

export default requestUsers;

 

📝 async / awiat

• 자바스크립트의 비동기적인 작업을 동기적으로 수행하기 위해서 async, await을 사용
• async를 함수와 같이 사용하면 결과를 직접 반환하는 게 아니라 Promise를 반환한다.
• await은 awiat 안에서만 사용할 수 있다.

함수 앞에 async를 사용하면 Promise 객체를 반환 await을 사용하면 Promise를 결괏값이 바로 들어간다. 쉽게 생각하면 then() 기능이다.

 

📕 fetch 사용 예제

fetch('coffee.jpg')
.then(response => response.blob())
.then(myBlob => {
  let objectURL = URL.createObjectURL(myBlob);
  let image = document.createElement('img');
  image.src = objectURL;
  document.body.appendChild(image);
})
.catch(e => {
  console.log('There has been a problem with your fetch operation: ' + e.message);
});

 

📕 async / awiat 사용 예제

async function myFetch() {
  let response = await fetch('coffee.jpg');
  let myBlob = await response.blob();

  let objectURL = URL.createObjectURL(myBlob);
  let image = document.createElement('img');
  image.src = objectURL;
  document.body.appendChild(image);
}

myFetch()
.catch(e => {
  console.log('There has been a problem with your fetch operation: ' + e.message);
});

 

💡 오늘 깨달은 것

• 서버와 통신해서 받아온 데이터를 처리해주는 일만큼 짜릿한 일은 없다..!!
• 처음 공부할 때는 동기, 비동기라는 단어랑 동작 방법이 이해가 잘 안 돼서 머릿속에 정리가 안 된 상태였는데, 오늘 수업 듣고 나니 머릿속이 깔끔하게 정리되었다.

 

📌 참고

• WEB2 - HTTP
• JavaScript ajax · egoingsb/offline Wiki
• 기계들의 대화법 - REST API
• async와 await를 사용하여 비동기 프로그래밍을 쉽게 만들기 - Web 개발 학습하기 | MDN
• 자바스크립트 async와 await