방학동안 리액트를 공부하고 8월 ~ 9월 즈음에 리액트로 만들어볼 것들을 찾아보다가 노마드코더의 강의 사이트에 있는 영화 웹페이지 만들기를 발견했다..!
강의는 전체적으로 리액트 기초적인 것들을 가르쳐주는데 전반적으로 퀄리티가 너무 좋아서 리액트 처음하는 사람에게 추천할 수 있을 정도였다.
영화 API 사용
강의 후반부에는 yts.mx API를 이용해서 영화 정보를 불러오는 사이트를 만드는데 이 API는 무료긴 하지만 최신화가 안되고 사이트가 광고로 도배되어있어 그냥 쓰기 싫었다ㅋㅋㅋ..
그래서 찾아본 영화 정보 API는 바로 TMDB API로 실시간 영화 정보를 알려주는 사이트이고 이 사이트는 API를 지원한다. 가입하고 API KEY를 발급받고 사용하여 영화정보 사이트를 만들어보기로 했다.
TMDB에 가입하고 API 키 발급과 API 문서를 보고 만들었다.
TMDB에서 제공하는 인기 영화 리스트를 받아와서 화면에 띄워보았다.
const url = "https://api.themoviedb.org/3/movie/popular?language=ko-KR&page=1";
const options = {
method: "GET",
headers: {
accept: "application/json",
Authorization: `Bearer ${process.env.REACT_APP_API_KEY}`,
},
};이 때 API KEY를 headers의 Authorization에 실어서 보내는야 하는 것을 알게 되었다.
이전에는 그냥 리액트로 화면을 만드는 정도였다면, 이번 기회를 통해서 실제 API요청을 보내고 응답을 받아와 화면에 출력해보게 되었다. 그 정보가 뭔가 정적인게 아닌 실시간 영화 순위에 대한 정보였기 때문에 더 의미있었던 것 같다.
구성
초기화면은 최근 영화 20개 정도를 불러와 리스트를 만드는 것이었다. 그리고 각 영화의 제목 혹은 사진을 클릭하면 세부 정보를 볼 수 있도록 구현하였다.
세부 정보에서는 영화의 메인 포스터와 제목, 설명, 평점, 장르 등을 볼 수 있도록하였다.
아 그리고 유튜브 링크도 걸려있어 트레일러도 바로 볼 수 있다..!!
배포
git pages로 한번 띄워봤는데 이것도 재미있었다.
내가 만든 영화 정보 사이트 (디자인 구림)
github repository
깃허브 레포지토리
느낀점
- 기술블로그 처음써보는데 어떻게 써야할지 잘 모르겠다.
- react로 api 요청 제대로 써본 것 같아서 재밌었고, 이 이후로 했던 프로젝트에서 이 경험이 많이 도움이 되었다.
- 디자인은 어렵다..
