![]()
이 글은, 노마드코더의 "ReactJS로 영화 웹 서비스 만들기"를 공부한 내용을 수강자 입장에서 필기한 것으로, 다소 불친절한 설명이 있을 수 있음을 미리 알립니다. box-sizing : border-box 테두리를 포함한 크기를 지정할 수 있다. justify는 메인축 방향으로 정렬 align은 수직축방향으로 정렬 다음과 같은 상황에서 movie summary를 각 영화마다 같은 크기로 편집할 필요가 있다. 따라서 Array를 편집하는 방법에 대해 알아보자. function Movie({ year, title, summary, poster, genres }) { return ( {title} {year} {genres.map((genre, index) => ( {genre} ))} {summary...
이 글은, 노마드코더의 "ReactJS로 영화 웹 서비스 만들기"를 공부한 내용을 수강자 입장에서 필기한 것으로, 다소 불친절한 설명이 있을 수 있음을 미리 알립니다. Movie.js 에서 function Movie의 파라미터 추가 function Movie({ year, title, summary, poster, genres }) { Movie.proptypes에서 genre 추가 Movie.propTypes = { id: PropTypes.number.isRequired, year: PropTypes.number.isRequired, title: PropTypes.string.isRequired, summary: PropTypes.string.isRequired, poster: PropTypes.st..
이 글은, 노마드코더의 "ReactJS로 영화 웹 서비스 만들기"를 공부한 내용을 수강자 입장에서 필기한 것으로, 다소 불친절한 설명이 있을 수 있음을 미리 알립니다. Let's do some html/css part App.js → render render() { const { isLoading, movies } = this.state; return ( {isLoading ? ( Loading.. ) : ( {movies.map((movie) => ( ))} )} ); } } Movie.js → function Movie function Movie({ year, title, summary, poster }) { return ( {title} {year} {summary} ); } Result
![]()
이 글은, 노마드코더의 "ReactJS로 영화 웹 서비스 만들기"를 공부한 내용을 수강자 입장에서 필기한 것으로, 다소 불친절한 설명이 있을 수 있음을 미리 알립니다. 초기코드 import React from "react"; import axios from "axios"; class App extends React.Component { state = { isLoading: true, movies: [], }; getMovies = async () => { const movies = await axios.get("https://yts-proxy.now.sh/list_movies.json"); console.log(movies); }; componentDidMount() { this.getMovies(); ..
