[React] 영화 웹사이트 생성

 

 

 

저번엔 간단하게 헤더와 List, 좋아요 기능들을 구현해봤다.

 

그 이후에

 

왓챠피디아나 CGV, 롯데시네마, 넷플릭스처럼 영화와 관련된

웹 사이트를 만들고 싶었다.

 

그래서 프로젝트 기획을 Figma로 그려본 뒤,

 

먼저 메인페이지부터 만들어갔다.

 

페이지는 유튜브 React 강의들을 참고하였다.

 

 

 

 

먼저 이번엔 결과부터 공개하겠다.

 

 

 

어떤가

나쁘지 않은가

 

React를 이용해 만들었다.

 

이 결과를 만들기 위해서 가장 중요하게 생각한것은 

영화와 관련된 API를 연동하는 것이었다.

 

그래서 난 TMDB API를 활용하였다.

 

 

처음엔 영화와 관련된 api를 못찾아서 고생 좀 했다.

 

근데 구글링이 역시 짱이다.

구글에 tmdb api를 치니

 

 

 

이런식으로 나온다.

 

난 여기서 

 

https://developer.themoviedb.org/reference/intro/getting-started

Getting Started

 

 

맨 위에 있던 사이트를 클릭하여 들어갔다.

(그 전에 TMDB 회원가입을 해놓는다.)

 

 

많은 데이터 중 나는 현재 상영되고 있는 영화 리스트를 불러와봤다.

 

+ 종류는 많다. (가장 인기있는 영화, 랭킹 등등)

 

 

 

 

 

메인 페이지에서 More -> API -> Movie List -> Now Playing 을 클릭하였다.

 

그런 다음

언어는 JavaScript를 선택하고

발급받은 api 키와 여러가지를 입력한 후 Try it! 을 눌렀다.

 

https://jamong.tistory.com/14

[2024.04.27] TMDB API 사용해보기

 

 

난 이 사이트를 참고하였다.

 

Try it을 클릭한 후 Vscode에 코드를 작성하였다.

 

 

 

먼저, App.js에는 

 

여기서 <Movie>는

 

 

movie.jsx를 참고하였다.

 

 

 

잠깐!

 

 

 

여기서 파일 구조는 이렇다.

 

 

 

그렇다면 Movie를 import한 components에 있는 movies.jsx는

어떻게 코드를 작성하였을까?

 

 

 

 

 

하지만 한가지 더 해야할 것이 있다.

 

 

이런식으로 movieDummy.js를 만들어 TMEB에서 받은 데이터들을 넣어준다.

 

그런 후

 

 

 

App.css에 영화 정보에 대한 스타일을 지정해두었다.

 

 

1번과 같이 화면의 배경색을 정하고,

2번과 같이 헤더 배경색과 글씨색을 정했다.

 

그 후 밑에 스타일을 토대로 부드러운 효과들을 지정해주었다.

 

 

그 결과 맨 위에서 본것처럼

 

 

여기서 해당 영화에 마우스 커서를 가져다대면

 

 

 

다음과 같이 커서를 댄 곳에 영화 포스터가 커지는 것을 볼 수 있다.

 

이처럼 메인의 맨 윗부분을 구현하였으니

 

이제는 메인의 밑부분이나 영화 포스터를 클릭했을 때의 영화 상세페이지를 구현해오겠다.

 

 

다음 글에서 봅시당

 

:)