넷플릭스 클론코딩 12 슬라이드 구현 및 github page 설정

hankyo·2023년 6월 26일
GithubPageReact
0

넷플릭스 클론코딩 및 포트폴리오사이트로!

목록 보기
11/11

목표한 구현을 완료하였다!

하지만 마음에 들지 않는것이 하나 있는데 그것은 이미지 슬라이드 구현이다.
현재는 넣어진 데이터베이스의 갯수를 전부 나눠서 들어가게 되었는데 이것을 슬라이드로 바꾸는 작업을 하였다.

react-slick

React Slick은 React 애플리케이션에서 많이 사용되는 캐러셀/슬라이더 라이브러리입니다. 이 라이브러리는 다양한 옵션과 기능을 가진 반응형 및 인터랙티브한 캐러셀을 유연하게 생성하고 사용할 수 있도록 제공합니다. 이 라이브러리는 인기 있는 Slick 캐러셀 jQuery 플러그인을 기반으로 구축되었습니다.

yarn add react-slick

React Slick 라이브러리를 사용하여서 슬라이드 구현을 하였다.

browse.js 에서 작업하면 된다.

import Slider from "react-slick";
import "slick-carousel/slick/slick.css"; 
import "slick-carousel/slick/slick-theme.css";

'''''
'''''
  const settings = {
    className: "center",
    focusOnSelect: true,
    centerMode: true,
    dots: true,
    infinite: true,
    speed: 500,
    slidesToShow: 3, // 한 번에 보여줄 슬라이드 수를 설정
    slidesToScroll: 1, // 한 번 스크롤시 이동할 슬라이드 수를 설정
    draggable: true, // 드래그 가능 여부 설정
    arrows: false,
    initialSlide: 0,
    responsive: [
      {
        breakpoint: 1200, // screen width >= 1024px
        settings: {
          slidesToShow: 3,
          slidesToScroll: 1,
          infinite: true,
          dots: true
        }
      },
      {
        breakpoint: 800, // screen width >= 600px
        settings: {
          slidesToShow: 2,
          slidesToScroll: 1,
          initialSlide: 2
        }
      },
      {
        breakpoint: 600, // screen width >= 480px
        settings: {
          slidesToShow: 1,
          slidesToScroll: 1
        }
      }
    ],
    appendDots: dots => (
      <div
        style={{
          backgroundColor: "#000",
          borderRadius: "10px",

        }}
      >
        <ul style={{ margin: "0px",color: "blue", }}> {dots} </ul>
      </div>
    ),
    customPaging: i => (
      <div
        style={{
          width: "30px",
          color: "white",
        }}
      >
        {i + 1}
      </div>
    ),
  };
'''''
'''''

<Card.Group>
        {slideRows.map((slideItem) => (
          <Card key={`${category}-${slideItem.title.toLowerCase()}`}>
            <Card.Title>{slideItem.title}</Card.Title>
            
            <Card.Entities>
            <Slider {...settings}>
              {slideItem.data.map((item) => (
                <Card.Item key={item.docId} item={item}>
                  <Card.Image src={process.env.PUBLIC_URL +`/images/${category}/${item.genre}/${item.slug}/small.jpg`} />
                  <Card.Meta>
                    <Card.SubTitle>{item.title}</Card.SubTitle>
                    <Card.Text>{item.description}</Card.Text>
                  </Card.Meta>
                </Card.Item>
              ))}
              </Slider>
            </Card.Entities>
            <Card.Feature category={category}>
              <Player>
                <Player.Button />
                <Player.Video src={process.env.PUBLIC_URL +"/videos/bunny.mp4"} />
              </Player>
            </Card.Feature>
          </Card>
        ))}
      </Card.Group>
'''''
'''''

Card 쪽에서 작업을 해주면 된다.
위쪽 setting 에서 해상도별 보여질 슬라이드 개수를 정하였고, ... 으로 나타나는 버튼을 숫자로 바꾸었다.

gh-pages

GitHub Pages(gh-pages)는 GitHub에서 제공하는 기능으로, GitHub 저장소에서 정적 웹사이트나 웹 애플리케이션을 직접 호스팅할 수 있도록 해줍니다. 이는 프로젝트를 쇼케이스하거나 문서를 공유하거나 React 애플리케이션을 배포하는 편리한 방법입니다.

