[영화 웹] #7.3 Movie App~

WEB/React

[영화 웹] #7.3 Movie App~

Harimad 2022. 1. 31. 17:23

노마더코드 깃 히스토리: https://github.com/nomadcoders/react-for-beginners/commits/master

REST API 리소스 샘플을 제공하는 https://jsonplaceholder.typicode.com/posts

fetch, async/await 참고블로그: https://chanhuiseok.github.io/posts/js-6/

JavaScript - 자바스크립트 fetch와 async/await

컴퓨터/IT/알고리즘 정리 블로그

chanhuiseok.github.io

#7.3 Movie App Part One

//App.js
import { useEffect, useState } from 'react';

function App() {
  const [loading, setLoading] = useState(true);
  const [movies, setMovies] = useState([]);

  const getMovies = async function () {
    const response = await fetch(`https://yts.mx/api/v2/list_movies.json?minimum_rating=8.8&sort_by=year`);
    const json = await response.json();

    setMovies(json.data.movies);
    setLoading(false);
  };

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

  return (
    <div>
      {loading ? (
        <h1>Loading... </h1>
      ) : (
        <div>
          (
          <div>
            {movies.map(movie => (
              <div key={movie.id}>
                <img src={movie.medium_cover_image} />
                <h2>{movie.title}</h2>
                <p>{movie.summary}</p>
                {movie.hasOwnProperty('genres') ? (
                  <ul>
                    {movie.genres.map(g => (
                      <li key={g}>{g}</li>
                    ))}
                  </ul>
                ) : null}
              </div>
            ))}
          </div>
          )
        </div>
      )}
    </div>
  );
}

export default App;

#7.4 Movie App Part Two

폴더 생성 현황

src 폴더
- App.js -> route 전체를 rendering 할예정
- components 폴더
  - movie.js -> 영화 하나만 보여줌
- routes 폴더
  - Detail.js -> 상세 페이지 보여줌
  - Home.js -> 모든 영화를 보여줌

MyGitCode: https://github.com/Harimad/Nomad_React_GIT/commit/cb5fbea7e72dbb5932e5a218c5d24f58142b8d3b#diff-612fa02ec79c8c5ba491150ed5d97154b81d9e9373edc52ba1a382359fb97ee1

#7.5 React Router

react-router-dom

npm i react-router-dom@5.3.0
https://v5.reactrouter.com/web/guides/quick-start

react-router-dom 버전5->버전6 달라진 점

Switch컴포넌트가 사라지고 -> Routes컴포넌트로 대체
Route컴포넌트 사이에 자식 컴포넌트를 넣지 않고 -> element prop에 자식 컴포넌트를 할당
HashRouter사용했을 때, 경로가 겹치는 문제가 발생해서 BrowserRouter로 진행

react-router-dom v6: https://reactrouter.com/docs/en/v6/getting-started/overview

MyGitCode: https://github.com/Harimad/Nomad_React_GIT/commit/d2028be741a0e3c49e82fa1621a00a97b3778df1#diff-612fa02ec79c8c5ba491150ed5d97154b81d9e9373edc52ba1a382359fb97ee1

#7.6 Parameters (useParams)

적용순서

1. App 컴포넌트 - <Route path="movie/:id">로 설정해준다

2. Home 컴포넌트 - Movie 컴포넌트에 id값도 인자로 넘겨준다.

3. Movie 컴포넌트 - 인자값으로 id를 넘겨받고 <Link to={`/movie/${id}`}><Link> 링크경로를 설정한다.

4. Detail 컴포넌트 - react-router-dom에서 useParams 함수를 사용해서, const { id } = useParams();로 값을 받고, 인자를 사용한다. ex) fetch(`URL ${id}`)

내 깃 코드:

https://github.com/Harimad/Nomad_React_GIT/commit/be253732fd39f184e52cedfa6daf998b416d3ff2#diff-38eb1e9f06d567396fb615cc3fce91daccafebc020245847aeccc39ac779246a

영상대로 컴파일을 해보니 React Hook useEffect has a missing dependency: 'getMovieDetail'. Either include it or remove the dependency array react-hooks/exhaustive-deps 이런 경고가 계속 떠서 useCallback으로 해결했다.

아래는 해결을 위한 참고 링크

React.js - exhaustive-deps-warning, react, react-hook

kyounghwan01.github.io

내 깃 코드: https://github.com/Harimad/Nomad_React_GIT/commit/2fac7a2cb1bb652087bdd1ca0096184642542135#diff-38eb1e9f06d567396fb615cc3fce91daccafebc020245847aeccc39ac779246a

#7.7 Publishing

1. npm i gh-pages : 결과물을 github pages에 업로드 할 수 있게 만드는 패키지

2. "homepage": "http://Harimad.github.io/movieWeb" 추가

3. package.json 에서 scripts 부분을 수정한다.

"deploy": "gh-pages -d build", build폴더를 "homepage"에 업로드

"predeploy": "npm run build" 추가

build는 production ready code 이다. (npm run build)

4. npm run deploy를 하면 predeploy가 먼저 실행된다

5. predeploy가 run build를 해주고 build는 gh-pages -d build (build 디렉토리를 패키지로 만듬)

참고: https://blog.naver.com/nanotoly/222574122781

github.io 가 동작 안 함 / github.io not working / not showing / github.io 흰 화면만 출력 될 때 해결 방법

안녕하세요! react와 npm 을 이용해 build 한 페이지를 github.io에 배포를 하려고 하니 잘 동작하지 않았...

blog.naver.com

https://dev-yakuza.posstree.com/ko/react/github-pages/

[React] GitHub Pages에 배포

create-react-app으로 만든 React 프로젝트를 GitHub Pages에 배포해 보도록 합시다.

dev-yakuza.posstree.com

깃 개인 페이지에 404 에러가 떴을때?

1. npm run deploy 시 아래 에러가 뜬다.
A branch named 'gh-pages' already exists.

=> rm -rf node_modules/gh-pages/.cache 명령
다시 npm run deploy 시도

2. React router 6버전으로 진행시 gh-pages로 배포 후, 빈 화면이 나온다면?
Route컴포넌트의 path경로 앞에 process.env.PUBLIC_URL을 추가해서 수정을 해주면 된다.

```
Route path={`${process.env.PUBLIC_URL}/`} element={Home}
```
element Home은 <>로 감싸줘야한다.

드디어 내 CRA 프로젝트를 깃에 배포했다!

https://harimad.github.io/Nomad_React_GIT/