#4.3 Adding Genres 이번시간에는 영화의 장르를 추가해볼 것이다. Movie.propTypes = { id : PropTypes.number.isRequired, year: PropTypes.number.isRequired, title: PropTypes.string.isRequired, summary: PropTypes.string.isRequired, poster: PropTypes.string.isRequired, genres: PropTypes.arrayOf(PropTypes.string).isRequired }; ✅Movie.js 다음과 같이 Movie.propTypes에 genres 도 추가해준다. {movies.map((movie) => ( ))} ✅ App.js 그리고 App...

#4.2 Styling the Movies 🍺 이번 시간에는 코드를 좀 예쁘게 바꿔볼 것이다. 🍺 HTML 작업하기 import React from "react"; import axios from "axios"; import Movie from "./Movie"; class App extends React.Component{ state = { isLoading: true, movies: [] }; getMovies = async () => { const {data: {data: {movies}}} = await axios.get("https://yts-proxy.now.sh/list_movies.json?sort_by=rating"); this.setState({movies, isLoading: fals..

#4.1 Rendering the Movies 🧸 이번 시간에는 지난시간에 가져온 API의 data를 가지고 render를 해볼 것이다. 지난 시간까지 우리는 API에서 data를 가져왔다. console.log로 데이터를 보자, 우리가 뭘 가져왔는지 보자. console.log(movies)로 확인해본다. 우리가 원하는 것은 movies 안의 data 안에 data 안에 movies 라는 것이다. getMovies = async () => { const movies = await axios.get("https://yts-proxy.now.sh/list_movies.json"); console.log(movies.data.data.movies); } 이렇게 콘솔을 찍으면 영화 20편의 데이터가 콘솔에 출..

#4.0 Fetching Movies from API 🌼 이번시간에는 axios를 이용해서 API로부터 데이터를 fetch해올 것이다. 일반적으로 사람들이 자바스크립트에서 데이터를 fetch하는 방법은 fetch를 사용하는 것이다. 니콜라스는 fetch를 좋아하지는 않는다. 왜냐하면 더 좋은 방법이 있기 때문이다. Axios를 사용할 것이다. Axios는 니콜라스가 많이 사용했고 좋아한다. axios가 어떻게 동작하는지 궁금하다면, 이건 매우 쉽다. axios는 마치 fetch 위에 있는 작은 layer 이다. axios 설치 : npm install axios 🌼YTS의 API를 이용하기 우리가 쓸 API에 대해서 이야기하겠다. 우리는 YTS에서 만든 API를 사용할 것이다. 불법적인 토렌트 영화를 업..

#3.3 Planning the Movie Component 🧁 이번시간에는 우리 Movie App의 컴포넌트를 계획해볼 것이다. 우선 어플리케이션을 mount하자마자(mount: 컴포넌트가 생겨나는 것) state에 isLoading 변수를 true라고 선언해준 후, render에서 div 코드 안에 isLoading이 true라면 "Loading…"을, isLoading이 false라면 "We are ready"를 표시하도록 작성해준다. 원래는 this.state.isLoading이라고 적어주어야 하지만 ES6 문법을 통해 저렇게 적어주었다! import React from "react"; import PropTypes from "prop-types"; class App extends React.Co..

#3.2 Component Life Cycle 🍑 이번 시간에는 리액트 컴포넌트의 life cycle 메소드에 대해서 알아보겠다. 현재 우리는 리액트 컴포넌트에서 제공하는 메소드 중에서 render 메소드만 사용하고 있다. 그런데 사실 리액트 컴포넌트는 단순히 render 말고 더 많은 걸 가지고 있다. 이들은 life cycle 메소드를 가지는데, life cycle 메소드는 기본적으로 리액트가 컴포넌트를 생성하는 그리고 없애는 방법이다. 컴포넌트가 생성될 때 render 전에 호출되는 몇 가지 function이 있다. 컴포넌트가 render 된 후 호출되는 function 들이 존재한다. 예를 들면 우리가 add 함수를 통해 +1 +1 +1을 할 때 , 컴포넌트가 업데이트 될 때 호출되는 다른 함수가..