Web/MovieApp
[#4] 좋아요 버튼 만들기
📒구현순서 Model 만들기 Button UI 만들기 얼마나 많은 사람이 이 영화를 Favorite list에 넣었는지 정보 얻기 내가 이 영화를 이미 Favorite list에 넣었는지,아닌지 정보 얻기 (페이지 새로고침 하더라도 정보가 유지되어야 함.) 데이터를 화면에 보여주기 📒Model userFrom / movieId / movieTitle / movieImage / MovieRunTime const mongoose = require('mongoose'); const Schema = mongoose.Schema; const favoriteSchema = mongoose.Schema({ userFrom: { //누가 이 영화를 좋아했는가? type: Schema.Types.ObjectId, //O..
[#3] Movie 상세정보 페이지 만들기 / Cast 정보 가져오기
📒Movie 상세정보 페이지 구현순서 API에서 특정 영화의 상세정보 가져오기 [props.match.params.movieId] 그 정보를 State에 넣기 전체적인 template 만들기 영화에 나오는 Crews Information 가져오기 가져온 Crews정보를 State에 넣기 State에 보관된 Data들을 화면에 보여주기 📒Cast 정보 가져오기 State 정의 const [ActorToggle, setActorToggle] = useState(false) 태그에 onClick event로 {toggleActorView} 함수 걸기 {ActorToggle && {Casts && Casts.map((cast, index)=>( ))} }
[#2] MovieApp LandingPage 구조
📒 대략적 구현 순서 전체적인 Template을 간단하게 만들기 Movie API에서 가져온 모든 데이터를 STATE에 넣기 MainImage Component를 따로 만들기 Grid Card Component 만들기 LOAD MORE function 만들기 📒 Movie API에서 가져온 모든 데이터를 STATE에 넣기 📒 MainImage Component를 따로 만들기 import React from 'react'; function MainImage(props){ return ( {props.title} {props.text} ) } export default MainImage 📒 Grid Card Component 만들기 //Grid 스타일을 다른 페이지에서도 쓸 수 있도록 commons 폴더에 ..
[#1] The MovieDB API 연결
📒The MovieDB API 연결 순서 https://www.themoviedb.org/?language=ko 가입 후, 로그인 API_KEY 받기 📒API_URL Get Movie BY Latest / Get Movie Detail / Get Movie Reviews / Get Trending URL모두 앞부분에 겹치는 부분을 상수처리 [Config.js]