1. 영화 데이터 가져오는 JS 코드 리팩토링
첫번째 과제에서는 데이터를 가져와서 화면에 보여주기만해서
데이터를 가져오는 동작(fetch)와 카드를 만드는 동작(createMovieCard)을 한 곳에 두었다
함수가 데이터를 가져오고, 카드를 만드는 2가지 역할을 하면서
나중에 고쳐야지 생각했는데
마침 이번에는 메인페이지의 카드, 헤더, 상세페이지에 개별 영화가 들어가면서 코드를 분리하는게 좋겠다고 생각했다
그리고 async/await로 도전해봤다
수정 결과
1. fetchMovies
먼저 영화 데이터를 가져오는 함수를 만들었다
해당 함수는 fetch한 결과를 가져와 json으로 변환 후, 사용할 results를 구조분해 할당으로 담았다
results안에는 영화(객체)를 담은 배열이 들어있다
앗 아래 export는 실수다
2. printMovieCard
배열을 돌면서 필요한 정보를 담아 카드를 만드는 createMovieCard를 호출한다
이 함수는 메인에서 사용하기 때문에 export를 했다
3. getTopFiveMovie
해당 함수는 메인 헤더 캐러셀을 위해 필요한 함수이다
메인 헤더에서는 이렇게 사용했다
2. Swiper을 사용해 캐러셀 구현
캐러셀을 위해 swiper 라이브러리를 사용했다
데이터를 가져오고나서 swiper-wrapper에 추가를 했다
그런데 html에 작성된 slide만 보이고, 추가한 것들은 보이지 않았다
그런데 맥에서 화면 캡처를 했는데 패드로 글을 적을 수 있다 ㄷㄷㄷ 쩐다
알고 보니 swiper에서 동적으로 slide를 추가할 때는 appendSlide 메소드를 사용해야 하더라 ..
결론
- 함수는 한가지 역할만을 하도록 하자
- async/await을 개념만 공부할 때는 헷갈렸는데 확실히 수정해보면서 이해가 되었다!! ㅎㅎ
- 동적으로 swiper에 카드를 추가/삭제할 때는 appendSlide/removeSlide
- 직접 다 구현하려하지말고 라이브러리를 잘쓰자