자 그럼 우리의 코드를 cloud에올려보자. 아래의 명령어로 gh-pages를 설치해보자. npm i gh-pages gh-pages는 github에서 나의 project이름을 가져오는 식이다~! 그래서 아래 명령어로 project name을 가져오자 git remote -v origin https://github.com/ddo0ii/movie_app_2019_nomadcoders.git (fetch) origin https://github.com/ddo0ii/movie_app_2019_nomadcoders.git (push) project name을 보니 movie_app_2019_nomadcoders 이다! 그리고 나의 usename은 ddo0ii package.json으로이동하여 homepage를 ..

화면에 나타나는 description을 slice로 ... 처리하였다. 아래에 css들을 수정하였다. Movie.js import React from "react"; import PropTypes from "prop-types"; import "./Movie.css"; function Movie({ year, title, summary, poster, genres }) { return ( {title} {year} {genres.map((genre, index) => ( {genre} ))} {summary.slice(0, 180)}... ); } Movie.propTypes = { id: PropTypes.number.isRequired, year: PropTypes.number.isRequired, ..

다음과 같이 스타일을 입혀보자. Movie.js import React from "react"; import PropTypes from "prop-types"; import "./Movie.css"; function Movie({ year, title, summary, poster, genres }) { return ( {title} {year} {genres.map((genre, index) => ( {genre} ))} {summary} ); } Movie.propTypes = { id: PropTypes.number.isRequired, year: PropTypes.number.isRequired, title: PropTypes.string.isRequired, summary: PropTypes.s..

우선 장르를 더해보자 Movie.js App.js 근데 다음과 같은 에러가 난다. react에서는 className을 써야하는데! HTML에서는 class를 써도된다. 그래서 아래와 같이 바꿔주자. 장르는 다음과 같이 더해주자. 그럼 다음과 같이 정상적으로 더해지지만 key prop을 더해주라는 알림이 뜬다. map function은 또다른 argument를 우리에게 준다. 하나의 현재의 item, 다른하나는 item number(index, number, current 등 뭐든 가능)이다! 그럼 다음과 같이 나타나게 된다. 그래서 대신에 이렇게 추가하자! 그럼 conosle에 더이상 error가 나타나지 않는다.

자 그럼 HTML, CSS를 입혀보자. Movie.js import React from "react"; import PropTypes from "prop-types"; function Movie({ year, title, summary, poster }) { return ( {title} {year} {summary} ); } Movie.propTypes = { id: PropTypes.number.isRequired, year: PropTypes.number.isRequired, title: PropTypes.string.isRequired, summary: PropTypes.string.isRequired, poster: PropTypes.string.isRequired, }; export defau..

다음과 같이 한번 console로 찍어보자. 그럼 다음과 같이 결과값이 나오게 된다. 그래서 다음과 같이 찍어준다면 다음과 같이 출력되는 것을 볼수 있다. 다음과 같이 하면 우리는 단축도 할 수 있다. 그래도 정상적으로 출력되는 것을 볼 수 있다. 그럼 이 movies안에 state를 넣어볼까? 근데 다음을 다음과 같이 변경해서 써도 된다. 자 그럼 isLoading도 바꿔주자~! 그럼 Loading...에서 We are ready로 바뀐다~! 자 그럼 Movies.js라는 새로운 파일을 만들어보자. 실제로 movies를 render해보자~! Movie.js import React from "react"; import PropTypes from "prop-types"; function Movie({ id..