[Chapter 5]Netflixアプリケーションの作成を開始

作成するNetfilxアプリケーションの説明

Netflixサイトの宝江を構築

Create-React-APPによる応答

npx create-react-app ./ 

彼に反応器を取り付ける

Movie DB API Keyの作成

映画情報を取得するAPIです

https://www.themoviedb.org/?language=ko
ここにAPIキーを取りに行きます

apiをここに置いて、欲しいものを持ってきてください.
画像は同じように持ってきます.

TheMovie DB APIリクエストのAxiosインスタンスを作成し、リクエストを送信

Axiosは?

ブラウザ、HTTP非同期通信ライブラリ

、Promise APIを利用してノードジェス
Ajaxと組み合わせて使用し、

のバックエンドとフロントエンドとの通信を容易にする

Axiosの使い方

モジュールのインストール:npm install axios--save

axios.get("https://api.themoviedb.org/3/trending/all/week" )

なぜInstanceなのか

重複入力防止

インスタンスの作成順序

インスタンスを作成するフォルダファイルapを作成します.

axios.jsファイル

の作成

import axios from "axios";

const instance = axios.create({
    baseURL: "https://api.themoviedb.org/3/",
    params:{
        api_key:"b1e1a6c6195bd0f36adddb589e1bde7d",
        language:"ko-KR",
    },
});

export default instance; //이 파일 밖에서도 사용가능하게 함 

request.js

const requests={
    fetchNowPlaying: "movie/now_playing",
    fetchNetflixOriginals:"/discover/tv?with_networks=213",
    fetchTrending:"/trending/all/week",
    fetchTopRated:"/movie/top_rated",
    fetchActionMovies:"/discover/movie?with_genres=28",
    fetchComedyMovies:"/discover/movie?with_genres=35",
    fetchHorroryMovies:"/discover/movie?with_genres=27",
    fetchRomanceMovies:"/discover/movie?with_genres=10749",
    fetchDocumentaries:"/discover/movie?with_genres=99",
}

export default requests; //다른파일에도 사용 가능하게 하기 

ネットワーク全体のアプリケーション構造の作成

このようにしてファイルを作成

ファイル作成完了!

ナビゲーションバー構成部品の作成

Nav.jsの作成

import React from 'react';
import "./Nav.css"

export default function Nav() {
  return <nav className='nav'>
      <img
       alt="Netflix logo"
       src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/08/Netflix_2015_logo.svg/2880px-Netflix_2015_logo.svg.png"
       className='nav__logo'
       onClick={()=>window.location.reload()}
       />
       <img
       alt="User logged"
       src="https://ih0.redbubble.net/image.618427277.3222/flat,1000x1000,075,f.u2.jpg"
       className='nav__avater'
       >
       </img>
  </nav>
}

ナビゲーションバーの表示

App.jsの作成

import './App.css';
import Nav from "./components/Nav";

function App() {
  return (
    <div className="App">
      {/* nav컴포넌트 가져오기 */}
      <Nav /> 
    </div>
  );
}

export default App;

ネフを持ってきなさい

Nav.cssの作成

.nav{
    position: fixed;
    top: 0;
    width: 100%;
    height: 30px;
    z-index: 1;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition-timing-function: ease-in;
    transition: all 0.5s;
}

.nav__black{
    background-color: #111;
}

.nav__logo{
    position: fixed;
    left: 40px;
    width: 80px;
    object-fit: contain;
}

.nav__avater{
    position: fixed;
    right: 40px;
    width: 30px;
    object-fit: contain;
}

不思議なSISワールド...

スクロール時のNavBar色の変更

Nav.js

import React,{useState,useEffect} from 'react';
import "./Nav.css"

export default function Nav() {
    const [show,setShow] = useState(false);
    useEffect(() => {
      window.addEventListener("scroll",()=>{
          if(window.scrollY>50){ //스크롤시 함수 확인 
            //스ㅡ롤 와이는 -> 얼마나 내린지 알려준다
              setShow(true); // 쇼가 트룰일때 클래스추가 
          }else{
              setShow(false); 
          }
      })
    
      return () => {
        window.removeEventListener("scroll",()=>{})
      }
    }, [])
    

// 만약 쇼가 트루일때 네브블랙클래스 주기
  return <nav className={`nav ${show && "nav__black"}`}> 
      <img
       alt="Netflix logo"
       src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/08/Netflix_2015_logo.svg/2880px-Netflix_2015_logo.svg.png"
       className='nav__logo'
       onClick={()=>window.location.reload()}
       />
       <img
       alt="User logged"
       src="https://ih0.redbubble.net/image.618427277.3222/flat,1000x1000,075,f.u2.jpg"
       className='nav__avater'
       >
       </img>
  </nav>
}

setShowがscrollyであるか否かをuserEffectで判断し、
クラスをnavに追加し、コードを1行書くのは不思議ですが...

  return <nav className={`nav ${show && "nav__black"}`}> 

