API 연동 기초

연습용으로 누구나 쓸 수 있는 공개 테스트 API를 사용합니다.

fetch("https://jsonplaceholder.typicode.com/users")
  .then((response) => response.json())
  .then((data) => {
    console.log(data);
  });

페이지를 열고 콘솔(F12)을 보면 사용자 목록 데이터가 출력됩니다.

console.log 대신, 받은 데이터를 화면에 그려봅니다.

fetch("https://jsonplaceholder.typicode.com/users")
  .then((res) => res.json())
  .then((users) => {
    const list = document.getElementById("userList");
    users.forEach((user) => {
      const li = document.createElement("li");
      li.textContent = user.name;
      list.appendChild(li);
    });
  });