1
2
3
4
1. create-react-app <projectName>
2. cd projectName
3. yarn start
 
cs


프로젝트를 생성하자 


App.js


(당일로 조회하면 데이터가 없다 그래서 하루 전 데이터를 조회하기위해 getData -1)을 했다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
import React, { Component } from "react";
import "./App.css";
import Movie from "./Movie";
 
const key = "발급받은 키";
 
const getDate = new Date();
const yDate = getDate.getTime(1 * 24 * 60 * 60 * 1000);
getDate.setTime(yDate);
var yYear = getDate.getFullYear();
var yMonth = getDate.getMonth() + 1;
var yDay = getDate.getDate() - 1;
 
if (yMonth < 10) {
  yMonth = "0" + yMonth;
}
if (yDay < 10) {
  yDay = "0" + yDay;
}
const resultDate = yYear + "-" + yMonth + "-" + yDay;
 
const res = resultDate.slice(010).replace(/-/g, "");
 
class App extends Component {
  state = {};
 
  componentDidMount() {
    this._getMovies();
  }
 
  _renderMovies = () => {
    const movies = this.state.movies.map((dailyBoxOfficeList, index) => {
      return (
        <Movie
          rank={dailyBoxOfficeList.rank}
          movieNm={dailyBoxOfficeList.movieNm}
          key={index}
        />
      );
    });
    return movies;
  };
 
  _getMovies = async () => {
    const movies = await this._callApi();
    this.setState({
      movies
    });
  };
 
  _callApi = () => {
    return fetch(
      `http://www.kobis.or.kr/kobisopenapi/webservice/rest/boxoffice/searchDailyBoxOfficeList.json?key=${key}&targetDt=${res}&itemPerPage=10`
    )
      .then(a => a.json())
      .then(json => json.boxOfficeResult.dailyBoxOfficeList)
      .catch(err => console.log(err));
  };
 
  render() {
    const { movies } = this.state;
    return (
      <div className={movies ? "App" : "App-loading"}>
        {movies ? this._renderMovies() : "로딩중 ..."}
      </div>
    );
  }
}
 
export default App;
 
cs



Movie.js


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
import React, { Component } from "react";
import PropTypes from "prop-types";
import "./Movie.css";
 
function Movie({ rank, movieNm }) {
  return (
    <div className="Movie">
      <h1>
        {rank}위:{movieNm}
      </h1>
    </div>
  );
}
 
Movie.propTypes = {
  rank: PropTypes.string.isRequired,
  movieNm: PropTypes.string.isRequired
};
 
export default Movie;
 
cs



  {movies ? this._renderMovies() : "로딩중 ..."}


데이터가 있으면 보여주고 그렇지 않으면 로딩중이라고 처리를 한다.




순위랑 영화이름만 가져왔는데 추가로 


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
                "rnum""1",
                "rank""1",
                "rankInten""0",
                "rankOldAndNew""OLD",
                "movieCd""20180290",
                "movieNm""아쿠아맨",
                "openDt""2018-12-19",
                "salesAmt""3482471050",
                "salesShare""33.8",
                "salesInten""1154445750",
                "salesChange""49.6",
                "salesAcc""33936773431",
                "audiCnt""384114",
                "audiInten""96420",
                "audiChange""33.5",
                "audiAcc""3875972",
                "scrnCnt""1158",
                "showCnt""4594"
cs


더 많은 데이터를 제공하니 수정해서 연습해봐야겠다.~


그리고 극한직업? 재밌나보다 보러가야겠다~ 



우선 

http://www.kobis.or.kr/kobisopenapi/homepg/user/openLogin.do


키를 발급받아야한다. 회원가입 후 키를 발급받자






Postman으로 json데이터를 확인해보자 


발급받은 키를 넣고 조회날, 몇위까지 표시할것인지,(최대 10개)





일별 박스오피스 데이터를 JSON으로 잘 가져온다  ㅎㅎ


다음에는 리액트로 데이터를 가져와서 뿌려보자







+ Recent posts