[캐치카페] 현직자와 함께하는 프로그래밍 2회차 과제 도전기

캐치카페 현직자와 함께하는 프로그래밍 3회차 참석 전 2회차의 과제를 해보았습니다.

 

React를 처음 다루어 보아 구글링하면서 도전해보았습니다.

 

먼저 과제 1번을 해보았습니다.

 

손으로 일일이 클릭해서 넣는건 힘들거같아서 python의 requests를 활용해서 도전해보았습니다.

 

먼저 기존의 API에 어떤 내용들이 담겨있는지 확인해보았습니다.

import requests
import json

url = "http://54.180.149.147:8080/api/team/2/movie"

req = requests.get(url)

json = req.json()

for i in range(len(json)):
    print("제목 : ", json[i]['title'])
    print("장르 : ", json[i]['genres'])
    print("개봉일 : ", json[i]['released'])
    print("")

다른 조원이 추가한 5개의 영화 데이터가 담겨 있는 것을 볼 수 있었습니다.

 

그럼 이제 requests를 활용하여 도전!

params = {
  "title": "테스트영화입니다.",
  "posterUrl": "https://anything-catch.s3.ap-northeast-2.amazonaws.com/gotohome.gif",
  "screeningStatus": "open",
  "advanceRate": 12.34,
  "advanceRateRank": 1,
  "visitorRating": 5.67,
  "expertRating": 5.67,
  "plot": "테스트 줄거리입니다",
  "genres": [
    "스릴러",
    "멜로"
  ],
  "runtime": 120,
  "cast": [
    "배우1",
    "배우2"
  ],
  "released": "2018-01-01",
  "director": "감독이름"
}

requests.post(url, params=params)

오! 일단 return되는 결과는 성공했다는 것 같습니다.

 

그럼 이제 데이터가 잘 들어가 있는지 확인해보겠습니다.

for i in range(len(json)):
    try:
        print("제목 : ", json[i]['title'])
        print("장르 : ", json[i]['genres'])
        print("개봉일 : ", json[i]['released'])
        print("")
    except:
        print("오류!")

방금 requests를 통해 추가한 데이터를 json라이브러리를 통해 접근하여

출력하려고하니 출력이 안되어 json 파일 형식 그대로 보니

데이터가 제대로 들어가지 않는 것을 볼 수 있었습니다.

 

그냥 Swagger UI를 활용해서 추가하기로 했습니다.

잘 추가 되었는지 확인해보니

잘 추가가 된 것을 확인할 수 있었습니다.

이렇게 4개 더 추가해주었습니다.

 

이제 영화 상세페이지에 영화 한편의 정보가 보이게 바꾸어보았습니다.

import React from "react";
import superagent from "superagent";
    
    export default class extends React.Component {
      state = {
        movieDetail: []
      };
    
      componentDidMount = async () => {
        let url = "http://54.180.149.147:8080/api/team/2/movie/5e574381168330138949b572";

        //TODO: 1. 서버에서 데이터 불러오기
        //데이터를 서버에서 불러와서 movieList라는 변수에 저장한다 
        let movieDetail = await superagent
        .get(url)
        .then(response => response.body)
        .catch(error => error);

        //TODO: 2. 브라우저에 임시로 저장하기 (state)
        // this.setState({
        //  ...
        // })
          //불러온 데이터를 브라우저에 임시로 저장한다
        this.setState({
          movieDetail
        });

        console.log(movieDetail)
    
        
      };
    
      render() {
        const { movieDetail } = this.state;
        return (
          <div>
            <h3>영화 상세 페이지</h3>
            <div>상세한 영화에 대한 정보가 노출될 페이지입니다</div>
            {/* TODO: 3. 영화 1개에 대한 데이터 출력하는 코드 짜기 */
            <MovieItem
              title={movieDetail.title}
              posterUrl={movieDetail.posterUrl}
              advanceRate={movieDetail.advanceRate}
              advanceRateRank={movieDetail.advanceRateRank}
            />}
          </div>
        );
      }
    }

    const MovieItem = ({ title, posterUrl, advanceRate, advanceRateRank }) => {
      return (
        <div>
          <h3>{title}</h3>
          {/* <div>포스터 url: {posterUrl}</div> */}
          <img width="300px" src={posterUrl}></img>
          <div>예매율: {advanceRate}</div>
          <div>예매율 순위 : {advanceRateRank}</div>
        </div>
      );
    };

