Section 4 : Netflix 앱 만들기

• Axios

  • 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리
  • 백엔드와 프론트엔드의 통신을 쉽게하기 위해 Ajax와 더불어 사용
  • 설치 방법

  npm install axios --save

  • Axios 인스턴스 만들기
    • 주소에 중복된 부분을 계속 입력하지 않아도 되므로 인스턴스를 생성하는게 좋음
    • 인스턴스 생성할 폴더 파일(api)을 생성해서 axios.js와 requests.js 생성

• 이미지 배너 생성하기

  • async와 await axios.get으로 정보를 가져옴

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

    const fetchData = async () => {
        // 현재 상영중인 영화 정보를 가져오기
        const request = await axios.get(requests.fetchNowPlaying)

        // 여러 영화 중 영화 하나의 ID를 가져오기
				// 랜덤으로 숫자를 가져오기 : Math.floor(Math.random() * 길이)이용
        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_response: "videos" },
        })
        setMovie(movieDetail);
    }

• Styled Component

  • Javascript 파일 안에서 CSS를 처리할 수 있게 해주는 라이브러리
  • 코드를 HTML의 </>처럼 감싸면 됨

  import { styled } from 'styled-components';
  
  // ...
  
  <Container>
    <HomeContainer>
      <Iframe
        width="640"
        height="360"
        src={`https://www.youtube.com/embed/${movie.videos.results[0].key}?controls=0&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>
  
  // ...
  
  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%;
  `

  • 설치 방법

  npm install --save styled-components

  • props기능 탑재
    • 코드를 감쌀때 props값을 통해 css구현 가능
  • 상속

  const Container = styled.div`
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
  `
  
  // 위의 Container의 내용을 그대로 이어받고 다음 내용을 추가
  const HomeContainer = styled{Container}`
      width: 100%;
      height: 100%;
  `