NBC - JS 개인프로젝트 : api로 받아온 데이터 화면에 뿌리기 (promise.all, aysnc, await)

 

 

이번 개인 프로젝트 과제에서는 영화 정보를 api로 받아와서 메인 화면에 리스트를 뿌려주는 기능이 주요 기능 중 하나이다.

가이드 라인에 있는 예시 코드에는 api로 받아올 주소를 보니 한 페이지 즉 총 20개의 영화만을 가지고 오는 URL로 되어있었다.

const URL = `https://api.themoviedb.org/3/movie/popular?api_key=${API_KEY}&language=en-US&page=1`;

 

맨 마지막을 보면  "page=1"이 있다. TMDB에 인기영화 top20개 (1페이지) 만을 보여주는 주소이다. 문득 저 숫자를 반복문을 돌며 받아오면 10페이지(200개)의 영화도 리스트로 뽑아 올 수 있지 않을까? 라는 생각이 들었고.. 바로 해보기로 했다.

 

 

일단 기본 api를 받아오는 구성부터 바꿨다.

먼저 API_KEY, baseUrl, pages를 변수로 빼줘서 언제든지 나중에 수정하기 쉽게 해두었다.

const API_KEY = "###";
const baseUrl = "https://api.themoviedb.org/3/movie/popular";
const pages = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; // 요청할 페이지 번호

 

 

 

1. 단일 페이지 데이터 요청 (await)

단일 페이지의 데이터를 요청하고 처리하는 로직을 짰다.

async function fetchMovies(page) {
  const url = `${baseUrl}?api_key=${API_KEY}&language=en&page=${page}`;
  const response = await fetch(url); // url로 fetch 요청(get)
  const data = await response.json(); // json형태로 데이터 가져옴
  return data.results; // 영화 데이터만 반환
}

 

fetch를 통해 url로 get 요청을 보낸다.

fetch에 대해 조금 더 찾아봤는데 기본적으로 get 요청에만 이렇게 간단하게 url만 있으면 사용이 가능하다고 한다.

 

await는 비동기 작업을 처리할 때 사용하는 키워드인데, async 함수 내에서만 사용이 가능하다.

그리고 나중에 Promise가 이행될때 까지 기다힌다. 마지막에 동기적인 코드처럼 처리가 된다.(promise를 기다리는 코드라고 할 수 있을 것 같다)

 

 

참고로 post 같은 경우 이런식으로 method, headers, body와 같은 옵션들이 필수로 필요해진다.

const response = await fetch(url, {
  method: 'POST', // 요청 메소드
  headers: {
    'Content-Type': 'application/json' // 요청 헤더
  },
  body: JSON.stringify({ key: 'value' }) // 요청 본문
});
const data = await response.json();

 

 

 

2. map으로 단일페이지 반복문 (+Promise.all)

async function fetchAllMovies(pages) {
  const promises = pages.map((page) => fetchMovies(page)); // 각 페이지 번호에 대해 fetchMovies 호출
  const results = await Promise.all(promises); // 모든 페이지의 데이터를 병렬로 요청
  console.log(results);
  console.log(results.flat());
  return results.flat(); // 2차원 배열을 1차원으로 변환
}

 

 

맨 상단에 할당한 pages가 인자로 들어오고, map을 돌며 fetchMovies를 반복한다.

여기서 나온 모든 영화 정보(fetchMovies 함수 안에 있는 data.results > 영화 데이터들)들을 result에 넣는데 여기서 Promise 가 나온다.

 

Promise는 비동기 작업중 시간이 오래걸리는 것들 (API 호출, 파일 읽기 등)을 수행할때 사용된다.

Promise.all은 병렬로 처리해주는 메서드 중 하나이다.

 

결국 result에는 2차 배열로 총 20개씩 10개의 배열로 이뤄어지게 되고(한 페이지당 20개의 배열로 받은 리스트가 10개 있는 거기에)

마지막에 flat() 메서드를 통해 200개의 1차 배열로 변형을 해준다.

 

 

 

그렇게 해서 얻게 된 총 200개의 영화 리스트들..

 

 

당연 이 코드를 혼자서 짜라면 못짜겠지만... 어떻게 api를 받아오고 그 이후 로직이 돌아가는지 알기에는 참 좋았던거 같다

아마 시간이 난다면 이번에 배운 sort() 메서드를 통해 이름 순으로 소팅을 해볼까 싶기도 하다.ㅎㅎ