JavaScript 실습 문제 - WalkingClass

 

걷기반 실습에서 받은 실습 문제인데

자바스크립트로 API 데이터를 불러와서

DOM에 추가하는 과정을 정리해봤음.

비동기 함수, 오류 처리, 데이터 정제를 다룸

 

 

 

비동기 함수 만들기

먼저 fetchComments라는 함수를 비동기로 만들어야 함.

async와 await 키워드를 활용해서 API 호출이 완료될 때까지 기다릴 수 있도록 해야 함.

이렇게 하면 데이터가 다 로드된 다음에야 그 다음 작업을 진행할 수 있음.

 

async function fetchComments() {
  try {
    const response = await fetch(apiUrl);
    const comments = await response.json();
    // 이후 코드는 여기서 작성됨
  } catch (error) {
    console.error("에러입니다 : ", error);
  }
}

여기서 await fetch(apiUrl)는 API 호출이 끝날 때까지 기다리는 역할을 하고,

response.json()도 마찬가지로 데이터 파싱이 끝날 때까지 기다림.

만약 에러가 발생하면 catch 블록에서 처리해줌.

 

 

데이터 정제하기

API에서 받아온 데이터 중에서 첫 10개의 댓글만 사용하기 위해 slice 메서드를 사용함.

let slicedData = comments.slice(0, 9);

이렇게 하면 첫 번째부터 아홉 번째까지, 총 10개의 댓글이 slicedData에 담김.

 

 

댓글 내용 자르기

댓글 내용(comment.body)이 너무 길면 보기 좋지 않으니까,

40자 이상일 때는 잘라서 ...을 붙여주는 작업이 필요함.

이때도 slice 메서드를 활용함.

 

 

let slicedBody = comment.body.length >= 40 ? comment.body.slice(0, 39) + "..." : comment.body;

 

 

DOM에 추가하기

마지막으로, 정제된 데이터를 가지고 div 요소를 만들어서 HTML에 추가해줌.

const commentsDiv = document.getElementById("comments");

slicedData.forEach((comment) => {
  const commentElement = document.createElement("div");
  commentElement.innerHTML = `
    <h2>${slicedBody}</h2>
    <p>사용자 이름: ${comment.name}</p>
    <p>이메일: ${comment.email}</p>
  `;
  commentsDiv.appendChild(commentElement);
});

 

이렇게 하면 첫 10개의 댓글이 적절히 잘린 형태로 화면에 표시됨.

 

 

 

전체 코드

이 모든 걸 합치면 최종 코드가 이렇게 나옴

const apiUrl = 'https://jsonplaceholder.typicode.com/comments';

const button = document.querySelector(".showBtn");
button.addEventListener("click", fetchComments);

async function fetchComments() {
  try {
    const response = await fetch(apiUrl);
    const comments = await response.json();

    let slicedData = comments.slice(0, 9);
    const commentsDiv = document.getElementById("comments");

    slicedData.forEach((comment) => {
      let slicedBody = comment.body.length >= 40 ? comment.body.slice(0, 39) + "..." : comment.body;

      const commentElement = document.createElement("div");
      commentElement.innerHTML = `
        <h2>${slicedBody}</h2>
        <p>사용자 이름: ${comment.name}</p>
        <p>이메일: ${comment.email}</p>
      `;
      commentsDiv.appendChild(commentElement);
    });
  } catch (error) {
    console.error("에러입니다 : ", error);
  }
}

 

이제 API 데이터를 불러와서 화면에 잘 표시할 수 있게 되었음.

오류가 발생해도 에러 메시지를 잘 처리할 수 있도록 try...catch를 활용했음 끝