TIL

🙃 감상

소스코드 보면서 세 번씩 확인한 코드가 왜 에러가 나는 걸까? 근데 또 복사+붙여넣기 하면 언제 그랬냐는 듯 잘 작동한다...근데 거기서 내가 단 한 줄만 고쳐도 다시 에러가 난다...

📙 열품타 4hour
👍🏼 깃허브 커밋, velog 작성
👎🏼 공부 시간 부족, 공부하다 짜증낸 것

🚀 목표

• 노마드코더 "ReactJS로 영화 웹 서비스 만들기" 100% 수강 (80%)
• 수강 후 복기하기
• Udemy에서 Javascript 강좌 수강하기
• 개발자 유튜브 통해서 공부 방향 및 팁 배우기
• github 만들고 git push 해보기(완료)

복습법:
1) 소스코드 페이지 댓글과 강의 댓글 같이 보기
2) 같은 서비스 만들어보기

강의 링크:
https://nomadcoders.co/react-fundamentals/lobby
react component:
https://reactjs.org/docs/react-component.html

📣 React Js로 영화 웹 서비스 만들기: 3.2-4.1

3.2 Component Life Cycle

component는 life cycle method를 가진다.
life cycle method: react가 component를 생성하고 없애는 방법
component가 render된 후 호출되는 다른 function들이 있다

Mounting, Updating, Unmounting

[자주 쓰이는 react component]
constructor()
render()
componentDidMount()

setState 호출 -> component 호출 -> render 호출 -> componentDidUpdate 실행

• 이 부분 정확하게 이해해보기

componentWillUnmount()

3.3 Planning the Movie Component

[6초 지나서 로딩 완료 메시지 띄우기]

import React from "react";

class App extends React.Component{
  state = {
    isLoading: true
  };
  componentDidMount(){
    setTimeout (() => {
      this.setState({isLoading: false}); 
    }, 6000);
  }
  render() {
    const {isLoading}=this.state;
    return <div>{isLoading ? "Loading..." : "We are ready!"}</div>;
  }
}

export default App;

4.0 Fetching Movies from API

componentDidMount에서 data fetch하기
axios는 fetch 위에 있는 작은 레이어
yts API

npm i gh-pages

[async와 await 활용하기]

import React from "react";
import axios from "axios";

class App extends React.Component{
  state = {
    isLoading: true,
    movies: []
  };
  getMovies = async() => {
    const moives = await axios.get("https://yts.mx/api/v2/list_movies.json");
  }
  componentDidMount(){
    this.getMovies();
  }
  render() {
    const {isLoading}=this.state;
    return <div>{isLoading ? "Loading..." : "We are ready!"}</div>;
  }
}

export default App;

4.1 Rendering the Movies

[data fetch 후 render하기]

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: { moives }
      }
    }
      = await axios.get("https://yts-proxy.now.sh/list_movies.json?sort_by=rating");
    this.setState({ movies, isLoading: false });
  };
  componentDidMount() {
    this.getMovies();
  }
  render() {
    const { isLoading, moives } = this.state;
    return (
      <div>
        {isLoading
          ? "Loading..."
          : moives.map(movie => (
            <Movie
              key={movie.id}
              id={movie.id}
              year={movie.year}
              title={movie.title}
              summary={movie.summary}
              poster={movie.medium_cover_image}
            />
          ))}
      </div>
    );
  }
}

export default App;