REACT17 [클론코딩] 무비앱 시리즈 #9 #9 Favorite 버튼 만들기 (1) 영화를 클릭하고 난 페이지에 Favorite을 누르면 그 영화가 저장되고, Remove를 누르면 Favorite 목록에서 삭제되게 만들 것이다 1. Favorite Model 만들기 server 폴더에 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 }, movieP.. 2022. 7. 19. [클론코딩] 무비앱 시리즈 #8 #8 영화 출연진들 가져오기 전에 #5에서 배웠던 Grid를 이용하여 영화 출연진도 똑같은 형태로 출력되게 할 것이다 Toggle Actor View를 누르면 영화 출연진이 나오는 구조이다 저번 #7 때 MovieDetail.js에서 endpointCrew라는 변수를 선언한 적이 있다 let endpointCrew = `${API_URL}movie/${movieId}/credits?api_key=${API_KEY}` // 영화 출연진 정보 가져옴 그럼 fetch 구문을 이용하여 영화 출연진들을 가져와보고, 이를 console.log로 찍어보자 fetch(endpointCrew) .then(response => response.json()) .then(response =>{ console.log('resp.. 2022. 7. 19. [클론코딩] 무비앱 시리즈 #7 #7 Movie Detail 페이지 만들기 영화 포스터를 클릭하면 영화 정보와 배우들의 이미지가 나오는 페이지를 만들 것이다 #7에서는 영화 정보까지만! 1. 필요한 폴더, 파일 생성 views 폴더 안에 MovieDetail이라는 폴더를 만들어주고, 그 안에 MovieDetail.js 파일을 생성해준다 rfce를 타이핑 하여 간단한 함수 형태를 만들어준다 2. 렌더링 어떤 형식으로 영화에 대한 정보를 출력할 것인지 렌더링을 해준다 이 때 Image(배우 사진)를 어떻게 출력할지에 대한 템플릿도 필요하기 때문에 전에 작성했던 MainImage를 가져와준다 import MainImage from '../LandingPage/Sections/MainImage' 그 다음 렌더링 return ( {/*heade.. 2022. 7. 13. [클론코딩] 무비앱 시리즈 #6 #6 Load More Button 만들기 Load More 버튼을 누르면 추가로 20개씩 영화 정보가 업데이트 되게 할 것이다 1. button을 누르면 이벤트가 발생하게 만들기 Button을 클릭하면 어떠한 이벤트가 발생해야 하므로 아래와 같이 작성한다 Load More 클릭하면 loadMoreItems가 실행된다는 뜻 2. 코드 변경, 추가하기 loadMoreItems 코드를 만들기 전에, 페이지에 대한 코드를 작성해준다 const [CurrentPage, setCurrentPage] = useState(0) 또한 자주 쓰이기 때문에 fetch구문을 하나의 함수로 작성해준다 const fetchMovies = (endpoint)=>{ fetch(endpoint) // 인기있는 영화 가져오기 .the.. 2022. 7. 13. [클론코딩] 무비앱 시리즈 #5 #5 Grid Card Component 카드 형태로 출력되는 영화 포스터들을 띄워볼 것이다 일단 npm run dev로 리액트 창을 띄워주고 시작했다 console.log(response.results) 저번에도 보았듯 한 번에 20개까지 나오는 이 영화들을 각각 카드 형태로 담을 것이다 1. 필요한 폴더, 파일 생성 이를 위해 commons 폴더를 views 폴더 안에 생성해준다 원래는 LandingPage 안에 생성하려 했으나 카드 형태의 포스터들은 landing page 이외에도 쓰일 것이기 때문에 views 폴더 안에 생성해주었다 그 다음 GridCards.js 파일을 만들어준다 이제 여기서 코드를 작성할 건데, 그 전에 Extensions에 들어가 es7을 다운받아준다 2. GridCards... 2022. 7. 12. [클론코딩] 무비앱 시리즈 #4 #4 Landing Page 만들기 (1) Landing Page : 이용자가 최초로 보게되는 웹페이지 를 만들어보자 1. 웹사이트 꾸미기 저 파일에 들어가서 import React from 'react' import { FaCode } from "react-icons/fa"; function LandingPage() { return ( {/*Main Image*/} Movies by latest {/*Movie Grid Cards*/} Load More ) } export default LandingPage 을 적어준다 html 배운지 오래돼서 다 까먹음 T_T 그리고 react창을 열어줄 npm run dev 을 이용해서 완성된 웹 페이지를 보려고 했는데 오류가 났다 구글링 해서 나랑 똑같은 오류가 .. 2022. 7. 6. [클론코딩] 무비앱 시리즈 #2 ~ #3 인프런 무료 강의 무비앱 시리즈 #2 1. 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 Boilerplate when you use REACT JS, MONG DB, EXPRESS JS, REDUX - GitHub - jaewonhimnae/boilerplate-mern-stack: Boilerplate when you use REACT JS, MONG DB, EXPRESS JS, REDUX github.com 압축 풀기 2. vis.. 2022. 7. 6. 이전 1 2 다음
