[캐치카페] 현직자와 함께하는 프로그래밍 4회차 후기

[캐치카페] 현직자와 함께하는 프로그래밍 3회차 과제 도전기 - 2 (영화 상세정보 페이지 꾸미기)

지난 3회차 이후 과제를 하고 4회차 프로그램에 참석하였습니다.

 

먼저 각 조별로 각자 해온 과제를 발표하는 시간을 가졌습니다.

 

코로나로 인해 참석한 사람이 많이 없어보였습니다.

 

발표를 하는 동안 멘토님께서 각조에서 과제를 하면서 각자 어려웠던 점들에 대해서 정리하고 답변을 해주셨습니다.

 

공통적으로 어려웠던 점은 크게 세 가지가 있었습니다.

 

1. 배우 목록을 출력할때 , (콤마)를 출력하기 어려웠다.

2. ready, finished, open 이 세가지를 상영 예정, 상영 종료, 상영 중과 같이 한글로 바꾸어 출력하고 싶다.

3. 개봉일을 2019년 10월 30일 처럼 출력하고 싶다.

 

1번은 css에서 .className:after { } 방법으로 해결할 수 있다고 했습니다.

적용을 해보았습니다.

 

Style.css

.span_class:nth-child(1)::after {
    content: ',';
}

MovieDetail.js

<h3>배우 : {casts? casts.map(cast => <span className="span_class">{cast}    </span>):null}</h3>

 

2번은 제가했던 방법은 if로 비교해서 넣어주는 방법이었습니다.

if (movieDetail.screeningStatus === "open"){
      movieDetail.screeningStatus = "상영중";
}
else if (movieDetail.screeningStatus === "finished"){
      movieDetail.screeningStatus = "상영 종료";
}
else if (movieDetail.screeningStatus === "ready"){
      movieDetail.screeningStatus = "상영 예정";
}

 

3번은 moment를 사용하면 된다고 하였습니다.

먼저 superagent를 설치했을때 처럼 다음 명령어를 활용해서 설치해줍니다.

yarn add moment

그다음 MovieDeatil.js에서 수정해주었습니다.

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

var moment = require("moment");

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); 

    if (movieDetail.screeningStatus === "open"){
      movieDetail.screeningStatus = "상영중";
    }
    else if (movieDetail.screeningStatus === "finished"){
        movieDetail.screeningStatus = "상영 종료";
    }
    if (movieDetail.screeningStatus === "ready"){
        movieDetail.screeningStatus = "상영 예정";
    }

    movieDetail.released = moment(movieDetail.released).format("YYYY-MM-DD")
    
    // string date_time = DateTime.Now.ToString("yyyy-MM-dd");
    
    //TODO: 2. 브라우저에 임시로 저장하기 (state) 
    // this.setState({ // ... // }) 
    //불러온 데이터를 브라우저에 임시로 저장한다 
    this.setState({ movieDetail }); 
    console.log(movieDetail) 

    
  }; 

var moment = require("moment");

movieDetail.released = moment(movieDetail.released).format("YYYY-MM-DD")

4회차 까지 수강 이후 결과물

이후에는 잠시 쉬는 시간을 가지고 4회차 시작 전 멘토님이 수집한 질문들에 대한 답변을 준비하여 알려주셨습니다.

 

원래는 21시까지이지만 21시 30분이 넘는 시간까지 정말 열정적으로 하나하나 질문에 대해서 답변을 해주셨습니다.

 

코로나 사태에도 불구하고 교육을 끝까지 책임지고 잘 진행해주신 멘토님 두분께 정말 감사의 말씀을 드리고 싶습니다.

 

덕분에 react가 어떤 것인지 말만 듣다가 직접 해볼 수 있어서 좋았습니다.

 

다음에는 Rest API관련해서 교육이 있다면 들어보고 싶습니다.

 

여기서 했던 react 프로젝트는 시간날때 더 예쁘게 꾸며보려고합니다.

 

읽어주셔서 감사합니다!

출처 : 캐치 홈페이지

SOMJANG/catch_program_react