JS 리팩토링과 swiper을 사용하여 캐러셀 구현

1. 영화 데이터 가져오는 JS 코드 리팩토링

첫번째 과제에서는 데이터를 가져와서 화면에 보여주기만해서 

데이터를 가져오는 동작(fetch)와 카드를 만드는 동작(createMovieCard)을 한 곳에 두었다

 

함수가 데이터를 가져오고, 카드를 만드는 2가지 역할을 하면서

나중에 고쳐야지 생각했는데

 

마침 이번에는 메인페이지의 카드, 헤더, 상세페이지에 개별 영화가 들어가면서 코드를 분리하는게 좋겠다고 생각했다

그리고 async/await로 도전해봤다

수정 전

 

수정 결과

1. fetchMovies

먼저 영화 데이터를 가져오는 함수를 만들었다

 

해당 함수는 fetch한 결과를 가져와 json으로 변환 후, 사용할 results를 구조분해 할당으로 담았다

results안에는 영화(객체)를 담은 배열이 들어있다

mockdata

앗 아래 export는 실수다

실제 API

2. printMovieCard

배열을 돌면서 필요한 정보를 담아 카드를 만드는 createMovieCard를 호출한다

이 함수는 메인에서 사용하기 때문에 export를 했다

 

3. getTopFiveMovie

해당 함수는 메인 헤더 캐러셀을 위해 필요한 함수이다

 

메인 헤더에서는 이렇게 사용했다

 

---

2. Swiper을 사용해 캐러셀 구현

캐러셀을 위해 swiper 라이브러리를 사용했다

 

데이터를 가져오고나서 swiper-wrapper에 추가를 했다

그런데 html에 작성된 slide만 보이고, 추가한 것들은 보이지 않았다

appendChild

그런데 맥에서 화면 캡처를 했는데 패드로 글을 적을 수 있다 ㄷㄷㄷ 쩐다

 

알고 보니 swiper에서 동적으로 slide를 추가할 때는 appendSlide 메소드를 사용해야 하더라 ..

appendSlide