🎥 React로 유튜브 클론코딩 📹

 

 

---

🖼 Outline

 

 

Why - 교내웹개발동아리에서 겨울방학 토이프로젝트로 진행
What - 유튜브 웹사이트 클론코딩
Who - spring을 사용하시는 두명의 백엔드 분들과 협업하였으며 나는 프론트를 맡았다
How - React 기반
When - 약 한 달(2021년 11월 08일 ~ 2021년 12월 4일)간 진행했다

 

---

✨ Main Features

 

1. 반응형

2학기에 집중적으로 공부한 반응형을 본 프로젝트 곳곳에서 구현하려 노력했다.

 

당연하지만? 미디어 쿼리를 이용하여 css 스타일을 적용하였고

 

const Wrapper = styled.div`
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 70vw;

  @media (max-width: 1300px) {
    width: 80vw;
  }
  @media (max-width: 800px) {
    width: 80vw;
  }
`;

 

사이드메뉴나 헤더 같은 화면 구성들은 크게 3단계(모바일뷰, 아이패드및탭, pc뷰)로 나눠서 레이아웃 구성 방식을 바꿨다

 

탐색탭 버튼들과 메인탭 동영상 컴포넌트들의 배열 및 사이즈는 화면 크기에 따라 연속적으로 조절되도록 설정하였다

 

---

 

2. 마우스 올렸을 때 동영상 재생

실제 유튜브 웹에서는 각 동영상 컴포넌트들의 썸네일이 정지되어있고
마우스를 그 위에 올렸을 때 동영상이 미리보기 형식으로 자동으로 재생된다

 

 

이번 유튜브 클론코딩에서는 해당 기능에 집중했다.

우리 팀의 백엔드 개발자분들이 동영상별로 썸네일과 동영상을 링크형태로 전달해주셨고,
나는 이를 이용하여 마우스를 올렸을때는 동영상이, 마우스를 올리지 않았을때는 정지된 썸네일이 보이게 만들어서 본 기능을 구현해줬다.

 

 

2-1. 재생되는 동영상 컴포넌트

우선 본 기능을 구현하기 위해 "재생되는" 동영상 컴포넌트가 필요했다.
감사하게도 url을 넣으면 해당 비디오를 재생시켜주는 컴포넌트가 오픈소스로 잘 만들어져 있어 감사히 사용했다.

 

ReactPlayer Component

https://www.npmjs.com/package/react-player

반응형

react-player

 

보면 알겠지만 유용한 props들도 많이 있었는데,

 

playing="true" 로 재생 여부도 결정 할 수 있었고
muted="true" 로 동영상을 조용히 재생 시킬 수 있게 커스텀할 수 있었다.

 

<ReactPlayer url={data.videoUrl} muted="true" playing="true" />

 

 

2-2. 마우스 호버링 react로 관리하기

이제 동영상 재생은 준비 되었으니 마우스를 올렸을때 해당 컴포넌트가 보이게 만들면 되는데..

 

문제는 메인페이지 탭바 버튼이나 사이드바 메뉴 버튼들의 색상 변화를 구현할 떄 사용했던

:hover 기능은 css로 할 수 있는 스타일 변화만 적용이 가능하다는 것이었다.

 

여기서는 마우스 호버링에 따라 컴포넌트가 변화하게 하는 것이 필요했다.

 

 

이에 useState()를 이용하여 마우스 호버링 여부를 상태로써 관리하기로 했다.

const [hover, setHover] = useState(false);

 

 

이후 onMouseOver 와 onMouseOut 속성을 이용해

마우스가 해당 컴포넌트에 올라와있는가를 판단하여 상태를 set 해줬다

<VideoItem
      onMouseOver={() => setHover(true)}
      onMouseOut={() => setHover(false)}
    >
      {hover ? (
        <ReactPlayer url={data.videoUrl} />
      ) : (
        <Thumbnail src={data.videoThumbnail} />
      )}

 

 

결론적으로 다음과 같이 비디오 컴포넌트 코드 완성!

<VideoItem
      onMouseOver={() => setHover(true)}
      onMouseOut={() => setHover(false)}
    >
      {hover ? (
        <ReactPlayer
          url={data.videoUrl}
          muted="true"
          width="100%"
          height="auto"
          playing="true"
          style={{ marginBottom: "10px" }}
        />
      ) : (
        <Thumbnail src={data.videoThumbnail} />
      )}

      <Profile src={youtubeData["data"][index + 28].channelThumbnail} />
      <Info>
        <Title>{data.videoTitle}</Title>
        <Chanel>{data.videoChannel}</Chanel>
        <Views>조회수 {data.videoCount}회·</Views>
        <Date>{relativeDate()}</Date>
      </Info>
    </VideoItem>

 

---

3. 로딩화면 구현

프로젝트를 진행하면서 빌드할 때마다 보이는 흰색 화면이 너무 거슬렸다.

 

