영화 검색 사이트 만들기

January·2022년 5월 19일
0

Project

목록 보기
1/4
post-thumbnail

OMDb API

영화 정보를 얻기 위한 웹 API를 활용해서 영화 검색 사이트를 만들었다.
OMDb API

fetch, async / await

async function getMovie(name) {
  let res = await fetch(`https://www.omdbapi.com?apikey=API KEY&s=영화이름&page=페이지 번호&type=검색 타입`);
  res = await res.json();
  return res;
}

영화 Database에서 정보를 가져오는데 걸리는 시간이 얼마일지 잘 모른다. 다른 로직이 계속 기다려줄 수 없기 때문에 비동기 처리를 한다. 하지만 해당 로직의 목적은 영화 정보를 가져오는 것이기 때문에 동기처리를 하고 영화 정보를 가져오라고 명령했는데 명령만하고 응답을 오든 말든 다음 로직으로 넘어가게 된다. 예를 들면 영화 촬영 안끝났는데 이 영화 보러 상영관 들어간거나 마찬가지다. 이 문제도 같이 잡아주어야한다.

fetch는 완전한 비동기 처리여서 정보를 가져올때까지 기다리지 않고 요청을 보내면 바로 다음 로직으로 넘어간다. fetch가 프로미스로 값을 반환하기도 전인데 출발 신호를 쏘고서 바로 텍스트 데이터(json)로 바꿔주게된다. 그래서 동기처리할 수 있는 async / await를 같이 써줬다.

await는 응답을 기다려주기위함이다. fetch는 HTTP 요청 기능을 제공하는 클라이언트 사이드 Web API이기도 하다. fetch 함수를 통해서 HTTP 응답을 나타내는 Response 객체를 래핑한 프로미스 객체를 반환하는 역할도 있다.

await를 통해 HTTP 응답을 기다려주고 resolve 반환이 되면 다음 로직으로 넘어간다. 그리고 await를 썼다면 함수 앞에 async는 필수로 작성되어야한다. 짝꿍이다.

영화 검색이 시작되면
1. 로딩 애니메이션이 실행되고
2. (await)영화 정보를 요청하고 기다렸다가 응답을 받고
3. 로딩 애니메이션이 종료된다.

검색 타입 선택

3가지 검색 타입

  • movie
  • episode
  • series
    버튼 역할을 각자 만들어주어서 querySelectAll로 묶어주어 인덱스 번호로 호출을 해줬다.
    호출된 이름은 api 주소 매개변수에 들어가 이름에 맞는 검색 범위를 갖게 된다.

한가지 아귀운건 드롭다운 애니메이션을 scss로 줬는데 검색창의 스타일 속성과 오류가 나는 부분이 있어 다음에는 부트스트랩을 활용할 예정이다.

회고

이번 과제는 웹 api를 활용해서 서버에서 데이터를 가져오고 시각적인 구현까지 해보는 게 핵심이었다. 처음에는 비동기는 뭐고 데이터를 json으로 가져와서 화면에 어떻게 렌더링을 해야 할지 많은 고민을 했던 거 같다. 그 고민 중 한몫했던 무한 스크롤 intersection observer와 이벤트 캡처링, 버블링도 나중에 글로 정리해 볼 생각이다. 로직을 생각하고 어떻게 하면 코드가 깔끔할지를 계속 생각하며 코드를 짜봤다. 사소한 지식들이 모여서 한 웹페이지를 만들어 보니 느낀것이 많았따.

하면서 느낀건 정말 중요하지 않은 개념은 없는거 같다. 그 작은 개념들이 모여서 퍼즐 맞추듯 완성이 됐다. 300줄도 안되는 코드인데 어떻게 구현할지 고민과 오류잡는 고민의 투자된 시간이 상당했던거 같다.

개발자는 항상 겸손해야한다는데 겸손하자!라는 생각이 들때쯤은 언제일지 모르겠다. 평생 안올지도 모르겠다. 이런 생각을 안해도 이미 실력이 겸손하니깐!

완성작

영화 검색 사이트

0개의 댓글