[#2] 넷플릭스 클론코딩.ZIP | 넷플릭스 오리지널, 실시간 트렌드 | With React.js

[App.js]

 

import React from 'react';
import './App.css';
import Row from './Row';
import request from './request';

function App() {
  return (
    <div className="App">
      <h1>안녕 난 오늘 넷플릭스 클론코딩을 해볼 거야~</h1>
      <Row title="NETFLIX ORIGINALS" fetchUrl={request.fetchNetflixOriginals} />
      <Row title="Trending Now" fetchUrl={request.fetchTrending} />
    </div>
  );
}

export default App;

 

 

쿼카.js와 Prettier을 설치해준다.

 

 

프리티어는 설치 후 확장설정에 들어가서 Editor: Format On Save 체크박스를 체크한다.

 

 

src 폴더 아래 Row.css 파일을 새로 만들고 Row.js 파일에서 css를 사용하기 위해 import 해준다.

 

[Row.js]

 

import React, { useState, useEffect } from "react";
import axios from "./axios";
import "./Row.css";

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

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

    // 특정 조건/변수를 기반으로 실행되는 코드 조각
    useEffect(() => {
    // if [], 행이 로드될 때 한 번 실행하고 다시 실행하지 않음
    async function fetchData() {
        const request = await axios.get(fetchUrl);
        setMovies(request.data.results);
        return request;
    }
    fetchData();
    }, [fetchUrl]);

    console.table(movies);

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

            <div className="row_posters">
                {/* 여러개 row_posters */}

                {movies.map(movie => (
                        <img 
                         className="row_poster"
                        src={`${base_url}${movie.poster_path}`} 
                            alt={movie.name} />
                ))}
            </div>
            {/* container -> posters */}
        </div>
    )
}

export default Row;

 

[Row.css]

 

.row_posters {
  display: flex;
}

.row_poster {
  /* 가로/세로 비율을 유지한채 이미지 크기 조절, 영역 안에 전체 이미지가 보이도록 한다. */
  object-fit: contain;
  width: 100%;
  max-height: 100px;
}

 

지금까지의 페이지 모습이다.

1. 포스터가 잘들어갔지만 너무 딱 붙어있어서 답답해보인다.

2. 영화의 개수가 많아서 페이지에 스크롤이 생겨버렸다. 페이지가 길어지면 불편하기 때문에 페이지 내에서 스크롤 할 수 있도록 바꿔야한다.

 

먼저 포스터가 빈틈없이 붙어있는 것을 떨어트리도록 하겠다.

 

.row_poster{
	margin-right: 10px;
}

 

.row_poster 안에 margin을 줘서 오른쪽으로 10px씩 떨어트린다.

 

그리고 페이지가 화면 안에 들어오게 row에 스크롤을 준다. overflow 속성은 범위 이탈 요소 처리다. y(세로)는 스크롤바가 사용자에게 보일 필요가 없기 때문에 hidden을 주고 x(가로)에는 스크롤바를 생성해준다.

 

.row_posters {
	overflow-y: hidden;
    	overflow-x: scroll;
}

 

 

margin과 overflow 속성으로 웹페이지가 정돈된 느낌을 받을 수 있다. 하지만 이번엔 스크롤바와 포스터가 딱 붙어버렸다. 이럴 땐 padding 값을 주도록 한다. 

 

.row_posters {
	padding: 20px;
}

 

값을 20px 정도 주면 충분히 떨어진다.

 

* margin과 padding의 차이점 |

margin은 오브젝트와 화면과의 여백, padding은 오브젝트 내의 내부 여백을 의미한다.

 

위에 스크롤바가 생긴 사진을 봐서 알겠지만 못생긴 스크롤바는 넷플릭스에 없다. 그래서 나는 못생긴 스크롤바는 없애되, 스크롤 기능은 남기려고 한다.

 

.row_posters::-webkit-scrollbar {
  display: none;
}

 

위 코드를 이용하면 된다. 그럼 스크롤 기능은 남고 스크롤바는 없어지는 것을 확인할 수 있다.

Row.css는 여기까지 보도록 하겠다.