id값을 활용하여 영화의 한편만 볼 수 있도록 설정해보았습니다.

영화 한 편의 데이터만 잘 나오지만

이건 현재 id값을 코드에 직접 써 넣은 코드라 id값을 리스트에서 받아와서 동적으로 데이터를 띄울 수 있도록 바꾸어야 합니다.

 

MovieList.js

import React from "react";
import superagent from "superagent";

export default class extends React.Component {
  state = {
    movieList: []
  };

  // MovieList.js 파일
  componentDidMount = async () => {

    // 데이터를 불러올 API 주소
    let url = "http://54.180.149.147:8080/api/team/2/movie";

        //데이터를 서버에서 불러와서 movieList라는 변수에 저장한다 
    let movieList = await superagent
    .get(url)
    .then(response => response.body)
    .catch(error => error);

        //불러온 데이터를 브라우저에 임시로 저장한다
    this.setState({
    movieList
    });

    console.log("...")

    //TODO : console을 찍어서 확인해봅시다 
    };


  render() {
    const { movieList } = this.state;
    return (
      <div>
        <h3>영화 리스트 리스트</h3>
        <div>영화 리스트가 보여질 화면입니다</div>

        {/* <MovieItem
          title="기생충"
          posterUrl=""
          advanceRate={30.2}
          advanceRateRank={4}
        /> */}

        {movieList
            ? movieList.map(movie => (
                <MovieItem
                title={movie.title}
                posterUrl={movie.posterUrl}
                advanceRate={movie.advanceRate}
                advanceRateRank={movie.advanceRateRank}
                id={movie._id}
                />
        ))
        : null}
      </div>
    );
  }
}

const MovieItem = ({ title, posterUrl, advanceRate, advanceRateRank, id }) => {
  let url = "/movie/detail/" + id;

  return (

    <div>
      {/* <div>포스터 url: {posterUrl}</div> */}
      <a href={url}><h3>{title}</h3></a>
      <a href={url}><img width="150" src={posterUrl}/></a>
      <div>예매율: {advanceRate}</div>
      <div>예매율 순위 : {advanceRateRank}</div>
    </div>
  );
};

 

MovieDetail.js

import React from "react"; 
import superagent from "superagent"; 
export default class extends React.Component { 
  state = { movieDetail: [] }; 
  
  componentDidMount = async () => { 
    let url = "http://54.180.149.147:8080/api/team/2/movie/"+this.props.match.params.id; 
    
    //TODO: 1. 서버에서 데이터 불러오기 
    //데이터를 서버에서 불러와서 movieList라는 변수에 저장한다 
    let movieDetail = await superagent 
    .get(url) 
    .then(response => response.body) 
    .catch(error => error); 
    
    //TODO: 2. 브라우저에 임시로 저장하기 (state) 
    // this.setState({ // ... // }) 
    //불러온 데이터를 브라우저에 임시로 저장한다 
    this.setState({ movieDetail }); 
    console.log(movieDetail) 
  }; 
  
  render() { 
    const { movieDetail } = this.state; 
    
    return ( 
    <div> 
      <h3>영화 상세 페이지</h3> 
      <div>상세한 영화에 대한 정보가 노출될 페이지입니다</div> 
      
      {/* TODO: 3. 영화 1개에 대한 데이터 출력하는 코드 짜기 */ 
      <MovieItem 
      title={movieDetail.title} 
      posterUrl={movieDetail.posterUrl} 
      advanceRate={movieDetail.advanceRate} 
      advanceRateRank={movieDetail.advanceRateRank} 
      />} 
      </div> 
      ); 
    } 
  } 
  const MovieItem = ({ title, posterUrl, advanceRate, advanceRateRank }) => { 
    return (
      <div>
      <h3>{title}</h3>
      <img width="300" src={posterUrl}/>
      <div>예매율: {advanceRate}</div> 
      <div>예매율 순위 : {advanceRateRank}</div> 
      </div> 
    ); 
  };

 

같은 조원 분들의 도움으로 성공하였습니다.

 

3회차 강의를 들으면서 더 공부해보려고합니다.

 

SOMJANG/catch_program_react