1. 무비 API 이용 풀스택 웹 프로젝트 ( React, Node.js express, MongoDB )

 

무비 API 이용 풀스택 웹 프로젝트

소요 기간 : 3일

겪었던 문제들 : 바보일기1, 바보일기2, 바보일기3, 바보일기4

Github : https://github.com/chalinuna/movie-app

Demo : https://starlit-mooncake-064acc.netlify.app/

배포 일기 : https://make-somthing.tistory.com/80

---

 

 

 

 

사용 언어와 기술, 라이브러리 및 DB

Frontend - React (useState, useEffect, Axios, Proxy(Http-proxy-middleware), antd, formik, 등...)  Backend - Node.js express ( Router, Body-Parser, Cookie-parser, Bctyptjs, 등...)    DB - Mongo DB  Movie API - https://www.themoviedb.org/  Depoly - AWS Elastic Beanstalk, Netlify

 

 

---

 

 

설명

 

LandingPage.js

 

▶ TheMovie API 사용해 웹사이트 이용 현재 기준으로 가장 인기있는 영화 리스트를 불러오기

▶ 가장 하단의 LoadMore 버튼을 클릭해 무한 스크롤 형식으로 영화 리스트 추가 불러오기 기능 제공

메인화면

 

▶ 주요 코드

 

const endpoint로 API 호출, fetchMovies로 Load More 버튼 클릭 시 State에 불러온 영화 리스트 추가

 

 

 

---

 

 

RegisterPage.js , LoginPage.js

 

▶ 이름, 이메일, 비밀번호로 회원가입 및 로그인 기능 제공

▶ Formik를 사용하여 간편한게 Form 생성

▶ bctypts 라이브러리로 회원가입한 회원의 정보 암호화하여 mongoDB에 저장

회원가입 및 로그인

 

▶ 주요 코드

LoginPage.js

RegisterPage.js

bctyptjs 라이브러리 이용 백엔드

 

 

---

 

 

MovieDetail.js , MovieInfo, Favorite.js

 

▶ API에서 제공된 movieId를 url 파라미터로 제공하여 상세페이지 생성(MovieInfo로 컴포넌트 생성하여 불러오기)

▶ url 파라미터에서 추출한 movieId를 기반으로 클릭한 영화의 상세 정보 제공

▶ Favorite(좋아요) 버튼으로 로그인 한 유저에게 영화 좋아요 리스트 저장 기능 제공, 더블클릭 시 리스트에서 제거

▶ View Cast 버튼 클릭 시 캐스팅 된 인물 정보 제공

영화 포스터 클릭 시 이동되는 MovieDetail

View Cast 버튼 클릭 시 표시되는 캐스팅 목록

 

▶ 주요 코드

 

API 사용해 영화 디테일 정보와 캐스팅 정보를 가져오는 endpointInfo와 endpointCrew. fetch를 사용해 결과를 josn으로 가져온 뒤 State에 할당한다.

Favorite 컴포넌트를 생성해 props로 movieInfo, movieId, userFrom을 전송하여 Favorite 컴포넌트에서 사용할 수 있게 한다.

Favorite.js 컴포넌트. 받아온 props들로 api 구성하여 백엔드와 통신. 수행 순서와 오류 수정을 위해 오만곳에 콘솔을 작성해 놓았다 ...

 

Axios로 호출받은 api들을 수행하는 express 백엔드의 favorite.js. post로 정보를 받아왔기 때문에, router를 사용해 router.post를 이용함. 기록하지 않은 오류들을 만나 애를 먹은 덕분에 프론트-백 간의 axios 통신의 달인이 되어버림.. ^^;

 

 

---

 

 

FavoritePage.js

 

▶ 로그인 한 유저에게 해당되는 favorite movies 리스트를 mongoDB로부터 받아와 화면에 출력

▶ remove 버튼으로 삭제 기능도 제공

Favorite 페이지. 유저가 좋아요 버튼을 누른 리스트들을 불러온다.

영화 제목에 마우스 오버하면 포스터를 출력한다.

▶ 주요 코드

 

프론트에서 현재 user의 정보를 localStorage에서 getItem하여 백엔드 api를 호출한다.

 

백엔드는 프론트로부터 전송된 정보를 이용해 원하는 정보를 find하여 보내주거나, findOneAndDelete함수로 삭제한다.