06. 나만의 유튜브 사이트 만들기 : 섹션 컴퍼넌트 구조화하기

Tutorial/Portfolio

나만의 유튜브 사이트 만들기

by @webs 2023. 09. 01.

06

나만의 유튜브 사이트 만들기 : 섹션 컴퍼넌트 구조화하기

난이도 중간

소스 다운로드

완성 화면 완성 코드 영상 보기

소개

안녕하세요! 웹스토리보이입니다. 이 강의는 React 프레임워크와 YouTube API를 이용하여 자신만의 간단한 영상 사이트를 만들어보겠습니다. React의 기본 개념을 이해하고, 컴포넌트를 구조화하고 상태를 관리하는 방법을 학습하게 될 것입니다. 또한 YouTube Data API를 활용하여 외부 데이터를 가져오는 방법을 익히고, API 응답을 처리하여 사용자에게 의미 있는 정보를 제공하는 방법을 이해하게 됩니다. 이로써 자신만의 유튜브 사이트를 만들고, 활용해보는 것을 목표로 합니다. 그럼 한번 시작해볼까요? 🥳

인덱스

• 1. 셋팅하기
  • 1_1. Node.js 설치
  • 1_2. Vscode 설치
  • 1_3. React.js 설치
• 2. 라이브러리 설치하기
  • 2_1. 폴더 정리하기
  • 2_2. 라이브러리 설치하기
• 3. Git 연동하기
  • 3_1. 저장소 만들기
  • 3_2. 모든 파일 올리기
  • 3_3. 깃 상태 확인하기
• 4. SCSS 셋팅하기
  • 4_1. SCSS 설정하기
  • 4_2. style.scss 설정하기
  • 4_3. fonts.scss 설정하기
  • 4_4. vars.scss 설정하기
  • 4_5. reset.scss 설정하기
  • 4_6. mixin.scss 설정하기
  • 4_7. common.scss 설정하기
• 5. 페이지 만들기
  • 5_1. 페이지 만들기
  • 5_2. 페이지 컴퍼넌트 만들기
• 6. 섹션 컴퍼넌트 구조화하기
  • 6_1. 전체 레이아웃 만들기
  • 6_2. 섹션 컴퍼넌트 만들기

6. 섹션 컴퍼넌트 구조화하기

6_1. 전체 레이아웃 만들기

완성된 페이지를 확인해보면 전체적인 구조는 header, main, footer 3단 구조로 되어 있습니다.

페이지를 만들었으니 각 페이지의 섹션을 만들겠습니다. 리액트에서는 컴퍼넌트라고 얘기하죠! App.js 페이지에서 셋팅을 해주겠습니다.

import React from 'react'
import { BrowserRouter, Routes, Route } from 'react-router-dom';

import Home from './pages/Home'
import Today from './pages/Today'
import Developer from './pages/Developer'
import Webd from './pages/Webd'
import Website from './pages/Website'
import Gsap from './pages/Gsap'
import Port from './pages/Port'
import Youtube from './pages/Youtube'
import Channel from './pages/Channel'
import Video from './pages/Video'
import Search from './pages/Search'
import Not from './pages/Not'

import Header from './components/section/Header';   //추가
import Main from './components/section/Main';       //추가
import Footer from './components/section/Footer';   //추가

const App = () => {
    return (
        <BrowserRouter>
            <Header />
            <Main>
                <Routes>
                    <Route path='/' element={<Home />} />
                    <Route path="/today" element={<Today />} />
                    <Route path="/developer" element={<Developer />} />
                    <Route path="/webd" element={<Webd />} />
                    <Route path="/website" element={<Website />} />
                    <Route path="/gsap" element={<Gsap />} />
                    <Route path="/port" element={<Port />} />
                    <Route path="/youtube" element={<Youtube />} />
                    <Route path='/channel/:channelId' element={<Channel />} />
                    <Route path='/video/:videoId' element={<Video />} />
                    <Route path='/search/:searchId' element={<Search />} />
                    <Route path="*" element={<Not />} />
                </Routes>
            </Main>
            <Footer />
        </BrowserRouter>
    );
}

export default App;

기존 파일에 컴퍼넌트를 추가했습니다. 폴더는 다음과 같이 설정하겠습니다.

• src
  • assets
  • components
    • section
      • Footer.jsx
      • Header.jsx
      • Main.jsx
  • pages
    • Channel.jsx
    • Developer.jsx
    • Gsap.jsx
    • Home.jsx
    • Not.jsx
    • Port.jsx
    • Search.jsx
    • Today.jsx
    • Video.jsx
    • Webd.jsx
    • Website.jsx
    • Youtube.jsx
  • App.js
  • index.js

CSS도 다음과 같이 설정하겠습니다.

• assets
  • fonts
  • img
  • scss
    • section
      • _layout.scss
    • setting
      • _common.scss
      • _fonts.scss
      • _mixin.scss
      • _reset.scss
      • _vars.scss
    • style.scss

style.scss도 다음과 같이 수정합니다.

@charset "UTF-8";

// setting
@import "setting/fonts";
@import "setting/vars";
@import "setting/reset";
@import "setting/mixin";
@import "setting/common";

// section
@import "section/layout";

6_2. 섹션 컴퍼넌트 만들기

components > section > header.jsx는 다음과 같이 설정합니다.

import React from 'react'

