안녕하세요. PSYda 입니다.

본 포스팅은 Nomad Coders 의 "React JS로 웹서비스 만들기"를 통해 학습한 내용을 정리한 것입니다.

이번 포스팅에서는 지금까지 배운 내용을 바탕으로 실제 여기 형태를 가지는 Movie App을 만들어 볼 예정입니다. 세부적으로 알아볼 내용은 아래와 같습니다.

1. API로 부터 Movie 데이터 가져오기

Javascript를 이용해 외부의 데이터를 가지고 오는 방법에는 jquery, fetch, Axios 등의 방법이 있는데, 그 중 Axios를 이용하겠습니다.

1.1 Axios

1) Axios 설치

• cmd(터미널) 창에서 npm i axios 입력

movie_app_2019>npm i axios

2) Axios import

import axios from "axios"

1.2 API(yts) 사용하기

1) Data를 가져올 API URL 정보

• https://yts-proxy.now.sh/list_movies.json

2) Axios를 이용해 Data 가져오기

//App class
  getMovies = async () => {
    const { data: { data: { movies }}} = await axios.get("https://yts-proxy.now.sh/list_movies.json?sort_by=rating");list_movies.json");
  }
  componentDidMount(){
    this.getMovies();
  }

• getMovies 라는 함수를 비동기 방식(async, await)으로 생성
• getMovies 함수에서 movies라는 변수에 가져온 영화 데이터 저장
• movies 라는 데이터는 data 안의 data 안에 있음.
• rending 후에(componentDidMount함수에서) getMovies 함수 실행

2. Movies Rendering

2.1 Movie Component 생성

Movie 데이터를 rendering 하기 위한 Component를 생성합니다.

//Movie.js
import React from "react"
import PropTypes from "prop-types"

function Movie({ id, year, title, summary, poster, genres }) {
  return <h5>{title}</h5>
}

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,
}

export default Movie

1) props 설정

function Movie({id, year, title, summary, poster, genres})

• id, year, title, summary, poster 를 props로 받음

2) title을 rendering

return <h5>{title}</h5>

3) PropTypes를 이용해 props의 type check

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,
}

• id, year 는 숫자형
• title, summary, poster 는 string 형
• genres는 array형

2.2 state 사용

가져온 movies 데이터를 state에 저장합니다.

1) state 생성

//App Class
state = {
  isLoading: true,
  movies: [],
}

• movies : [] 라는 state Object 정의

2) state 저장

//App class
getMovies = async () => {
  const {
    data: {
      data: { movies },
    },
  } = await axios.get(
    "https://yts-proxy.now.sh/list_movies.json?sort_by=rating"
  )
  this.setState({ movies, isLoading: false })
}

• 가져온 데이터(movies) 를 State에 저장
• movies : movies 를 써야하나 위와 같이 movies 형태로 사용 가능

2.3 Rendering

state에 값이 저장되면 rendering 을 시작합니다.

//App class
  render(){
    const { isLoading, movies } = this.state;
    return (
    <div>
      { isLoading ? "Loading..." : movies.map( movie => (
        <Movie
          key={movie.id}
          id={movie.id}
          year={movie.year}
          title={movie.title}
          summary={movie.summary}
          poster={movie.medium_cover_image}
          genres = {movie.genres} />
    )) }</div>);

1) 최초 rendering

• isLoading 은 True 이기 때문에 "Loading..." 을 출력

2)State에 저장

• isLoading 이 False 로 변경됨
• 조건문에 따라 movies.map() 함수가 실행

3) Movie Component를 사용

2.4 동작 확인

3. Movie App Styling

3.1 Movie App 의 구조화

위에서 작성한 Movie App은 단순히 데이터만 들어가 있기 때문에 Style을 입히기 힘듭니다. HTML Tag와 Class를 이용해 구조화 해줌으로서 CSS 파일을 이용해 Styling 할 수 있습니다. 여기서 HTML 의 class 를 JSX에서 사용할 때는 className 을 써야합니다.

위의 Component의 return 부분을 수정하여 구조화 된 형태로 변경하겠습니다.

1) Movie Component의 return 변경

//Movie Component
function Movie({ id, year, title, summary, poster }) {
  return (
    <div className="movie">
      <img src={poster} alt={title} title={title} />
      <div className="movie__data">
        <h3 className="movie__title">{title}</h3>
        <h5 className="movie__year">{year}</h5>
        <ul className="genres">
          {genres.map((genre, index) => (
            <li key={index} className="genres__genre">
              {genre}
            </li>
          ))}
        </ul>
        <p className="movie__summary">{summary}</p>
      </div>
    </div>
  )
}

• genres는 array형태 이기 때문에 map 함수를 이용해 li 태그 생성

2) App Component render함수의 return 변경

//App Component render 함수
 render(){
    const { isLoading, movies } = this.state;
    return (
    <section className ="container">
      { isLoading
      ? <div className = "loader">
        <span className="loader__text">Loading...</span>
        </div>
      :(
        <div className = "movies">
          {movies.map(movie =>
          (
            <Movie
              key = {movie.id}
              id = {movie.id}
              year = {movie.year}
              title = {movie.title}
              summary = {movie.summary}
              poster = {movie.medium_cover_image}
              genres = {movie.genres}
            />
          )
          )
          }
        </div>
      )}
      </section>);
  }

3) 동작 확인

3.2 css 파일로 Movie App Styling

1) css 파일 생성

• Movie.css 파일 생성
• App.css 파일 생성

2) css 파일 import

• Movie.js 에서 상단에 import "./Movie.css" 입력
• App.js 에서 상단에 import "./App.css" 입력

3) css 파일에 Style 내용 입력
입력한 css 내용은 아래 github 에서 참고하실 수 있습니다.

• App.css
• Movie.css

3.3 동작 확인

3.4 기타 작업

위의 결과물을 확인해보면 summary 글자 수의 차이에 따라 영화 소개 박스의 크기가 차이 나는 것을 확인 할 수 있습니다. 이는 slice 라는 함수를 통해 summary 의 글자 수를 고정함으로서 해결할 수 있습니다.

1) slice를 통한 string 의 글자수 고정

//Movie function(component)의 return
<p className="movie__summary">{summary.slice(0, 140)}</p>

2) 최종 결과물 확인

4. Github page 에 Movie App 표시

Github에서 우리가 만든 Movie App을 화면에 표시할 수 있습니다. 이는 온라인 상에서 다른 사람이 우리가 만든 결과물을 볼 수 있음을 의미합니다. 그 방법에 대해 알아보겠습니다.

4.1 gh-pages 설치

Github page 에 표시하기 위해서는 gh-pages를 설치해야합니다.

• cmd(터미널)에서 npm i gh-pages

movie_app_2019>npm i gh-pages

4.2 package.json 수정

1) homepage 설정

//package.json
"homepage":"https://psyssai.github.io/movie_app_2019"

• psyssai 대신 본인의 github ID 입력
• movie_app_2019 대신 본인의 react project 명 입력

2) scripts에 내용 추가

//package.json
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "deploy": "gh-pages -d build",
    "predeploy": "npm run build"
  }

• deploy 와 predeploy 내용 추가

3) movie_app 빌드

• cmd(터미널)에서 npm run build 입력

movie_app_2019>npm run build

4) movie_app을 github page에 발행

• cmd(터미널)에서 npm run deploy" 입력

movie_app_2019>npm run deploy

• scripts에 따라 predeploy(npm run build) 가 먼저 실행됨
• 그 후에 script의 deploy(gh-pages -d build) 가 실행

5) github사이트에서 결과물 확인

• github 사이트 접속

감사합니다.