[JavaScript] Fetch API 사용해보기 (JSONplaceholder)

Fetch API를 이용해서 데이터를 받아오는 연습!

JSONPlaceholder

예시로 jsonplaceholder 에서 데이터를 받아오려 한다.
서버가 없을 때 가상의 데이터를 가져오기에 유용한 사이트다.

https://jsonplaceholder.typicode.com/

사용할 수 있는 데이터 소스들은 아래와 같다. 이 중에서 users를 이용해보려 한다.

사용 가능한 HTTP 메서드들은 다음과 같다. REST API를 연습해볼 때도 유용하게 사용할 수 있을 것 같다.

 

 

 

Fetch API로 데이터 받아오기

Fetch API

Fetch API는 XMLHttpRequest 객체에서 좀 더 보완된 API로, 모던 브라우저라면 대부분 내장되어있다.

비동기 통신에 많이 사용되던 ajax를 대체하여 페이지의 새로고침 없이 서버에서 데이터를 가져올 수 있는 API다.
첫번째 인자로 url을 받고, 필수가 아닌 두번째 인자로 초기화에 사용되는 객체를 받는다.

 

위의 JSONplaceholder url을 아래와 같은 형태로 사용할 수 있다.

Fetch는 프로미스 객체를 반환한다. 이 객체는 response인데, 요청이 성공하든 실패하든 반환된다.
그래서 response 객체가 성공적으로 반환되었을 때만 json 데이터로 바꾸어 반환하도록 했다.

const fetchInfo = function () {
  return fetch('https://jsonplaceholder.typicode.com/users').then(
    (response) => {
      if (response.ok) {
        return response.json();
      } else {
        return console.error('response error');
      }
    }
  );
};

 

 

가져온 데이터를 HTML 태그에 넣는 과정이다.
userInfos는 객체이기 때문에 for..of 문을 이용하여 각각의 정보를 li 태그에 담아 이미 정의되어 있는 ul 태그로 넣어줬다.

const repoInfos = function (userInfos) {
  for (user of userInfos) {
    let li = document.createElement('li');
    li.classList.add('user-item');
    let info = `name: ${user.name}\n email: ${user.email}\n phone: ${user.phone}`;
    li.innerText = info;
    userList.prepend(li);
  }
};

 

 

정상적으로 동작한다면 아래와 같은 결과를 볼 수 있다.
CSS를 가볍게 만져줬다. Grid를 이용해 2단으로 정렬했다.

 

 

응용

json 데이터 중 이름을 select 태그에 동적으로 추가해서 선택한 이름에 대한 정보를 배경색을 바꾸도록 해봤다.
제이쿼리로 써봤다가 자바스크립트로 하려니 쉽지 않았다!.. 이 부분에 대해서는 따로 포스팅 할 예정.

select 태그에 option 태그를 동적으로 추가할 때 위 코드를 응용하여 아래와 같이 작성했다.

const loadInfos = function (userInfo) {
  for (user of userInfo) {
    let option = document.createElement('option');
    let name = user.name;
    option.setAttribute('value', name);
    option.innerText = name;
    nameList.prepend(option);
  }
};