2주차 유튜브 API(1) - 설계 및 css 구현

https://youngentry.github.io/week2-youtube-api/

React App

라이브러리

sass (css) $ npm i sass

react-dom (라우터) $ npm i react-router-dom@6

redux-toolkit (상태관리) $ npm i@reduxjs/toolkit react-redux

googleapis (api 라이브러리) $ npm install googleapis --save

axios (fetch 라이브러리) $ npm i axios

react-player (iframe 리액트 라이브러리) $ npm i react-player

---

레이아웃

---

컴포넌트 구조

    <div className="App">
      <NavSide />
      <NavHead />

      <Main라우터 path="/" element={<div>메인</div>} />
      <Video라우터 path="/video" element={<div>비디오</div>} />
      <Subscribe라우터 path="/subscribe" element={<div>구독</div>} />
      <Like라우터 path="/like" element={<div>좋아요</div>} />
      <Dislike라우터 path="/dislike" element={<div>싫어요</div>} />
    </div>

---

JS파일 폴더 구조

• components
  네비게이션 바와 같이 여러 페이지에서 쓰이는 컴포넌트
• layout
  레이아웃을 위한 컴포넌트
• pages
  페이지를 구성하는 컴포넌트

 

CSS파일 폴더구조

• abstract
  mixin, 변수를 저장
• components, layout, pages
  js파일 폴더구조와 동일한 구조
• reset.css
  css 기본설정