TIL | 11/02/2022

#리액트로 넷플릭스 구현하기

앞서 진행했던 카카오톡을 끝내고 오늘부턴 새로운 진도를 나가기 시작했다. axios로 영화데이터를 받아오는데 기존의 방법이 아닌 새로운 axios용 api를 만들어서 데이터를 불러와 사용하는 방식이었다.

// axios.js
import axios from 'axios';

const instance = axios.create({
  baseURL: 'https://api.themoviedb.org/3',
  // URL path name 뒤의 내용들은 params
  params: {
    api_key: process.env.REACT_APP_MOVIE_DB_API_KEY,
    language: 'ko-KR', // en-US
  },
});

export default instance;

API 키는 역시 .env 파일로 숨기기

그래서 만들어놓은 영화 api로 데이터를 랜덤으로 가져와서 상세한 내용을 불러올 수 있다.

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

  const fetchData = async () => {
    /* 현재 상영중 영화 정보 가져오기 (20개) */
    const request = await axios.get(requests.fetchNowPlaying);
    // console.log(request);

    /* 20개 영화 중 랜덤으로 1개의 영화 ID를 가져오기 */
    const movieId =
      request.data.results[Math.floor(Math.random() * request.data.results.length + 0)].id; // 랜덤으로 선택한 영화의 id

    /* 특정 영화의 더 상세한 정보를 가져오기 (videos 정보 포함) */
    const { data: movieDetail } = await axios.get(`movie/${movieId}`, {
      params: { append_to_response: 'videos' },
    });

    // console.log(movieDetail);
    setMovie(movieDetail);
  };

오늘 새롭게 배운 내용은 Styled Component다

쉽게 말하면 CSS in JavaScript

자바스크립트 안에서 CSS를 처리할 수 있게 해주는 라이브러리로 아래와 같이 컴포넌트처럼 선언하고 element를 구분지어 백틱안에 css를 작성하면 된다.

return (
      <Container>
        <HomeContainer>
          <Iframe></Iframe>
        </HomeContainer>
      </Container>
    );

const Container = styled.div`
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
`;
const HomeContainer = styled.div`
  width: 100%;
  height: 100%;
`;
const Iframe = styled.iframe`
  width: 100%;
  height: 100%;
  z-index: -1;
  opacity: 0.65;
  border: none;
  &::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
`;

CSS Sorting 확장프로그램처럼 이것도 정렬 기능이 있으면 좋으련만..

아무튼 styled component를 사용해서 CSS를 적용하면 컴포넌트 하나하나에 임의의 클래스가 지정되고 그 클래스에 스타일이 적용되는 방식이다.

기업마다 스타일을 적용하는 방식이 전부 다르니 CSS, SASS, StyledComponent 전부 다 공부하면 좋을 듯 싶다.

오늘 끝, 내일 안녕