この部分は...

画像バナーの作成

まず

export default function Banner() {
    const [movie, setMovie] = useState([]);
    useEffect(() => {
      fetchData();

    }, [])
    
    const fetchData =async ()=>{
        //현재 상영중인 영화 정보 가져오기 
        const request = await axios.get(requests);
        //await을 하지 않고 넣으면 pending 상태가 되어버린다 

        //여러 영화 중 영화 하나의 ID 가져오기 
        const movieId = request.data.results[Math.floor(Math.random()*request.data.results.length)].id;

        //특정 영화의 더 상세한 정보 가져오기(비디오 정보도 포함)
        const {data: movieDetail} = await axios.get(`movie/${movieId}`,{
            params:{append_to_respons : "videos"}, // movieDetail안에 영화정보들을 넣는다. 
        });
        setMovie(movieDetail); //안에 다 들어간당 
    }

  return <div></div>
}

機能から作成後
UIセクションのbannerにマージします.jsは以下の通り

import axios from '../api/axios';
import requests from "../api/request";
import React,{useState, useEffect} from 'react'

export default function Banner() {
    const [movie, setMovie] = useState([]);
    useEffect(() => {
      fetchData();

    }, [])
    
    const fetchData =async ()=>{
        //현재 상영중인 영화 정보 가져오기 
        const request = await axios.get(requests);
        //await을 하지 않고 넣으면 pending 상태가 되어버린다 

        //여러 영화 중 영화 하나의 ID 가져오기 
        const movieId = request.data.results[Math.floor(Math.random()*request.data.results.length)].id;

        //특정 영화의 더 상세한 정보 가져오기(비디오 정보도 포함)
        const {data: movieDetail} = await axios.get(`movie/${movieId}`,{
            params:{append_to_respons : "videos"}, // movieDetail안에 영화정보들을 넣는다. 
        });
        setMovie(movieDetail); //안에 다 들어간당 
    };
    const truncate = (str,n)=>{
        return str?.length > n ? str.substr(0,n-1) + "...": str 

    }

   return <header
   className='banner'
   style={{backgroundImage: `url("https://image.tmdb.org/t/p/original/${movie.backdrop_path}")`,
   backgroundPosition : "top center",
   backgroundSize : "cover",
}}
   >
    <div className='banner__contents'>
        <h1 className='banner_title'>{movie.title || movie.name || movie.original_name}</h1>

        <div className='banner__buttons'>
            <button className='banner__button play'>Play</button>
            <button className='banner__button info'>More Information</button>
        </div>
        <h1 className='banner__description'>{truncate(movie.overview,100)}</h1>
    </div>
    <div className='banner--fadeBottom'></div>

  </header>
}

カットを作るのも不思議なこと++
cssを着るときれいに見えます.

useEffect

シナリオあり->インストール時のみ

を実行

アレイをスキップ->レンダリングのたびに実行します.

useEffect(() => {
    fetchData(); 
},)

banner.jsに上のコードを書くと無限にレンダリングされ、画像がずっと表示されます.
このとき

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

そうするとイメージが1つしか出てこない.
そのため、無限のイメージが出てくる話題を解消することができます.

Styled Componentの場合

Styled Componentとは?

JSというjsファイルでcssを処理できる代表的なライブラリです.

インストール方法

npm install --save styled-components // npm 
yarn add styled-components // yarn 

Styled Componentを使用したビデオタイトルの作成

プレイボタンをクリックして動画に切り替えます

const [isClicked, setIsClicked] = useState(false);

まずusStateを作成します.
プレイボタンのクリック状態に応じて、異なる値を返します.
次にstyledcomponentを使用します

}else{
    return(
        <Container>
            <homeContainer>
            clicked
            </homeContainer>
        </Container>
    )
}
}

const Container = styled.div`
    display: flex;
    justify-content : center;
    align-items : center;
    flex-direction : column;
    width : 100%;
    height : 100vh;
`

const homeContainer = styled.div`
    width : 100%;
    height : 100%;
`

上記のように.

Iframe

IframeはHTML Inline Frame要素で、Inline frameの略です.
Iframe要素はネストされたブラウザで、他のHTMLページを現在のページに効率的に含めることができ、制限なく他のページをロードして挿入することができます.

    return(
        <Container>
            <HomeContainer>
            clicked
            <Iframe 
                width="640"
                height="360"
                src={`https://www.youtube.com/embed/${movie.videos.results[0].key}?controls=&autoplay=1&loop=1&mute=1&playlist=${movie.videos.results[0].key}`}
                title="YouTube video player" 
                frameborder="0" 
                allow=" autoplay; fullscreen" allowfullscreen>
            </Iframe>
            </HomeContainer>
        </Container>
    )
}

このようにして、予告編のあるビデオがもたらされます.

これでこのように表示されていることが確認できます.