🚩 개인 과제 🚩
조별과제를 끝내고 이제 개인 과제 시간인데 개인 과제는 아래 형식으로 주어졌다.
- Javascript과정을 마무리하며, JS 문법의 핵심을 적용해 볼 수 있는 영화 검색 사이트를 제작합니다.
- 영화정보 오픈API인 TMDB(The Movie DB)를 사용합니다.
- TMDB API문서 https://developer.themoviedb.org/reference/intro/getting-started
과제 개요
- 순수 바닐라 자바스크립트만으로 영화 리스트 조회 및 검색 UI 구현
- 학습해온 자바스크립트 문법을 최대한 활용
- 스타일링 작업하며 css 와 친해지기
팀 과제를 진행할 땐 괜찮았던 거 같은데, 혼자서 해나간다 생각하니 뇌정지가..
필수 요구 사항엔 jQuerry 라이브러리 없이 순수 js 사용하기
오픈 API를 이용하여 인기영화 데이터 가져오기
가 있는데 API를 이용해 정보를 불러오는 강의를 본 게 꽤 지나서 그런지
머릿 속이 백지가 됐다 ..!
문제 직면
일단은 홈페이지를 불러올 때 리스트를 보여줘야 하니.. 열심히 찾아본 결과
이럴 때 사용하는 DOMContentLoaded 이벤트에 대한 공문을 찾았다!
역시 구글링이 최고시다.. 그럼 이걸 어떻게 적용시킬까? 에 대해 고민해 봤는데
일단은 main.js에 내 TMDB의 api를 가져온 다음,
document.addEventListener("DOMContentLoaded", function() {
const apiUrl = "TMDB 공식문서 url 따오기"
const apiKey = '내 api key'
})
로 코드를 시작하면 될 것 같은 느낌이였다! 그러나..
순조롭던 것도 잠시, 바로 또 뇌정지가 와서 멍때리고 있었는데
문제 해결
갑자기 생각난 약 한 달 전에 했던 영화 홈페이지 만들기 프로젝트, 아! 이걸
참고하면 되겠다 싶어서 바로 후다닥 켜봤는데 역시나 긴가민가 할 땐
예전에 했던 작업물을 다시 살펴보면 도움이 많이 되는 거 같다.
일단은 영화들이 보여지는 리스트를 콕 찝어주는 코드를 썼다.
document.querySelector('.movieList')
휴.. 여기까진 잘 생각해내고 다시 고뇌에 빠진 찰나.. 머릿 속을 스쳐 지나가는
과거의 내 코드.. 그렇다 fetch()로 데이터를 먼저 검색해야 했다.
먼저 fetch()를 이용하여 데이터를 검색하는 코드를 짜볼 것이다!
갈피를 잡고서 바로 다음 코드로 이행했다.
fetch(apiUrl 참고)
.then(response => response.json())
.then(data => {
let movies = data.results;
showMovies(movies)
!!!! 여기까진 잘 해내서 나 자신에게 굉장히 뿌듯해 하고 있는 와중
또 다시 찾아온 두 번째 문제..
fetch('https://api.themoviedb.org/3/tv/top_rated?language=en-US&page=1', options)
.then(response => response.json())
.then(data => {
let movies = data.results;
showMovies(movies)
})
.then(response => console.log(response))
.catch(err => console.error(err))
.catch(err => console.error(err))를 어떻게 헤쳐나가야 할지 다시 머리를
꽁꽁 싸매봤는데 도저히 봐도 봐도 생각이 나질 않는다..
그래서 찾아보니 저 부분은 Promise의 연결 방법이고, 오류를 처리할 수 있는
콜백함수 역할을 한다는 것이다.
여기서 턱 막히는 걸 보니.. 강의를 다시 쭉 들은 후에 과제를 이어가야겠다 ㅠㅠㅠ..
오늘의 다짐
고작 한 달 전에 했던 걸 까먹고 헤매는 나에 대한 빠따질을 좀 해야겠다.
오늘보다 더 나은 내가 되기 위해 열심히 공부하자!!
저기서 막힐 줄은 몰랐다 진짜.. 내일은 꼭 해결해본다
