[#4] 넷플릭스 클론코딩.ZIP | 트레일러 삽입, 최종 배포 | With React.js

이제 넷플릭스 영화 트레일러 팝업을 넣어보려고 한다. 먼저 터미널에 아래에 있는 두 개의 명령어를 입력해서 패키지를 설치한다.

 

npm i react-youtube

npm i movie-trailer

 

이제 영화 트레일러를 유튜브에서 불러올 수 있다. 역시나 얘기가 길어져서 간단한 설명은 주석 처리로 했다.

 

[Row.js]

 

import React, { useState, useEffect, } from "react";
import axios from "./axios";
import "./Row.css"
import YouTube from "react-youtube";
import movieTrailer from "movie-trailer";

const base_url = "https://image.tmdb.org/t/p/original/";

function Row({ title, fetchUrl, isLargeRow }) {
  const [movies, setMovies] = useState([]);
  const [trailerUrl, setTrailerUrl] = useState("");

  useEffect(() => {

    async function fetchData() {
      const request = await axios.get(fetchUrl);

      setMovies(request.data.results);
      return request;
    }
    fetchData();
  }, [fetchUrl]);
  // [fetchUrl]은 useEffect에게 block 밖에 있는 variable를 쓰고있다고 알려준다

  console.table(movies);

  const opts = {
    height: "390",
    width: "100%",
    playerVars: {
      // https://developers.google.com/youtube/player_parameters
      autoplay: 1,
    }
  }

  const handleClick = (movie) => {
    if (trailerUrl) {
      setTrailerUrl('');
    } else {
      movieTrailer(movie?.name || "")
        .then(url => {
          // https://www.youtube.com/watch?v=XtMThy8QKqU
          // <XtMThy8QKqU> 이 부분은 video ID
          // https://www.youtube.com/watch?v=XtMThy8QKqU&banana=5
          // urlParams.get('banana'); 하면 '5'라는 value를 준다. 고로 'v' 하면 video ID 부분 반환.
          const urlParams = new URLSearchParams(new URL(url).search);
          setTrailerUrl(urlParams.get("v"));
        }).catch((error) => console.log(error)); // 해당 영상을 찾지 못하면 error 송출
    }
  }

  return (
    <div className="row">
      <h2>{title}</h2>

      <div className="row__posters">
        {movies.map((movie) => (
          <img
            key={movie.id}
            onClick={() => handleClick(movie)}
            className={`row__poster ${isLargeRow && "row__posterLarge"}`}
            src={`${base_url}${isLargeRow ? movie.poster_path : movie.backdrop_path}`}
            alt={movie.name}
          />
        ))}
      </div>
      {trailerUrl && <YouTube videoId={trailerUrl} opts={opts} />}
    </div>
  );
}

export default Row

 

이렇게 해서 넷플릭스 오리지널 포스터를 클릭하면 영화 트레일러가 자동으로 재생된다.

 

 

이제 firebase에 앱을 배포하고 호스팅을 하는 법과 함께 마치겠다.

 

먼저 터미널에 명령어를 입력해서 firebase에 로그인을 해야한다.

 

firebase login

 

근데 에러가 났다. (이 시스템에서 스크립트를 실행할 수 없으므로 파일을 로드할 수 없습니다. 자세한 내용은about_Execution_Policies(https://go.microsoft.com/fwlink/?LinkID=135170)를 참조하십시오)

 

[firebase login 에러 해결 방법]

 

1. Windows PowerShell을 관리자 권한으로 실행한다.

2. Get-ExecutionPolicy 명령어 작성한다.

3. Restriceted 상태라면 Set-ExecutionPolicy RemoteSigned 명령어 작성하고 예(Y) 선택한다.

4. 다시 한 번 Get-ExecutionPolicy 명령어 작성하고 RemoteSigned 상태로 변경된 것을 확인한다.

 

 

이제 다시 firebase login 명령어를 입력한다.

 

 

저 질문이 나오면 Y를 입력한다.

 

firebase 로그인에 성공했다!

 

다시 터미널창에 아래 명령어를 입력한다.

 

firebase init

 

 

firebase init을 입력하고 나온 질문에서 Y를 선택한다.

 

 

방향키를 이용하여 Hosting으로 내려가서 엔터를 누른다. 그 이후로 나오는 모든 질문에 Y를 누르면 된다.

마지막으로 아래 명령어를 입력해준다.

 

npm run build

firebase deploy

 

이렇게하면 deploy까지 끝! 이고 firebase에서 내가 만든 사이트를 모든 사람들이 확인할 수 있는데 .. 내 컴퓨터에서는 계속 오류가 난다. 오류가 해결되면 글 하단에 링크를 추가하겠다.