yarn add gh-pages

package.json 설정

"homepage": "https://your-github-username.github.io/your-repository-name",
"scripts": {
  "predeploy": "npm run build",
  "deploy": "gh-pages -d build"
}

배포 방법

yarn deploy

자동으로 빌드를 하고 배포를 한다.

troubleshooting

github page를 사용하는데 있어 빌드 후 배포를 하면 경로상의 문제가 생기게 된다.
해결 방법은

  • public 파일을 src 내부로 넣는 방법
  • 절대경로 지정

두가지 방법이 있는데 두번째 방법으로 하였다.

  1. app.js 수정
import { HashRouter as Router, Routes, Route } from 'react-router-dom';

기본적으로 사용한것은 BrowserRouter인데 HashRouter로 바꾸어 준다.

차이점
1. URL 형식:
HashRouter: URL에 해시(#) 기호를 사용합니다. 예를 들어, http://example.com/#/about.
BrowserRouter: HTML5의 history API를 사용하여 브라우저의 URL을 관리합니다. 해시 기호 없이 직접 URL 경로를 사용합니다. 예를 들어, http://example.com/about.
2. 서버 요청:
HashRouter: 해시 기호 이후의 URL은 브라우저에서만 처리되며 서버로 요청되지 않습니다. 즉, 해시 기호 이후의 경로는 정적인 자원으로 간주됩니다. 이는 서버 사이드 렌더링(SSR)에 사용될 때 유용합니다.
BrowserRouter: URL 경로 전체가 서버로 요청되므로 서버 측에서 해당 경로에 대한 설정이 필요합니다. 서버에서는 해당 경로에 대한 적절한 응답을 보내야 합니다.
3. 호환성:
HashRouter: 모든 브라우저에서 동작하며 호환성이 좋습니다. 오래된 브라우저 및 웹 호스팅 서비스에서 사용하기 좋습니다.
BrowserRouter: HTML5의 history API를 사용하므로 브라우저에서 지원하는 브라우저에서만 작동합니다. 오래된 브라우저에서는 호환성 문제가 발생할 수 있습니다.
일반적으로, HashRouter는 정적인 웹 사이트에 적합하며, BrowserRouter는 동적인 웹 애플리케이션에 적합합니다. 서버 측에서 라우팅을 처리하고 서버 사이드 렌더링을 수행해야 하는 경우에는 BrowserRouter가 더 적합할 수 있습니다. 그러나 대부분의 React 애플리케이션에서는 BrowserRouter를 선호하며, 서버 측에서도 적절한 설정을 통해 작동하도록 조치할 수 있습니다.

제일 큰 문제로 검색 엔진으로 읽지 못한다는 단점으로 BrowserRouter가 더 많이 사용한다고 할 수 있는데 간편하게 githubpage에 사용하기에 HashRouter로 사용하는것에 무리가 없다.

  1. 경로 수정
    소스에서 src= 를 검색하고 process.env.PUBLIC_URL 를 앞에 붙여준다.
EX
<Feature {...restProps} src={process.env.PUBLIC_URL+`/images/${category}/${itemFeature.genre}/${itemFeature.slug}/large.jpg`}>

return <Picture {...restProps} src={process.env.PUBLIC_URL +`/images/users/${src}.png`} />;

<img src={process.env.PUBLIC_URL + '/images/icons/add.png'} alt="Open" />

이후 deploy를 하면 github repo branch에 gh-page 가 생기고 자동으로 정적 호스팅을 실행해준다.

넷플릭스 리액트 클론코딩 끝!

많은 오류들과 씨름했었지만 그러면서 많은 오류들을 해결하는 방법에 대해 알게 되었고.
컴포넌트, 컨테이너, 라우트 방식, Firebase 연동 등 많은것을 배우면서 리액트를 처음 접함에 있어 클론코딩을 한다는것은 많이 좋은 방식의 학습 방법인것 같다.

조금씩 수정해 나가면서 포트폴리오 사이트로 만들고 있다.
소스코드: https://github.com/tkfka1/portfolio/tree/ori
gh-page: https://tkfka1.github.io/portfolio/

profile
hankyo
devops
이전 포스트

넷플릭스 클론코딩 11 라우팅 페이지

0개의 댓글