이에 야매였지만 실제 유튜브 로딩 화면과 유사해보이게 눈속임용으로라도 로딩화면을 만들어보기로 했고,

마침 2학기때 내가 맡은 세미나 부분이 고급CSS 애니메이션 부분이였는데,

로딩 애니메이션을 실습 자료를 만들며 로딩창을 대충 다룬적이 있었다

 

 

우선 로딩화면에 반복적으로 나올 회색 컴포넌트를 빠르게 구현하고
(저기 제목부분이랑 컨텐츠 길이가 다른거 일부러 그런거다.. 진짜 저럼..)
(살면서 로딩화면 캡쳐해놓고 색상 추출하고 사이즈 재고 그런건 처음..)

 

 

이후 useState() 로 로딩 상태를 관리

const [loading, setLoading] = useState(false);

 

그리고 useEffect() 를 이용하여 서버로 부터 데이터를 받아오는 동안은 true,

받아오는걸 완료한 후에는 false 로 로딩상태를 set 해주었다

useEffect(() => {
    const fetchData = async () => {
      setLoading(true);
      try {
        const response = await axios.get(
          `http://${baseurl}/video/get/${index}`
        );
        setData(response.data);
        console.log(data);
      } catch (e) {
        console.log(e);
      }
      setLoading(false);
    };
    fetchData();
  }, []);

  if (loading) {
    return <Loading />;
  }

  if (!data) {
    return <Loading />;
  }

 

그렇게 완성-!

 

---

📁 Structure

 

1. 폴더 구조

폴더 구조는 용도에 따라 크게 네가지로 나누고 각 폴더 내부에 페이지별 폴더를 또 만들어서 파일들을 관리해줬다.
이번에는 혼자 작업한 덕분에 온전히 내 취향대로 폴더를 구분했는데 나는 이게 정말 편했다ㅎㅎ

 

• assets
  : 이미지 및 아이콘 에셋들
• pages
  : 페이지별 js 파일들
• component
  : 각 페이지에 사용한 컴포넌트들
• shared
  : 모든 페이지에서 공통적으로 사용하는 컴포넌트들

 

App.js

• App.css
• index.js
• assets
  • assets_header - 헤더에 사용한 이미지 아이콘 에셋 모음
  • card - 탐색 페이지 카드 이미지에셋
  • icon - 사이드바에 사용한 아이콘 에셋
• pages
  • Finder.js
  • Main.js
  • Subscribe.js
• component - 각 페이지에 사용한 컴포넌트들
  • Finder
    • LargeVideo.js
  • Main
    • Ad.js
    • Filter.js
    • Loading.js
    • Video.js
    • VideoList.js
  • Subscribe
    • LargeVIdeoWithChannel.js
  • loading.png
• shared - 모든 페이지에 공통적으로 사용한 컴포넌트
  • Header.js
  • Layout.js
  • Sidebar.js

 

2. 레이아웃 구성

마지막에 있는 shared 에서 Layout.js 가 이번 프로젝트에서 반복을 최소화할 수 있게 해준 파일이다.

function Layout({ active, content }) {
  return (
    <Wrapper>
      <Header />
      <Body>
        <Sidebar active={active} />
        <div className="contents">{content}</div>
      </Body>
    </Wrapper>
  );
}

 

다음과 같이 공통된 컴포넌트인 헤더와 사이드바의 레이아웃을 본 Layout.js에서 잡아주고

내용에 해당하는 부분은 content 컴포넌트를 받아와서 보여주게 했다.

 

즉, 홈탭, 탐색탭, 구독탭에 따라 달라지는 내용 부분은 content 컴포넌트로 받아오는 형식

 

App.js 에서는 경로에 따라 Layout 컴포넌트의 content 컴포넌트만 바꿔서 보여주기만 하면 된다.

function App() {
  return (
    <Router>
      <Routes>
        <Route
          path="/"
          exact={true}
          element={<Layout active="main" content={<Main />} />}
        />
        <Route
          path="/Finder"
          element={<Layout active="finder" content={<Finder />} />}
        />
        <Route
          path="/Subscribe"
          element={<Layout active="subscribe" content={<Subscribe />} />}
        />
      </Routes>
    </Router>
  );
}

 

---

🚪 Closing

아무튼 이렇게 길면 길고 짧으면 짧은 프로젝트가 끝이 났다..!

 

Github

https://github.com/seondal/Clone-Youtube-Web

GitHub - seondal/clone-youtube-web: clone YouTube Web with React 🍺 📹

 

사실 팀에 배정된 프론트 담당이 두명이였는데,

같은 팀이셨던 프론트 선배님께서 직장 때문에 바빠지셔서 프론트부분은 나 홀로 진행하게 되었다.

이때 반응형 연습한 걸로 이후에 웹사이트 외주까지 하게 되었으니 결과적으로는 정말 좋은 경험이었던 것 같다 :)

 

Instagram

https://www.instagram.com/p/CXSYOIiBctm/?utm_source=ig_web_copy_link