Web 프론트엔드 (11) / 영화 리뷰 사이트 만들기 2

 

영화 리뷰 사이트를 마저 만들어보자.

아래 강좌를 보고 따라 만들고 있다.

물론 시간이 지나면서 현재에는 작동하지 않는 부분이 있어 그 부분들은 변경했다.

완전히 똑같지는 않다는점! (코드가 실행이 되지 않는다면 제 잘못.. T-T)

 

 

 

 

 

클래스 101 [유료강좌]

개발자 사관학교 - [웹 개발자 단과바 1교시] HTML, CSS, JS 프론트엔드 속성 실무!

https://class101.net/ko/products/5f53ae772e3e0d001cd99667

[웹 개발자 단과반 1교시] HTML, CSS, JS 프론트엔드 속성 실무! | 개발자 사관학교

 

 

 

CHAPTER 5 : 배운 내용으로 30분만에 프로젝트 시작하기

 

[메인 화면에 영화 API 연결]

 

영화의 이미지와 제목 등을 받아오기 위해 영화사이트에서 실제 API를 가져와야 한다.

이번 영화사이트처럼 API를 제공하는 웹서비스의 경우,

해당 사이트에 회원가입 후 API의 키값(url)을 받아오는 것이 일반적이다.

 

 

 

https://www.themoviedb.org/

The Movie Database (TMDB)

회원가입을 한 뒤 상단에 자신의 아이콘 - 설정으로 들어가면 API에 관한 탭이 있다.

API요청을 누르고 확인 사항들에 동의를 누르면 개인의 API접근 url이 발급된다.

 

 

 

 

 

1. ajax로 영화데이터 가져오기

지난번에 사용했던, 웹서비스가  처음 시작될때 데이터를 가져오는 ajax코드를 그대로 가져와

<script>태그 최상단에 배치시켜주었다.

 

 

 

url 부분엔 받아온 API주소를 사용한다.

 

 

웹사이트를 열어 콘솔을 보면 Object, 즉 객체의 형태로 데이터를 성공적으로 불러온 것을 볼 수 있다.

 

 

 

 

 

2. 영화 개수 만큼의 Card 만들기

가장 먼저 해야할 일은 API 속 개체에서 영화들의 데이터를 가져오는 것이다.

그 이후에 card를 만드는 태그가 담긴 상위태그 안에 영화의 개수만큼 card태그를 복사해서 붙여줄 것이다.

 

 

 

개발자도구에서 살펴보니 영화는 20개 정도였고 모두 results배열 안에 들어있었다.

results를 가져오면 개수만큼의 카드를 만들 수 있을 것 같다.

 

 

 

 

 

 

표시한 만큼의 영역이 카드를 만들어주는 코드이다. 

이 코드를 복사해서 반복문을 통해 개수만큼 붙여줄 것이다.

또한 상위 태그 아래에 붙여줄 것이기 때문에 상위태그에 review-list라는 id를 만들었다.

 

 

 

 

 

 

아까 적어두었던 ajax코드에서 데이터를 불러오는데 성공했을때 호출하는 함수 안에 넣어주었다.

또한 results의 배열 크기만큼 반복하면서 붙여넣도록 하였고 마지막에는 Jquery의 append함수로 간편하게 코드를 붙여넣도록 했다.

 

 

 

 

 

여기까지 만들었으니 이제 영화 이름과 이미지를 띄워보자.

 

 

 

 

3. 영화 이름 받아오기

우선 데이터가 어떤 key값으로 적혀있는지 개발자 도구에서 확인할 필요가 있다.

 

 

 

살펴보니 이름은 original_title의 value 값인 것을 알 수 있다.

 

 

 

 

 

"영화이름"이라고 적혀있던 부분을 다음과 같은 코드로 대체한다.

반복문이 돌면서 해당 번째 영화의 original_title의 value값을 가져오도록 했다.

백틱(`) 기호로 string을 담으면 이처럼 ${ }구문으로 간단하게 데려올 수 있다.

 

 

 

 

 

 

 

 

 

 

 

 

3. 이미지 가져오기

포스터 이미지는 확인해보면 poster_path라고 나타난다.

 

 

 

 

그런데 안에 주소를 잘 살펴보면 /abcdef.jpg와 같이 / 가 붙은 것을 볼 수 있다.

이는 앞에 다른 주소들이 더 있다는 의미이다.

 

themoviedb사이트의 설정 - API에 다시 들어가면 overview탭이 있다.

해당탭을 누르면 문서라고 적힌 부분에 org주소가 하나 나오는데 그곳에 들어가 image를 검색한다.

그러면 왼쪽 탭바에 Getting Started 안에 images 항목이 나타난다.

해당 항목을 클릭해 들어가면 API를 사용하기 위해 앞에 붙여야하는 전체 주소가 나와있다.

https://~~~~~/ + 지금 가진 원래주소를 붙여쓰기.

이런식으로 구성되어있다.

 

 

 

 

img src 부분에 확인한 전체주소를 적고 + 연산자로 영화 각각이 가진 이미지주소를 덧붙여준다.

 

 

 

 

 

 

 

포스터 이미지가 잘 들어가 있다.

그런데 예시로 만들어두었던 포맷이 남아있어 완전해 보이진 않는다.

아예 코드 자체에서 예시 코드를 파내기에는 아쉽다..

 

웹사이트를 열면 해당 내용을 지워주도록 코드를 추가로 작성해보자.

 

 

 

 

success 부분 안에 $(#"review-list").html('');를 추가해주었다.

Jquery를 통해 review-list (card를 만들어주는 태그의 상위태그)를 선택하고 html 함수로 그 안을 비워주도록 했다.

string을 담는 ' ' 기호 안에 아무것도 들어있지 않기 때문에, 이는 데이터를 받아오는 것에 성공하면

해당 태그의 안의 내용을 비우겠다는 의미이다.

비우고 나서 코드가 시작되기 때문에 위에서 작성한 코드들이 만든 이미지만 나타난다.

 

 

 

 

 

기본 포맷이 사라진 것을 볼 수 있다. 적용이 잘 되었다!

 

 

 

 

 

 

 

 

 

 

 

 

 

 

영화 리뷰 사이트의 기본 구성은 여기서 끝이다.

이제 실제로 API를 활용하여 리뷰를 작성해보는 '기능'단계만 남았다.

마지막 부분이 많이 어려워보이지만 마지막까지

조금만 더 힘내보기로 한다... (코딩 싫어) 코딩 너무 좋다...

 

 

 

 

 

 

 

 

 

 

출처: 클래스101 / [웹 개발자  단과반 1교시] HTML, CSS, JS 프론트엔드 속성 실무! - 개발자 사관학교