For Programmer

1.Favorite페이지만들기(components-views-FavoritePage-FavoritePage.js) 2..Favorite 페이지를 App.js에서 라우터로 등록하기 3.MongDB에서 Favorite으로 된 영화 정보를 가져오기(Axios통신)(FavoritePage.js) function FavoritePage() { const [Favorites, setFavorites] = useState([]); const fetchFavoredMovie = () => { //좋아요 영화들을 서버로부터 로드하는 API Axios.post('/api/favorite/getFavoredMovie', { userFrom: localStorage.getItem('userId'), }).then((respo..

Favorite리스트에 넣고 빼는 Function 만들기(Favorite.js) 1. 버튼에 onClick이벤트 적용 {Favorited ? 'Not Favorite' : 'Add to Favorite'} {FavoriteNumber} 2. onClickFavorite 함수 만들기(Axios통신 포함) const onClickFavorite = () => { let variables = { userFrom: userFrom, movieId: movieId, movieTitle: movieTitle, moviePost: moviePost, movieRunTime: movieRunTime, }; if (Favorited) { Axios.post('/api/favorite/removeFromFavorite',..

1. Favorite Model만들기(server-routes-Favorite.js) const mongoose = require('mongoose'); const Schema = mongoose.Schema; const favoriteSchema = mongoose.Schema( { userFrom: { type: Schema.Types.ObjectId, ref: 'User', }, movieId: { type: String, }, movieTitle: { type: String, }, moviePost: { type: String, }, movieRunTime: { type: String, }, }, { timestamps: true } ); const Favorite = mongoose.model(..

영화에 나오는 Crews Information 가져와서 화면에 보이기 1.crew정보를 state값에 넣기(MovieDetailPage.js) const [Casts, setCasts] = useState([]); 2.fetch통신을 통하여 cast정보받기(MovieDetailPage.js) let endpointCrew = `${API_URL}movie/${movieId}/credits?api_key=${API_KEY}`; let endpointInfo = `${API_URL}movie/${movieId}?api_key=${API_KEY}`; useEffect(() => { let endpointCrew = `${API_URL}movie/${movieId}/credits?api_key=${API_KEY..

*1,2,3번을 이번시간에 할 예정이며 4,5,6번을 다음시간에 할 예정임 1. 특정영화에 대한 페이지들어가는 라우터만들기 2.라우터에서 :movieId를 받아서 그 Id로 movie API를 이용하여 세부페이지 만들기 (fetch통신포함)(client-src-components-views-MovieDetailPage-MovieDetailPage.js) import React, { useEffect, useState } from 'react'; import { API_KEY, API_URL, IMAGE_BASE_URL } from '../../Config'; import MainImage from '../LandingPage/Sections/MainImage'; import MovieInfo from '..

*loadMoreFunction 만들기(LandingPage.js) 1. button에 onclick 이벤트설정 Load More 2. state값에 현재페이지값 저장 const [CurrentPage, setCurrentPage] = useState(0); 2.fetch 통신코드가 중복이 되기 때문에 코드낭비를 방지하기위해서 하나의 변수에 저장한다. const fetchMovies = (endpoint) => { fetch(endpoint) .then((response) => response.json()) //응답을 json형태로 변경하여 then의 response에 반환 .then((response) => { console.log(response); setMovies([...Movies, ...res..

*이번시간에는 4번 GridCardComponent를 만들예정이며 5번 다음시간에 할 예정이다. 1. Grid Card Component를 만들기 (client-src-components-views-commons-GirdCards.js) *LandingPage폴더 내부에 만들지 않는 이유는 그리드카드를 사용할 곳이 LandingPage뿐만 아니라 몇군데 더있기 때문에 상위 폴더에 생성 2. antd Col , Row를 이용하여 GridCard페이지 코딩 import React from 'react'; import { Col } from 'antd'; function GridCards(props) { return ( {/*브라우저의 크기가 가장클때는 24중에 6만쓰겠다는의미 중간은 8 가장작을때는 24를 ..

*이번시간에는 3번까지 할예정이며 4~5번은 다음시간에 할예정이다. *fetch 통신에대한 사용법은 다음글을 참고하자 https://webisfree.com/2019-05-15/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-fetch-api-%EC%95%8C%EC%95%84%EB%B3%B4%EA%B8%B0 자바스크립트 fetch API 알아보기 자바스크립트에서 fetch API를 사용하여 서버와 비동기 통신을 어떻게 할 수 있는지 그 방법과 예제에 대하여 자세히 알아봅니다. webisfree.com *또한 fetch통신과 Axios통신의 차이점은 fetch통신은 응답을 promise형태로 하기때문에 이를 json형태로 바꿔야한다는점과 에러처리방식에있어서..