7.3부터 영화 웹 서비스

[영화 웹 서비스 프로젝트]

- 영화를 보여줌

- 영화들에 대한 정보 보여줌 + 링크

 

앱 안에서 페이지를 전환하는 방법

 

 

async-await

useEffect (() => {
    fetch(
      `https://yts.mx/api/v2/list_movies.json?minimum_rating=9&sort_by=year`
    )
    .then((response) => response.json())
    .then((json) => {
      setMovies(json.data.movies);
      setLoading(false);
    });
  }, []);

 

 

  const getMovies = async() => {
    const json = await (
      await fetch(
      `https://yts.mx/api/v2/list_movies.json?minimum_rating=9&sort_by=year`
      )
    ).json();
    setMovies(json.data.movies);
    setLoading(false);
  };

  useEffect (() => {
    getMovies()
  }, []);

 

 

React Router

1. npm install react-router-dom

(npm i react-router-dom@5.3.0)

 

2. import{ BrowserRouter as Router, Switch, Route } from "react-router-dom";

 

3. <Router> </Router> 렌더링

그안에 <Switch> </Switch> -> 한번에 하나만 렌더링 하기 위해서

그안에 <Route path=""><함수 /></Route>

 

4. Route 내 이동

*a href를 사용해도 되지만, 모든 페이지가 재실행된다

*reactjs를 사용해서 재실행 하는 것을 피하고 싶기 때문

 

5. <Link to="" ></Link>

Link는 브라우저 새로고침 없이도 유저를 다른 페이지로 이동시켜주는 컴포넌트

import {Link} from  "react-router-dom";

 

react-router는 동적 url을 지원한다

- '동적'이란 의미는 url에 '변수'를 넣을 수 있다는 것

<Route path="/movie/:id">
	<Detail />
</Route>

 

6. react-router에서 사용하는 url에 있는 값을 반환해주는 함수

import { useParams } from "react-router-dom";

 

 

7.7 Publishing

1. npm i gh-pages

github pages에 업로드 할 수 있게 해주는 패키지

github pages는 github에서 제공하는 무료 서비스, html/js/css를 올리면 웹사이트로 만들어서 전세계에 무료로 배포해준다

 

2. package.json에 있는 scripts 확인

"build" -> script를 실행하면 웹 사이트의 production ready code 생성 ( npm run build)

-  production ready code :  코드가 압축되고 모든게 최적화 된다는 의미

 

3. npm run build

'build'라는 새로운 폴더가 생긴다

 

4. package.json 에서 

마지막 줄에서

, "homepage" : "https://githubusername.github.io/github repository"를 적는다.

 

5. package.json에서

"scripts" : {

    "deploy" :  "gh-pages -d build"

    "predeploy" : "npm run build"

},

 

6. npm run deploy

하면 자동으로 predeploy 실행

predeploy가 npm run build -> build가 react-scripts build 실행

gh-pages -d build가 실행됨

 

 

*git remote -v를 통해서 내 repository의 이름 확인 가능

github pages에 push