[TIL] 프론트엔드 연결 fetch

▶️ undefined 에러

// 수정 전 코드
document.addEventListener('DOMContentLoaded', () => {
  loadPosts();
});

let currentPage = 1;
let totalPosts = 0;

fetch(`./api/posts/list`, {
  method: 'GET',
  headers: {
    'Content-Type': 'application/json',
  },
})
  .then((response) => response.json())
  .then((data) => {
    totalPosts = data.responseData.bodies;
    loadPosts(currentPage, totalPosts);
});

// 수정 후 코드
document.addEventListener('DOMContentLoaded', () => {
  countPosts();
});

const countPosts = async () => {
  let currentPage = 1;
  let totalPosts = 0;

  const response = await fetch(`./api/posts/list`, {
    method: 'GET',
    headers: {
      'Content-Type': 'application/json',
    },
  });

  const data = await response.json();
  if (data.responseData.code) {
    alert(code[data.responseData.code]);
  }

  totalPosts = data.responseData.bodies;
  if (totalPosts > 100) {
    totalPosts = 100;
  }

  loadPosts(currentPage, totalPosts);
};

• 수정 전 코드에서는 브라우저에서 GET 요청으로 바로 게시글을 가지고 오는 함수가 바로 실행되고 이 함수를 실행하기 위해 필요한 page 값과 totalPosts를 넘겨주는 함수의 실행이 먼저 끝나지 않아 undefined 오류가 떴다.
• countPosts 함수가 많은 데이터를 가지고 오는게 아니었기 때문에 undefined가 뜨는 것도 늦게 알게 되었다. 다행히 다른 팀원분이 발견해주셔서 이 함수에도 async await 처리를 하고 해당 페이지가 로드될때 가장 먼저 이 함수가 실행되도록 수정해주었다.