[node-react-mongoDB] 영화 사이트

Boiler Plate를 활용해서 사이트를 제작

https://github.com/jaewonhimnae/boilerplate-mern-stack

GitHub - jaewonhimnae/boilerplate-mern-stack: Boilerplate when you use REACT JS, MONG DB, EXPRESS JS, REDUX

 

1. The MovieDB API 사용 : API key 필요

https://www.themoviedb.org/?language=ko 

The Movie Database (TMDB)

2. Landing Page 만들기 : 정보 가져오기 + MainImage 출력

Landing Page - MainImage

3. Landing Page - Grid Card : 영화 정보 20개 가져오기

MainImage 밑에 생성

4. Landing Page - Load More Button : 버튼 클릭 시 영화 정보 20개 더 가져오기

버튼 클릭 시 영화 정보를 더 보여줌

5. Movie Detail 페이지

Landing page에서 포스터 클릭 시 이동해 영화 정보 보여주기

6. Movie Detail - Toggle Actor view : 버튼 클릭 시 영화 출연진 정보 가져오기 

버튼 클릭 시 보여지는 영화 출연진들

7. Favorite Button : Favorite를 한 사람의 숫자와 내가 Favorite를 했는지에 대한 정보 가져와서 버튼에 표시하기

만들어진 Favorite Button

8. Favorite list : Favorite 버튼을 클릭해, Favorite list에 추가, 삭제

버튼 클릭으로 Favorite 숫자 증가

 

9. Favorite Page : 내가 Favorite한 영화 리스트를 출력 및 삭제 가능

Favorite Page

영화 이름 위에 마우스를 올릴 시, 영화 포스터 보여줌 (ant 디자인 'Popover' 사용)

 

참고자료 및 소스파일 GIT 주소 (소스파일 주석 참조)

https://www.inflearn.com/course/%EB%94%B0%EB%9D%BC%ED%95%98%EB%A9%B0-%EB%B0%B0%EC%9A%B0%EB%8A%94-%EB%85%B8%EB%93%9C-%EB%A6%AC%EC%95%A1%ED%8A%B8-%EC%98%81%ED%99%94%EC%82%AC%EC%9D%B4%ED%8A%B8-%EB%A7%8C%EB%93%A4%EA%B8%B0

[무료] 따라하며 배우는 노드, 리액트 시리즈 - 영화 사이트 만들기 - 인프런 | 강의

https://github.com/GaGa-Kim/CLONE/tree/main/Movie

GitHub - GaGa-Kim/CLONE: 클론 코딩