const Header = () => {
    return (
        <header id='header' role='banner'>
            header
        </header>
    )
}

export default Header

components > section > main.jsx는 다음과 같이 설정합니다.

import React from 'react'

const Main = () => {
    return (
        <main id="main" role="main">
            main  
        </main>
    )
}

export default Main

components > section > footer.jsx는 다음과 같이 설정합니다.

import React from 'react'

const Footer = () => {
    return (
        <footer id='footer' role="contentinfo"> 
            footer
        </footer>
    )
}

export default Footer

CSS는 다음과 같이 작업하겠습니다. assets > scss > section > _layout.scss는 다음과 같이 설정합니다.

#header {
    position: fixed;
    left: 0;
    top: 0;
    width: 260px;
    height: 100%;
    z-index: 10000;
    background-color: #000;
}
#main {
    max-width: 2000px;
    min-height: 100vh;
    margin: 0 auto;
    padding-left: 260px;
    background-color: #111;
}
#footer {
    text-align: center;
    background-color: #333;
    padding: 20px 20px 20px 260px;
} 

마무리

git 올리기

터미널에서 다음과 같이 작성하겠습니다. 새로운 페이지가 올라오는 것을 확인 할 수 있습니다.

webstoryboyhwang@Webstoryboyui-MacBookPro webs-youtube % git add .
webstoryboyhwang@Webstoryboyui-MacBookPro webs-youtube % git status
On branch main
Your branch is up to date with 'origin/main'.

Changes to be committed:
    (use "git restore --staged ..." to unstage)
        modified:   src/App.js
        new file:   src/assets/scss/section/_layout.scss
        modified:   src/assets/scss/style.scss
        new file:   src/components/section/Footer.jsx
        new file:   src/components/section/Header.jsx
        new file:   src/components/section/Main.jsx

webstoryboyhwang@Webstoryboyui-MacBookPro webs-youtube % git commit -m "섹션 컴퍼넌트 구조화하기"
[main 6734289] 섹션 컴퍼넌트 구조화하기
    6 files changed, 80 insertions(+), 15 deletions(-)
    create mode 100644 src/assets/scss/section/_layout.scss
    create mode 100644 src/components/section/Footer.jsx
    create mode 100644 src/components/section/Header.jsx
    create mode 100644 src/components/section/Main.jsx
webstoryboyhwang@Webstoryboyui-MacBookPro webs-youtube % git push -u origin main
Enumerating objects: 20, done.
Counting objects: 100% (20/20), done.
Delta compression using up to 10 threads
Compressing objects: 100% (12/12), done.
Writing objects: 100% (14/14), 1.68 KiB | 1.68 MiB/s, done.
Total 14 (delta 3), reused 0 (delta 0), pack-reused 0
remote: Resolving deltas: 100% (3/3), completed with 3 local objects.
To https://github.com/webstoryboy/webs-youtube.git
    c2d2a3e..6734289  main -> main
branch 'main' set up to track 'origin/main'.

모든 페이지의 레이아웃이 동일하기 때문에 섹션을 컴퍼넌트화 시켰습니다. 그 다음 각 섹션의 CSS를 설정하여 레이아웃을 완성하였습니다. 오늘도 수고하셨습니다. 🥳

---

완성 화면 소스 보기 영상 보기

예제 목록

• 1. 나만의 유튜브 사이트 만들기 : 셋팅하기
• 2. 나만의 유튜브 사이트 만들기 : 라이브러리 설치하기
• 3. 나만의 유튜브 사이트 만들기 : Git 연동하기
• 4. 나만의 유튜브 사이트 만들기 : SCSS 셋팅하기
• 5. 나만의 유튜브 사이트 만들기 : 페이지 만들기
• 6. 나만의 유튜브 사이트 만들기 : 섹션 컴퍼넌트 구조화하기
• 7. 나만의 유튜브 사이트 만들기 : 헤더 영역 완성하기
• 8. 나만의 유튜브 사이트 만들기 : 헤더 영역 데이터 작업
• 9. 나만의 유튜브 사이트 만들기 : 컴퍼넌트 비동기 작업
• 10. 나만의 유튜브 사이트 만들기 : 페이지 SEO 작업
• 11. 나만의 유튜브 사이트 만들기 : 메인 콘텐츠 작업
• 12. 나만의 유튜브 사이트 만들기 : 추천 영상 작업
• 13. 나만의 유튜브 사이트 만들기 : 추천 개발자 작업
• 14. 나만의 유튜브 사이트 만들기 : 메인 섹션 나머지 콘텐츠 작업
• 15. 나만의 유튜브 사이트 만들기 : 비디오 컴퍼넌트 통합 작업
• 16. 나만의 유튜브 사이트 만들기 : Swiper 이미지 슬라이드 작업
• 17. 나만의 유튜브 사이트 만들기 : 나머지 페이지 작업
• 18. 나만의 유튜브 사이트 만들기 : 검색 및 유튜브 API 설정하기
• 19. 나만의 유튜브 사이트 만들기 : Rapid API 및 더보기 설정하기
• 20. 나만의 유튜브 사이트 만들기 : 비디오 상세 페이지 만들기
• 21. 나만의 유튜브 사이트 만들기 : 채널 상세 페이지 만들기
• 22. 나만의 유튜브 사이트 만들기 : 버그 고치기
• 23. 나만의 유튜브 사이트 만들기 : 빌드 및 배포하기