스터디기록일지

MovieDetail 페이지에 댓글을 달 수 있는 기능을 만들 것이다. 먼저 Comment.js를 위한 템플릿을 만든다. function Comment() { return ( Replies {/* Comment Lists */} {/* Root Comment Form */} Submit ); } export default Comment; 다음은 handlechange 기능이다. const [commentValue, setcommentValue] = useState(''); const user = useSelector((state) => state.user); const handleChange = (event) => { setcommentValue(event.currentTarget.value); }; c..

먼저 Movie Title 부분을 hover하면 영화 이미지가 작게 뜨게 할 것이다. 이번엔 hover 가 아닌Popover라는 라이브러리를 사용 할 것 이다. import 해주고 movie Title 부분을 감싸준다. import { Popover } from 'antd'; {favorite.movieTitle} 라이브러리에 맞게 content와 title을 넣어준다. 좋아요한 영화리스트가 들어가는 map함수를 따로 함수로 만들어준다. const renderCards = Favorites.map((favorite, index) => { const content = ( {favorite.moviePost ? : "no image" } ) return {favorite.movieTitle} {favorit..

favorite 버튼을 누르면 favorite list페이지에 버튼을 누른 영화가 표시되는 기능을 구현할 것이다. 그러려면 먼저 favorite list 페이지를 만들어야 한다. FavoritePage.js 를 만들어준다. 그 다음 App.js에서 import해 라우트를 만들어준다. 원래는 로그인이 된 상태에서 로딩이 되어야 하기 때문에 false가 아닌 true를 넣어야 하는데 아직 로그인 기능을 구현하지 않아 임시로 false를 넣었다. 그 후 상단 헤더바에 Favorite 버튼을 만들어줘 경로를 수정해준다. 그 다음 Favorite 페이지를 간단히 구성해준다. 해당 css파일도 만들어줘서 수정해줬다. mongoDB에서 Favorite으로 된 영화 정보들을 가져오기 저번처럼 FavoritePage.j..

Add to Button 을 누르면 버튼 상태가 변하는 기능 아직 Favorite 리스트에 넣지 않았다면 Add to Favorite list하게 하고 이미 리스트에 넣어져 있다면 Remove From Favorite list하게 할 것이다. 해당 버튼에 onClick으로 버튼을 눌렀을 때 실행될 기능을 추가해준다. {Favorited ? 'Not Favorite' : 'Add to Favorite'} {FavoriteNumber} Favorited가 된 상태에서 실행할 Axios와 Favorited가 되지 않은 상태에서 길행할 Axios를 if문으로 나눠주고 해당 endpoint 를 넣어준다. 그리고 movieId, userFrom등이 담긴 variables를 넣어 보내준다. 추가로 응답이 잘 될때 안..

서버에서 프론트의 요청을 받고 처리해주는 부분을 진행할 것이다. server 부분에 favorite.js파일을 만들어준다. 지금은 post request를 하는 것이기 때문에 router에 post로 붙여준다. endpoint로는 원래 아래처럼 넣어줘야 하는데 router.post('/api/favorite/favoriteNumber') router를 쓰고 있기 때문에 아래처럼 넣어주고 router.post('/favoriteNumber') index.js에서 추가해준다. app.use('/api/favorite', require('./routes/favorite')); 위를 하지 않으면 모든 서비스 api들을 index.js에 일일이 추가해줘야 한다. 그리고 프론트에서 보내준 useFrom, movie..

Favorite Model 만들기 (useFrom, movieId, movieTitle, movieImage, movieRunTime) 이 들어간 틀을 만들 것이다. server 폴더에 Favorite.js를 만든다. 안에 필드들을 넣어준다. const favoriteSchema = mongoose.Schema({ useFrom:{ type: Schema.Types.ObjectId, ref: 'User' }, movieId:{ type: String }, movieTitle:{ type:String }, moviePost:{ type:String }, movieRunTime:{ type: String } },{timestamps: true}) useFrom안에 있는 객체들이 의미하는 것은 예를 들어 Ob..

버튼을 누르면 영화 출연진들이 나오는 기능을 구현할 것이다. 먼저 영화 출연진 정보를 API를 통해서 가져와야 한다. let endpointCrew = `${API_URL}movie/${movieId}/credits?api_key=${API_KEY}` fetch(endpointCrew) .then(response => response.json()) .then(response => { console.log('reponseForCrew',response) }) fetch를 통해 정보들을 가져와 준다. 이제 이 가져온 정보를 state에다가 넣어주고 이 state를 저번에 만들었던 GridCard에 넣어주면 된다. const [Casts, setCasts] =useState([]) fetch(endpointC..

이번엔 영화 하나를 선택하면 해당 영화의 정보들이 담겨 있는 페이지가 나올 수 있게 할 것이다. 특정 영화에 해당하는 자세한 정보를 가져오기 먼저 MovieDetail 페이지를 만들어준다. 그리고 npm run dev를 한 뒤 영화 하나를 들어가 MovieDetail 페이지로 들어가면 url 뒤에 해당 영화 아이디값이 들어간다. ex) http://localhost:3000/movie/505642 MovieDetail에 Dom이 로딩된 후 할 것들을 넣어주는 useEffect를 통해 fetch를 이용해서 영화정보를 가져와 준다. endpoint를 넣어주는데 저번에는 유명한 영화들을 가져왔고 이번엔 한 가지의 영화를 가져오는 것이기 때문에 popular 대신 movieId를 넣어준다. let endpoin..

Load More Function 만들기 Load More 버튼을 누르면 영화 종류가 더 생기는 기능을 만들 것이다. Load More 먼저 버튼을 클릭하면 작동할 기능(function)을 넣어준다. 버튼을 클릭하면 작동할 function을 만든 후 const loadMoreItems=()=>{ } useEffect(()=>{ const endpoint = `${API_URL}movie/popular?api_key=${API_KEY}&language=en-US&page=1`; fetch(endpoint) .then(response => response.json()) .then(response => { console.log(response.results) setMovies([...Movies, ...res..

Grid Card Component 를 만들어보자. 내가 항상 grid를 사용하는 방법은 따로 css( ex) display:grid) 에서 수정을 해주는 것이었는데, 이번엔 다른 방법 Gid System을 사용할 것이다. 먼저 GridCard라는 컴포넌트를 만들어준다. +vsc 확장에서 es7이라고 치고 아래를 설치해주면 rfce라고 치면 기본적인 셋팅이 된다! import {Col} from 'antd'; Col을 import해준다. column 행이라는 뜻이다. lg={6} md={8} sm={24} 부분은 반응형으로 구현할 수 있게 한 것인데, col의 크기를 반응형에 맞게 줄 수 있다. 이 컴포넌트를 랜딩페이지 부분에서 import해주고 열 부분도 이 랜딩페이지에서 import해준다. impor..