TMDB API 데이터 불러오기(fetch)
1. 영화 데이터를 가져올 수 있는 API를 제공하는 TMDB
The Movie Database (TMDB)
Welcome. Millions of movies, TV shows and people to discover. Explore now.
www.themoviedb.org
TMDB 사이트를 접속한다음 -> 회원가입을 진행과 동시에 api 키값을 받고 로그인 하고 프로필 설정 들어가서 왼쪽 목록에 api를
눌러보면 다음과 같은 화면이 나옵니다.

다음과 같은 화면이 나오면 문서라는 공간에 빨간색으로 칠해진 글씨가 있는데 여기를 클릭하면 개발자를 위한 문서가 등장합니다.


다음과 같이 api를 사용하는 방법에 대한 문서가 나오게 되는데 다 영어라서 당황 하지말고 위에 목록이 4개 나오는 공간이 있는데 거기에서
API Reference를 클릭해봅시다. 클릭하여 한국어로 바꿔봅시다 . 바꿔서 왼쪽 목록을 쭉 내려보면 내가 찾는 데이터중 인기있는 영화목록
이 보입니다. 여기를 클릭해봅시다!!

들어와서 오른쪽 화면을 보시면

이 화면이 보일겁니다. 여기서 LANGUAGE 옆에 점 3개가 수직으로 되있는 것을 클릭하여 원하는 언어로 변경하고
코드 상단에 FETCH REQUEST로 변경하여 해당 코드를 복사 해봅니다!
가져온 코드를 vscode에 js파일을 하나 만들어서 붙여준다음 우리는 언어를 한국어로 할거니 fetch url의 뒷부분 language 뒤를
ko-KR로 바꿔줍니다.

실제로 데이터를 . 잘가지고 왔는지 확인해볼려면 콘솔에 찍어봐야겠으므로
index.html 파일을 하나 만들어 js파일과 연결해줍시다.

연결이 잘되었으면 LIve server 를 이용하여 브라우저를 킨 다음 개발자도구를 가서 확인해줍니다.

데이터를 잘 가지고온 것을 확인했습니다. 다음에는 이 가져온 데이터로 웹페이지 화면에 사진과 제목 평점을 표시해보겠습니다.
오늘의 회고록
1. api를 가져오는것에 방법을 알아보았지만 아직 데이터의 구조 및 사용법을 제대로 알지 못하였으므로 알아봐야겠다.
2. fetch에 대하여 공부해보았다. 평생 써먹을거 같은 좋은것이엿다.
3. 아직 비동기로 연결하지 못하여 내일 연결해볼려고 한다. 너무 오랫만에 코드를 작성하는데 어렵다 ㅠㅠ
'JavaScript' 카테고리의 다른 글
| [JavaScript] Localstorage를 이용하여 영화정보 저장 및 불러오기 (0) | 2025.01.13 |
|---|---|
| 자바스크립트 동기 / 비동기(Promise, async/await) (0) | 2025.01.10 |
| Map과 Set (1) | 2025.01.07 |
| ES6문법에 대하여... (1) | 2025.01.03 |
| Javascript 문법 배우기!! (0) | 2025.01.02 |