[movie PJ_day1] 요구하는 바를 명확히 파악하기

떨리는 첫 프로젝트!
텅 빈 vscode에서 최종으로 영화페이지를 만들기까지!

기초적인 필수 기능과 추가적인 도전 기능이 있다. 우선 필수 기능부터 다 구현하는 것을 목표로🏅

---

1월 8일의 과제

 

 

1. 프로젝트 파일 구조 설정

1-1. js, html, css 파일 생성

과제 진행 전, 담당 튜터님께서 알려주신 방식을 캡쳐해 두었고

동일한 방식으로 파일을 따로따로 만들었다.

 

📌 그 전에는 html에 <style> 태그, <script>태그를 넣어 한 문서로 만들었지만
이후 수정 및 유지보수가 어렵다는 단점이 있어, 분리하여 관리하면 훨씬 편하다!

 

 

 

1-2. js, html, css 파일 연결

세 파일을 연결하기 위해서는 html 파일에 작성해야 한다.
결국 웹 사이트를 거시적으로 나타내는 것은 html 파일이기 때문!

📌 body 태그 하단에 script와 style 태그를 연결해두었다.
하단에 연결하는 이유는
로직의 순서대로 웹 사이트가 로딩되는데, html의 뼈대를 먼저 구성하기 전(dom이 구성되기 전)에 이 dom을 건드리게 된다면

에러가 발생할 수도 있기 때문!

 

2. TMDB API 연결

2-1. TMDB에서 Key 발급받기

• API Reference로 접속하여 Get API Key에서 개인의 key를 발급받는다.
• 회원가입 후, 간단한 정보 및 주소 입력 후 발급 성공

=> key를 발급 받은 이유는, 무분별하게 사용하기 위한 것을 막고 ‘회원가입’이라는 절차를 통해 API 발급 권한을 주기 위해서이다.

 

 

2-2. fetch API를 사용해 데이터를 가져오기

 

👇🏻API Reference가 정말정말 많다..! 사진 외에도 쭈우우욱 밑으로 더 내려간다.

 

안내사항에 나와있는 내용을 자아알 살펴보고 '인기 영화 데이터'를 가져와야 한다.
(제대로 안 읽고 다른 API 잘못 가져온 사람 저요..🙋🏻‍♀️)

 

'인기 있는' 창으로 들어와서 오른쪽 위 '언어'에서 사용하는 언어를 선택한다.
(내용 파악 후 번역 상태를 해제해야 다른 창에 접근이 용이하다.)

 

그 바로 아래 가져오기 요청을 복사하여 JS 파일에 붙여넣고
(Authorization의 내용은 나의 key에 맞는 값을 제공한 것이다.)

 

👆🏻console 창을 확인한다.
page 수와 results 개수를 비교하면 잘 찍히는 걸 확인할 수 있다!