For Programmer

1.node.js 설치 https://nodejs.org/en/ 다음 node.js 공식홈페이지로 가서 설치할 수있다. 2.cmd를 관리자권한으로 실행 후 npm init 명령어를 이용하여 package.json 파일생성하기 3.vscode를 켠 후 해당폴더를 불러와 index.js파일 생성 후 간단한 실행 코드작성 4.단, 위의 express모듈을 사용하기 위해서는 다음과같이 vscode내 express모듈을 다운 받아야한다.( '--save'를 추가하게 될경우 package.json 내에 dependencies 객체에 추가가된다.) 5.노드 서버를 실행 하기 위해 package.json 에 start 스크립트 추가 6. 깃으로 노드 서버 실행하기 *이후 서버를 끄고싶다면 ctrl+c 로 끄면된다. 해..

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를 ..