Tutorial/Portfolio
나만의 유튜브 사이트 만들기
소개
안녕하세요! 웹스토리보이입니다. 이 강의는 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. 섹션 컴퍼넌트 만들기
- 7. 헤더 영역 완성하기
- 7_1. 헤더 영역 구조 잡기
- 7_2. 헤더 영역 디자인 작업
- 8. 헤더 영역 데이터 작업
- 8_1. 헤더 영역 데이터 작업
- 8_2. 반복문과 map()
- 8_3. 메뉴 활성화하기
- 8_4. 컴퍼넌트 세부화 시키기
- 9. 컴퍼넌트 비동기 작업
- 8_1. 컴퍼넌트 props 사용하기
- 8_2. React.Suspense 사용하기
- 10. 페이지 SEO 작업
- 10_1. 메인 페이지 SEO 설정하기
- 10_2. 모든 페이지 SEO 설정하기
- 11. 메인 콘텐츠 작업
- 11_1. 검색 컴퍼넌트 작업하기
- 11_2. 메인 컴퍼넌트 작업하기
- 12. 추천 영상 작업
- 12_1. 메인 추천 영상 작업
- 12_2. 추천 영상 반응형 작업
- 12_3. 추천 영상 페이지 작업
- 13. 추천 개발자 작업
- 13_1. 메인 추천 개발자 작업
- 13_2. 추천 개발자 페이지 작업
- 14. 메인 섹션 나머지 콘텐츠 작업
- 14_1. 웹디자인 기능사 컴퍼넌트 작업
- 14_2. 웹표준 사이트 컴퍼넌트 작업
- 14_3. GSAP 사이트 컴퍼넌트 작업
- 14_4. 포트폴리오 사이트 컴퍼넌트 작업
- 14_5. 유튜브 사이트 컴퍼넌트 작업
14. 웹디자인 기능사 콘텐츠 작업
14_1. 메인 페이지 웹디자인 기능사 작업
웹디자인 기능사, 웹표준 사이트, GSAP, 포트폴리오 사이트, 유튜브 사이트는 같은 구조로 되어 있습니다. 5번 정도 반복하시게 되면 이제 혼자서도 잘 할 수 있을 겁니다.
데이터를 추가하겠습니다.
data > webd.js 파일을 만들겠습니다.
import webd01 from "../assets/img/webd/webd01.jpg";
import webd02 from "../assets/img/webd/webd02.jpg";
import webd03 from "../assets/img/webd/webd03.jpg";
import webd04 from "../assets/img/webd/webd04.jpg";
import webd05 from "../assets/img/webd/webd05.jpg";
import webd06 from "../assets/img/webd/webd06.jpg";
import webd07 from "../assets/img/webd/webd07.jpg";
import webd08 from "../assets/img/webd/webd08.jpg";
import webd09 from "../assets/img/webd/webd09.jpg";
import webd10 from "../assets/img/webd/webd10.jpg";
import webd11 from "../assets/img/webd/webd11.jpg";
import webd12 from "../assets/img/webd/webd12.jpg";
import webd13 from "../assets/img/webd/webd13.jpg";
import webd14 from "../assets/img/webd/webd14.jpg";
import webd15 from "../assets/img/webd/webd15.jpg";
import webd16 from "../assets/img/webd/webd16.jpg";
import webd17 from "../assets/img/webd/webd17.jpg";
import webd18 from "../assets/img/webd/webd18.jpg";
import webd19 from "../assets/img/webd/webd19.jpg";
import webd20 from "../assets/img/webd/webd20.jpg";
import webd21 from "../assets/img/webd/webd21.jpg";
import webd22 from "../assets/img/webd/webd22.jpg";
import webd23 from "../assets/img/webd/webd23.jpg";
import webd24 from "../assets/img/webd/webd24.jpg";
import webd25 from "../assets/img/webd/webd25.jpg";
import webd26 from "../assets/img/webd/webd26.jpg";
import webd27 from "../assets/img/webd/webd27.jpg";
import webd28 from "../assets/img/webd/webd28.jpg";
import webd29 from "../assets/img/webd/webd29.jpg";
import webd30 from "../assets/img/webd/webd30.jpg";
import webd31 from "../assets/img/webd/webd31.jpg";
import webd32 from "../assets/img/webd/webd32.jpg";
import webd33 from "../assets/img/webd/webd33.jpg";
import webd34 from "../assets/img/webd/webd34.jpg";
import webd35 from "../assets/img/webd/webd35.jpg";
import webd36 from "../assets/img/webd/webd36.jpg";
import webd37 from "../assets/img/webd/webd37.jpg";
import webd38 from "../assets/img/webd/webd38.jpg";
import webd39 from "../assets/img/webd/webd39.jpg";
export const webdText = [
{
title: "웹디자인기능사 2023년 실기 강의 : 레이아웃 유형(A-1) | 웹스토리보이 | 2023 웹디기",
img: webd01,
author: "webstoryboy",
videoId: "OKZXYgAgtyw",
date: "2023.09.09",
channelId: "UCsvQSv7EeCMHyYb9ENKAJZw",
},{
title: "웹디자인기능사 2023년 실기 강의 : 레이아웃 유형(A-2) | 웹스토리보이 | 웹디자인기능사",
img: webd02,
author: "webstoryboy",
videoId: "Yg_NYns8IYA",
date: "2023.09.09",
channelId: "UCsvQSv7EeCMHyYb9ENKAJZw",
},{
title: "웹디자인기능사 2023년 실기 강의 : 레이아웃 유형(A-3) | 웹스토리보이 | 웹디자인기능사 실기",
img: webd03,
author: "webstoryboy",
videoId: "OcQCpfg9QYQ",
date: "2023.09.09",
channelId: "UCsvQSv7EeCMHyYb9ENKAJZw",
},{
title: "웹디자인기능사 2023년 실기 강의 : 레이아웃 유형(A-4) | 웹스토리보이 | 웹디기 독학",
img: webd04,
author: "webstoryboy",
videoId: "3XQMhbcEH88",
date: "2023.09.09",
channelId: "UCsvQSv7EeCMHyYb9ENKAJZw",
},{
title: "웹디자인기능사 2023년 실기 강의 : 레이아웃 유형(B-1) | 웹스토리보이 | 웹디자인기능사 무료로 합격하기",
img: webd05,
author: "webstoryboy",
videoId: "QwNNvxaPg1w",
date: "2023.09.09",
channelId: "UCsvQSv7EeCMHyYb9ENKAJZw",
},{
title: "웹디자인기능사 2023년 실기 강의 : 레이아웃 유형(B-2) | 웹스토리보이 | 웹디자인기능사 실기 독학",
img: webd06,
author: "webstoryboy",
videoId: "pEiNADG7LEI",
date: "2023.09.09",
channelId: "UCsvQSv7EeCMHyYb9ENKAJZw",
},{
title: "웹디자인기능사 2023년 실기 강의 : 레이아웃 유형(B-3) | 웹스토리보이 | 웹디자인기능사 실기 just 쇼핑몰",
img: webd07,
author: "webstoryboy",
videoId: "pLxtF5yAw84",
date: "2023.09.09",
channelId: "UCsvQSv7EeCMHyYb9ENKAJZw",
},{
title: "웹디자인기능사 2023년 실기 강의 : 레이아웃 유형(B-4) | 웹스토리보이 | 웹디자인기능사 실기 슬라이드",
img: webd08,
author: "webstoryboy",
videoId: "rlB7s-hJ398",
date: "2023.09.09",
channelId: "UCsvQSv7EeCMHyYb9ENKAJZw",
},{
title: "웹디자인기능사 2023년 실기 강의 : 레이아웃 유형(C-1) | 웹스토리보이 | 웹디자인기능사 실기",
img: webd09,
author: "webstoryboy",
videoId: "i5KPtxLRCyc",
date: "2023.09.09",
channelId: "UCsvQSv7EeCMHyYb9ENKAJZw",
},{
title: "웹디자인기능사 2023년 실기 강의 : 레이아웃 유형(C-2) | 웹스토리보이 | 웹디기 독학",
img: webd10,
author: "webstoryboy",
videoId: "P1fm-pfOQZA",
date: "2023.09.09",
channelId: "UCsvQSv7EeCMHyYb9ENKAJZw",
},{
title: "웹디자인기능사 2023년 실기 강의 : 레이아웃 유형(C-3) | 웹스토리보이 | 웹디자인 | 웹퍼블리셔",
img: webd11,
author: "webstoryboy",
videoId: "SLQHfhDkZxE",
date: "2023.09.09",
channelId: "UCsvQSv7EeCMHyYb9ENKAJZw",
},{
title: "웹디자인기능사 2023년 실기 강의 : 레이아웃 유형(C-4) | 웹스토리보이 | 웹디자인기능사 레이아웃",
img: webd12,
author: "webstoryboy",
videoId: "ojTAbAPWVPo",
date: "2023.09.09",
channelId: "UCsvQSv7EeCMHyYb9ENKAJZw",
},{
title: "웹디자인기능사 2023년 실기 강의 : 레이아웃 유형(D-1) | 웹스토리보이 | 웹디자인기능사 실기 포토샵",
img: webd13,
author: "webstoryboy",
videoId: "CZRVhkRr3Ak",
date: "2023.09.09",
channelId: "UCsvQSv7EeCMHyYb9ENKAJZw",
},{
title: "웹디자인기능사 2023년 실기 강의 : 레이아웃 유형(D-2) | 웹스토리보이 | 웹디자인기능사 실기 기출문제",
img: webd14,
author: "webstoryboy",
videoId: "fMtNDR7AsNc",
date: "2023.09.09",
channelId: "UCsvQSv7EeCMHyYb9ENKAJZw",
},{
title: "웹디자인기능사 2023년 실기 강의 : 레이아웃 유형(D-3) | 웹스토리보이 | 웹웹디자인기능사 실기 2023",
img: webd15,
author: "webstoryboy",
videoId: "ix3_Fj3XM7g",
date: "2023.09.09",
channelId: "UCsvQSv7EeCMHyYb9ENKAJZw",
},{
title: "웹디자인기능사 2023년 실기 강의 : 레이아웃 유형(D-4) | 웹스토리보이 | 웹디자인기능사 실기 후기",
img: webd16,
author: "webstoryboy",
videoId: "75MguOwcKHE",
date: "2023.09.09",
channelId: "UCsvQSv7EeCMHyYb9ENKAJZw",
},{
title: "웹디자인기능사 2023년 실기 강의 : 레이아웃 유형(E-1) | 웹스토리보이 | 웹디자인기능사 실기 d유형",
img: webd17,
author: "webstoryboy",
videoId: "EtK5SlmOlvw",
date: "2023.09.09",
channelId: "UCsvQSv7EeCMHyYb9ENKAJZw",
},{
title: "웹디자인기능사 2023년 실기 강의 : 레이아웃 유형(E-2) | 웹스토리보이 | 웹디자인기능사 실기 비주얼스튜디오",
img: webd18,
author: "webstoryboy",
videoId: "OwimPPHqt1A",
date: "2023.09.09",
channelId: "UCsvQSv7EeCMHyYb9ENKAJZw",
},{
title: "웹디자인기능사 2023년 실기 강의 : 레이아웃 유형(E-3) | 웹스토리보이 | 웹디자인기능사 실기 기출문제",
img: webd19,
author: "webstoryboy",
videoId: "kLYD9llonRs",
date: "2023.09.09",
channelId: "UCsvQSv7EeCMHyYb9ENKAJZw",
},{
title: "웹디자인기능사 2023년 실기 강의 : 레이아웃 유형(E-4) | 웹스토리보이 | 웹디기 레이아웃",
img: webd20,
author: "webstoryboy",
videoId: "fFpUdBY7r4s",
date: "2023.09.09",
channelId: "UCsvQSv7EeCMHyYb9ENKAJZw",
},{
title: "웹디자인기능사 2023년 실기 강의 : 메뉴 가로 유형(M-1) | 웹스토리보이 | 메뉴 제이쿼리",
img: webd21,
author: "webstoryboy",
videoId: "HUyjtgZAeXU",
date: "2023.09.09",
channelId: "UCsvQSv7EeCMHyYb9ENKAJZw",
},{
title: "웹디자인기능사 2023년 실기 강의 : 메뉴 가로 유형(M-2) | 웹스토리보이 | 자바스크립트",
img: webd22,
author: "webstoryboy",
videoId: "38bKoEVVOk4",
date: "2023.09.09",
channelId: "UCsvQSv7EeCMHyYb9ENKAJZw",
},{
title: "웹디자인기능사 2023년 실기 강의 : 메뉴 가로 유형(M-3) | 웹스토리보이 | 메뉴 가로 스크립트",
img: webd23,
author: "webstoryboy",
videoId: "mdrsNRupoJY",
date: "2023.09.09",
channelId: "UCsvQSv7EeCMHyYb9ENKAJZw",
},{
title: "웹디자인기능사 2023년 실기 강의 : 메뉴 세로 유형(M-4) | 웹스토리보이 | 메뉴 스크립트",
img: webd24,
author: "webstoryboy",
videoId: "KZoi7THJc08",
date: "2023.09.09",
channelId: "UCsvQSv7EeCMHyYb9ENKAJZw",
},{
title: "웹디자인기능사 2023년 실기 강의 : 메뉴 세로 유형(M-5) | 웹스토리보이 | 메뉴 제이쿼리",
img: webd25,
author: "webstoryboy",
videoId: "qkqBOgTEZ5c",
date: "2023.09.09",
channelId: "UCsvQSv7EeCMHyYb9ENKAJZw",
},{
title: "웹디자인기능사 2023년 실기 강의 : 메뉴 세로 유형(M-6) | 웹스토리보이 | 메뉴 자바스크립트",
img: webd26,
author: "webstoryboy",
videoId: "0ns-3YaKnCw",
date: "2023.09.09",
channelId: "UCsvQSv7EeCMHyYb9ENKAJZw",
},{
title: "웹디자인기능사 2023년 실기 강의 : 슬라이드 유형(S-1) | 웹스토리보이 | 이미지 슬라이드",
img: webd27,
author: "webstoryboy",
videoId: "Cb4aVA_bMfw",
date: "2023.09.09",
channelId: "UCsvQSv7EeCMHyYb9ENKAJZw",
},{
title: "웹디자인기능사 2023년 실기 강의 : 슬라이드 유형(S-2) | 웹스토리보이 | 이미지 슬라이드 자바스크립트",
img: webd28,
author: "webstoryboy",
videoId: "MoQ9LKOfkfQ",
date: "2023.09.09",
channelId: "UCsvQSv7EeCMHyYb9ENKAJZw",
},{
title: "웹디자인기능사 2023년 실기 강의 : 슬라이드 유형(S-3) | 웹스토리보이 | 이미지 슬라이드 제이쿼리",
img: webd29,
author: "webstoryboy",
videoId: "oaCr25Vy-hw",
date: "2023.09.09",
channelId: "UCsvQSv7EeCMHyYb9ENKAJZw",
},{
title: "웹디자인기능사 2023년 실기 강의 : 슬라이드 유형(S-4) | 웹스토리보이 | 이미지 슬라이드 페이드 효과 반응형",
img: webd30,
author: "webstoryboy",
videoId: "tt4yj_JVuLk",
date: "2023.09.09",
channelId: "UCsvQSv7EeCMHyYb9ENKAJZw",
},{
title: "웹디자인기능사 2023년 실기 강의 : 슬라이드 유형(S-5) | 웹스토리보이 | 이미지 슬라이드 좌우 반응형",
img: webd31,
author: "webstoryboy",
videoId: "TCrVOaAUFec",
date: "2023.09.09",
channelId: "UCsvQSv7EeCMHyYb9ENKAJZw",
},{
title: "웹디자인기능사 2023년 실기 강의 : 슬라이드 유형(S-6) | 웹스토리보이 | 이미지 슬라이드 위아래 반응형",
img: webd32,
author: "webstoryboy",
videoId: "PARnjHoyofk",
date: "2023.09.09",
channelId: "UCsvQSv7EeCMHyYb9ENKAJZw",
},{
title: "웹디자인기능사 2023년 실기 강의 : 탭메뉴 유형(T-1) | 웹스토리보이 | 탭 메뉴 스크립트",
img: webd33,
author: "webstoryboy",
videoId: "gEw-jRrWOUo",
date: "2023.09.09",
channelId: "UCsvQSv7EeCMHyYb9ENKAJZw",
},{
title: "웹디자인기능사 2023년 실기 강의 : 팝업 유형(P-1) | 웹스토리보이 | 팝업 | 레이어 팝업",
img: webd34,
author: "webstoryboy",
videoId: "kr7vQaS8C6Q",
date: "2023.09.09",
channelId: "UCsvQSv7EeCMHyYb9ENKAJZw",
},{
title: "웹디자인기능사 2023년 실기 강의 : 실전 사이트 연습 : A유형",
img: webd35,
author: "webstoryboy",
videoId: "Yj1fQB_09fg",
date: "2023.09.09",
channelId: "UCsvQSv7EeCMHyYb9ENKAJZw",
},{
title: "웹디자인기능사 2023년 실기 강의 : 실전 사이트 연습 : B유형",
img: webd36,
author: "webstoryboy",
videoId: "zIRhhGuj_v4",
date: "2023.09.09",
channelId: "UCsvQSv7EeCMHyYb9ENKAJZw",
},{
title: "웹디자인기능사 2023년 실기 강의 : 실전 사이트 연습 : C유형",
img: webd37,
author: "webstoryboy",
videoId: "ZgalH_xl9oc",
date: "2023.09.09",
channelId: "UCsvQSv7EeCMHyYb9ENKAJZw",
},{
title: "웹디자인기능사 2023년 실기 강의 : 실전 사이트 연습 : D유형",
img: webd38,
author: "webstoryboy",
videoId: "ykarD4oUoaM",
date: "2023.09.09",
channelId: "UCsvQSv7EeCMHyYb9ENKAJZw",
},{
title: "웹디자인기능사 2023년 실기 강의 : 실전 사이트 연습 : E유형",
img: webd39,
author: "webstoryboy",
videoId: "IkJXy4zpQUM",
date: "2023.09.09",
channelId: "UCsvQSv7EeCMHyYb9ENKAJZw",
},
]
components > contents > Webd.jsx 파일을 수정하겠습니다.
import React from 'react'
import { webdText } from '../../data/webd'
import { Link } from 'react-router-dom'
const Webd = () => {
return (
<section id='webd'>
<h2>😮 웹디자인기능사 준비는 이걸로!</h2>
<div className='video__inner'>
{webdText.map((video, key) => (
<div className="video" key={key}>
<div className="video__thumb play__icon">
<Link to={`/video/${video.videoId}`}>
<img src={video.img} alt={video.title} />
</Link>
</div>
</div>
))}
</div>
</section>
)
}
export default Webd
scss > section > _video.scss 파일을 수정하겠습니다.
SCSS 파일을 추가하면 style.scss에 추가하여야 연동이 됩니다.
.video__inner {
display: grid;
grid-template-columns: repeat(4, 24%);
justify-content: space-between;
@media (max-width: 1400px){
grid-template-columns: repeat(3, 32%);
gap: 15px;
}
@media (max-width: 1200px){
grid-template-columns: repeat(2, 49%);
gap: 10px;
}
@media (max-width: 400px){
grid-template-columns: repeat(1, 100%);
}
.video {
margin-bottom: 20px;
}
}메인 페이지 웹디자인 기능사 섹션은 다음과 같이 나옵니다.
14_2. 웹표준 사이트 컴퍼넌트 작업
이번에도 동일한 방식으로 작업해보겠습니다.
데이터를 추가하겠습니다.
data > website.js 파일을 만들겠습니다.
import website01 from "../assets/img/site/site01.jpg";
import website02 from "../assets/img/site/site02.jpg";
import website03 from "../assets/img/site/site03.jpg";
import website04 from "../assets/img/site/site04.jpg";
import website05 from "../assets/img/site/site05.jpg";
import website06 from "../assets/img/site/site06.jpg";
import website07 from "../assets/img/site/site07.jpg";
import website08 from "../assets/img/site/site08.jpg";
import website09 from "../assets/img/site/site09.jpg";
import website10 from "../assets/img/site/site10.jpg";
import website11 from "../assets/img/site/site11.jpg";
import website12 from "../assets/img/site/site12.jpg";
import website13 from "../assets/img/site/site13.jpg";
import website14 from "../assets/img/site/site14.jpg";
import website15 from "../assets/img/site/site15.jpg";
import website16 from "../assets/img/site/site16.jpg";
import website17 from "../assets/img/site/site17.jpg";
import website18 from "../assets/img/site/site18.jpg";
import website19 from "../assets/img/site/site19.jpg";
import website20 from "../assets/img/site/site20.jpg";
import website21 from "../assets/img/site/site21.jpg";
import website22 from "../assets/img/site/site22.jpg";
export const websiteText = [
{
title: "01. 웹표준 사이트 만들기 : 디자인 : 헤더 유형01 / 피그마(Figma)로 작업하기 / 웹스토리보이",
img: website01,
author: "webstoryboy",
videoId: "OKZXYgAgtyw",
date: "2023.09.09",
channelId: "UCsvQSv7EeCMHyYb9ENKAJZw",
},{
title: "02. 웹표준 사이트 만들기 : 디자인 : 슬라이드 유형01 / 피그마(Figma)로 작업하기 / 웹스토리보이",
img: website02,
author: "webstoryboy",
videoId: "Qs4viazDmdU",
date: "2023.09.09",
channelId: "UCsvQSv7EeCMHyYb9ENKAJZw",
},{
title: "03. 웹표준 사이트 만들기 : 디자인 : 이미지 유형01 / 피그마(Figma)로 작업하기 / 웹사이트 만들기",
img: website03,
author: "webstoryboy",
videoId: "yh4MUO05ils",
date: "2023.09.09",
channelId: "UCsvQSv7EeCMHyYb9ENKAJZw",
},{
title: "04. 웹표준 사이트 만들기 : 디자인 : 이미지/텍스트 유형01 / 피그마(Figma)로 작업하기 / 사이트 만들기",
img: website04,
author: "webstoryboy",
videoId: "nxpQq7wM7m0",
date: "2023.09.09",
channelId: "UCsvQSv7EeCMHyYb9ENKAJZw",
},{
title: "05. 웹표준 사이트 만들기 : 디자인 : 카드 유형01 / 피그마(Figma)로 작업하기 / 나도코딩",
img: website05,
author: "webstoryboy",
videoId: "hN_oia3ftOk",
date: "2023.09.09",
channelId: "UCsvQSv7EeCMHyYb9ENKAJZw",
},{
title: "06. 웹표준 사이트 만들기 : 디자인 : 배너 유형01 / 피그마(Figma)로 작업하기 / 코딩 기초",
img: website06,
author: "webstoryboy",
videoId: "-JEzrg5yg9g",
date: "2023.09.09",
channelId: "UCsvQSv7EeCMHyYb9ENKAJZw",
},{
title: "07. 웹표준 사이트 만들기 : 디자인 : 텍스트 유형01 / 피그마(Figma)로 작업하기 / 코딩 독학",
img: website07,
author: "webstoryboy",
videoId: "zN4kK-RjFXE",
date: "2023.09.09",
channelId: "UCsvQSv7EeCMHyYb9ENKAJZw",
},{
title: "08. 웹표준 사이트 만들기 : 디자인 : 푸터 유형01 / 피그마(Figma)로 작업하기 / 피그마 강의",
img: website08,
author: "webstoryboy",
videoId: "Wu2piDp007M",
date: "2023.09.09",
channelId: "UCsvQSv7EeCMHyYb9ENKAJZw",
},{
title: "09. 웹표준 사이트 만들기 : 디자인 : 완성 / 피그마(Figma)로 작업하기 / 피그마 기초",
img: website09,
author: "webstoryboy",
videoId: "2CPRqp21mWM",
date: "2023.09.09",
channelId: "UCsvQSv7EeCMHyYb9ENKAJZw",
},{
title: "10. 웹표준 사이트 만들기 : 레이아웃 : 레이아웃 유형01 / 홈페이지 만들기 / 웹스토리보이",
img: website10,
author: "webstoryboy",
videoId: "qnwa6I5WosI",
date: "2023.09.09",
channelId: "UCsvQSv7EeCMHyYb9ENKAJZw",
},{
title: "11. 웹표준 사이트 만들기 : 레이아웃 : 레이아웃 유형02 / 웹사이트 만들기 / HTML / CSS",
img: website11,
author: "webstoryboy",
videoId: "dNQZqNd_uUE",
date: "2023.09.09",
channelId: "UCsvQSv7EeCMHyYb9ENKAJZw",
},{
title: "12. 웹표준 사이트 만들기 : 레이아웃 : 레이아웃 유형03 / 웹사이트 만들기 / JavaScript / CSS",
img: website12,
author: "webstoryboy",
videoId: "uh8gxb3f8gA",
date: "2023.09.09",
channelId: "UCsvQSv7EeCMHyYb9ENKAJZw",
},{
title: "13. 웹표준 사이트 만들기 : 레이아웃 : 레이아웃 유형04 / 웹사이트 만들기 / JavaScript / CSS",
img: website13,
author: "webstoryboy",
videoId: "q4_4J_qt-As",
date: "2023.09.09",
channelId: "UCsvQSv7EeCMHyYb9ENKAJZw",
},{
title: "14. 웹표준 사이트 만들기 : 레이아웃 : 레이아웃 유형05 / 웹사이트 만들기 / Grid / Flex / Float",
img: website14,
author: "webstoryboy",
videoId: "MFGsZYECt0Q",
date: "2023.09.09",
channelId: "UCsvQSv7EeCMHyYb9ENKAJZw",
},{
title: "15. 웹표준 사이트 만들기 : 코딩 : 헤더 유형01 / 웹사이트 만들기 / 웹퍼블리셔 / 포트폴리오",
img: website15,
author: "webstoryboy",
videoId: "y2O1zykEyFQ",
date: "2023.09.09",
channelId: "UCsvQSv7EeCMHyYb9ENKAJZw",
},{
title: "16. 웹표준 사이트 만들기 : 코딩 : 슬라이드 유형01 / 웹사이트 만들기 / 웹 퍼블리셔 / 포트폴리오",
img: website16,
author: "webstoryboy",
videoId: "jjHLaeG4BCs",
date: "2023.09.09",
channelId: "UCsvQSv7EeCMHyYb9ENKAJZw",
},{
title: "17. 웹표준 사이트 만들기 : 코딩 : 이미지 유형01 / 웹사이트 만들기 / HTML 기초",
img: website17,
author: "webstoryboy",
videoId: "TpIIwvSF2bI",
date: "2023.09.09",
channelId: "UCsvQSv7EeCMHyYb9ENKAJZw",
},{
title: "18. 웹표준 사이트 만들기 : 코딩 : 이미지/텍스트 유형01 / 웹사이트 만들기 / CSS 기초",
img: website18,
author: "webstoryboy",
videoId: "gQxn_1RZeTw",
date: "2023.09.09",
channelId: "UCsvQSv7EeCMHyYb9ENKAJZw",
},{
title: "19. 웹표준 사이트 만들기 : 코딩 : 카드 유형01 / 웹사이트 만들기 / CSS 강의 / HTML 강의",
img: website19,
author: "webstoryboy",
videoId: "R6aywQlO9Ok",
date: "2023.09.09",
channelId: "UCsvQSv7EeCMHyYb9ENKAJZw",
},{
title: "20. 웹표준 사이트 만들기 : 코딩 : 배너 유형01 / 웹사이트 만들기 / CSS 강의 / HTML 강의",
img: website20,
author: "webstoryboy",
videoId: "4cViXYJsAh0",
date: "2023.09.09",
channelId: "UCsvQSv7EeCMHyYb9ENKAJZw",
},{
title: "21. 웹표준 사이트 만들기 : 코딩 : 텍스트 유형01 / 웹사이트 만들기 / HTML / CSS / JAVASCRIPT",
img: website21,
author: "webstoryboy",
videoId: "4qQGji7V-GY",
date: "2023.09.09",
channelId: "UCsvQSv7EeCMHyYb9ENKAJZw",
},{
title: "22. 웹표준 사이트 만들기 : 코딩 : 푸터 유형01 / 웹사이트 만들기 / HTML 웹사이트 만들기",
img: website22,
author: "webstoryboy",
videoId: "crArpiJeLoU",
date: "2023.09.09",
channelId: "UCsvQSv7EeCMHyYb9ENKAJZw",
},{
title: "22. 웹표준 사이트 만들기 : 코딩 : 푸터 유형01 / 웹사이트 만들기 / HTML 웹사이트 만들기",
img: website22,
author: "webstoryboy",
videoId: "crArpiJeLoU",
date: "2023.09.09",
channelId: "UCsvQSv7EeCMHyYb9ENKAJZw",
}
]
components > contents > Website.jsx 파일을 수정하겠습니다.
import React from 'react'
import { websiteText } from '../../data/website'
import { Link } from 'react-router-dom'
const Website = () => {
return (
<section id='website'>
<h2>😛 웹표준 사이트 만들기 기초 다지기</h2>
<div className='video__inner'>
{websiteText.map((video, key) => (
<div className="video" key={key}>
<div className="video__thumb play__icon">
<Link to={`/video/${video.videoId}`}>
<img src={video.img} alt={video.title} />
</Link>
</div>
</div>
))}
</div>
</section>
)
}
export default Website메인 페이지 웹표준 사이트 만들기 섹션은 다음과 같이 나옵니다.
14_3. GSAP 사이트 컴퍼넌트 작업
이번에도 동일한 방식으로 작업해보겠습니다.
데이터를 추가하겠습니다.
data > gsap.js 파일을 만들겠습니다.
import gsap01 from "../assets/img/gsap/gsap01.jpg";
import gsap02 from "../assets/img/gsap/gsap02.jpg";
import gsap03 from "../assets/img/gsap/gsap03.jpg";
import gsap04 from "../assets/img/gsap/gsap04.jpg";
import gsap05 from "../assets/img/gsap/gsap05.jpg";
import gsap06 from "../assets/img/gsap/gsap06.jpg";
import gsap07 from "../assets/img/gsap/gsap07.jpg";
import gsap08 from "../assets/img/gsap/gsap08.jpg";
import gsap09 from "../assets/img/gsap/gsap09.jpg";
import gsap10 from "../assets/img/gsap/gsap10.jpg";
import gsap11 from "../assets/img/gsap/gsap11.jpg";
import gsap12 from "../assets/img/gsap/gsap12.jpg";
import gsap13 from "../assets/img/gsap/gsap13.jpg";
import gsap14 from "../assets/img/gsap/gsap14.jpg";
import gsap15 from "../assets/img/gsap/gsap15.jpg";
export const gsapText = [
{
title: "01. GSAP Parallax Effect : 기본 애니메이션(feat. scrollTrigger) | 웹스토리보이",
img: gsap01,
author: "webstoryboy",
videoId: "_rAAY_Zp4FI",
date: "2023.09.09",
channelId: "UCsvQSv7EeCMHyYb9ENKAJZw",
},{
title: "02. GSAP Parallax Effect : PIN 애니메이션(feat. scrollTrigger) | 웹스토리보이 | 포트폴리오",
img: gsap02,
author: "webstoryboy",
videoId: "T9kkvtHaq8E",
date: "2023.09.09",
channelId: "UCsvQSv7EeCMHyYb9ENKAJZw",
},{
title: "03. GSAP Parallax Effect : PIN 배경 고정하기(feat. scrollTrigger) | 웹스토리보이 | 스크롤 효과",
img: gsap03,
author: "webstoryboy",
videoId: "bP7iGE3YKOU",
date: "2023.09.09",
channelId: "UCsvQSv7EeCMHyYb9ENKAJZw",
},{
title: "04. GSAP Parallax Effect : 이질감 효과(feat. scrollTrigger) | 웹스토리보이 | 스크롤 효과",
img: gsap04,
author: "webstoryboy",
videoId: "neBcJlgfu_o",
date: "2023.09.09",
channelId: "UCsvQSv7EeCMHyYb9ENKAJZw",
},{
title: "05. GSAP Parallax Effect : 나타나기 효과(feat. scrollTrigger) | 웹스토리보이 | 포폴 이펙트",
img: gsap05,
author: "webstoryboy",
videoId: "9lnfRXTXzL0",
date: "2023.09.09",
channelId: "UCsvQSv7EeCMHyYb9ENKAJZw",
},{
title: "06. GSAP Parallax Effect : 텍스트 효과(feat. scrollTrigger) | 웹스토리보이 | 텍스트 이펙트",
img: gsap06,
author: "webstoryboy",
videoId: "gzJnKZGsB-Y",
date: "2023.09.09",
channelId: "UCsvQSv7EeCMHyYb9ENKAJZw",
},{
title: "07. GSAP Parallax Effect : 배경색 효과(feat. scrollTrigger) | 웹스토리보이 | 배경 바꾸기",
img: gsap07,
author: "webstoryboy",
videoId: "kE0QRWPBVKs",
date: "2023.09.09",
channelId: "UCsvQSv7EeCMHyYb9ENKAJZw",
},{
title: "08. GSAP Parallax Effect : 진행바 효과(feat. scrollTrigger) | 웹스토리보이 | progress",
img: gsap08,
author: "webstoryboy",
videoId: "pLgDSor_27g",
date: "2023.09.09",
channelId: "UCsvQSv7EeCMHyYb9ENKAJZw",
},{
title: "09. GSAP Parallax Effect : 메뉴 이동 효과 (feat. scrollTrigger) | 웹스토리보이 | 메뉴 클릭하기",
img: gsap09,
author: "webstoryboy",
videoId: "d5xSXS1UZFY",
date: "2023.09.09",
channelId: "UCsvQSv7EeCMHyYb9ENKAJZw",
},{
title: "10. GSAP Parallax Effect : 메뉴 축소 효과 (feat. scrollTrigger) | 웹스토리보이 | 메뉴 바꾸기",
img: gsap10,
author: "webstoryboy",
videoId: "Z2NeyjasCdY",
date: "2023.09.09",
channelId: "UCsvQSv7EeCMHyYb9ENKAJZw",
},{
title: "11. GSAP Parallax Effect : 메뉴 숨기기 효과 (feat. scrollTrigger) | 웹스토리보이 | 메뉴 바꾸기",
img: gsap11,
author: "webstoryboy",
videoId: "zMBXXAl7MaY",
date: "2023.09.09",
channelId: "UCsvQSv7EeCMHyYb9ENKAJZw",
},{
title: "12. GSAP Parallax Effect : 가로 효과 (feat. scrollTrigger) | 웹스토리보이 | 가로 사이트",
img: gsap12,
author: "webstoryboy",
videoId: "DCtCgE08E8I",
date: "2023.09.09",
channelId: "UCsvQSv7EeCMHyYb9ENKAJZw",
},{
title: "13. GSAP Parallax Effect : 가로/세로 효과 (feat. scrollTrigger) | 웹스토리보이 | 가로세로 사이트",
img: gsap13,
author: "webstoryboy",
videoId: "YPzwvzFfCfU",
date: "2023.09.09",
channelId: "UCsvQSv7EeCMHyYb9ENKAJZw",
},{
title: "14. GSAP Parallax Effect : 가로/세로 나타나기 효과 (feat. scrollTrigger) | 웹스토리보이 | 포폴사이트",
img: gsap14,
author: "webstoryboy",
videoId: "puCe3ollwTg",
date: "2023.09.09",
channelId: "UCsvQSv7EeCMHyYb9ENKAJZw",
},{
title: "15. GSAP Parallax Effect : 스무스 효과 (feat. scrollTrigger) | 웹스토리보이 | 포폴은 스무스지",
img: gsap15,
author: "webstoryboy",
videoId: "tMsFs6GoXmg",
date: "2023.09.09",
channelId: "UCsvQSv7EeCMHyYb9ENKAJZw",
}
]
components > contents > Gsap.jsx 파일을 수정하겠습니다.
import React from 'react'
import { gsapText } from '../../data/gsap'
import { Link } from 'react-router-dom'
const Gsap = () => {
return (
<section id='gsap'>
<h2>🤓 GSAP 패럴랙스 효과를 하고 싶다면!</h2>
<div className='video__inner'>
{gsapText.map((video, key) => (
<div className="video" key={key}>
<div className="video__thumb play__icon">
<Link to={`/video/${video.videoId}`}>
<img src={video.img} alt={video.title} />
</Link>
</div>
</div>
))}
</div>
</section>
)
}
export default Gsap메인 페이지 웹표준 사이트 만들기 섹션은 다음과 같이 나옵니다.
14_4. 포트폴리오 사이트 컴퍼넌트 작업
이번에도 동일한 방식으로 작업해보겠습니다.
데이터를 추가하겠습니다.
data > portfolio.js 파일을 만들겠습니다.
import port01 from "../assets/img/port/port-vite01.jpg";
import port02 from "../assets/img/port/port-vite02.jpg";
import port03 from "../assets/img/port/port-vite03.jpg";
import port04 from "../assets/img/port/port-vite04.jpg";
import port05 from "../assets/img/port/port-vite05.jpg";
import port06 from "../assets/img/port/port-vite06.jpg";
import port07 from "../assets/img/port/port-vite07.jpg";
import port08 from "../assets/img/port/port-vite08.jpg";
import port09 from "../assets/img/port/port-vite09.jpg";
import port10 from "../assets/img/port/port-vite10.jpg";
import port11 from "../assets/img/port/port-react01.jpg";
import port12 from "../assets/img/port/port-react02.jpg";
import port13 from "../assets/img/port/port-react03.jpg";
import port14 from "../assets/img/port/port-react04.jpg";
import port15 from "../assets/img/port/port-react05.jpg";
import port16 from "../assets/img/port/port-react06.jpg";
import port17 from "../assets/img/port/port-react07.jpg";
import port18 from "../assets/img/port/port-react08.jpg";
import port19 from "../assets/img/port/port-react09.jpg";
import port20 from "../assets/img/port/port-react10.jpg";
import port21 from "../assets/img/port/port-vue01.jpg";
import port22 from "../assets/img/port/port-vue02.jpg";
import port23 from "../assets/img/port/port-vue03.jpg";
import port24 from "../assets/img/port/port-vue04.jpg";
import port25 from "../assets/img/port/port-vue05.jpg";
import port26 from "../assets/img/port/port-vue06.jpg";
import port27 from "../assets/img/port/port-vue07.jpg";
import port28 from "../assets/img/port/port-vue08.jpg";
import port29 from "../assets/img/port/port-vue09.jpg";
import port30 from "../assets/img/port/port-vue10.jpg";
import port31 from "../assets/img/port/port-next01.jpg";
import port32 from "../assets/img/port/port-next02.jpg";
import port33 from "../assets/img/port/port-next03.jpg";
import port34 from "../assets/img/port/port-next04.jpg";
import port35 from "../assets/img/port/port-next05.jpg";
import port36 from "../assets/img/port/port-next06.jpg";
import port37 from "../assets/img/port/port-next07.jpg";
import port38 from "../assets/img/port/port-next08.jpg";
import port39 from "../assets/img/port/port-next09.jpg";
import port40 from "../assets/img/port/port-next10.jpg";
export const portfolioText = [
{
title: "01. 다양한 프레임워크로 구축하는 포트폴리오 사이트 개발 : Vite : 셋팅하기 | 웹스토리보이 | 포트폴리오",
img: port01,
author: "webstoryboy",
videoId: "2ZiZlEvtWgM",
date: "2023.09.09",
channelId: "UCsvQSv7EeCMHyYb9ENKAJZw",
},{
title: "02. 다양한 프레임워크로 구축하는 포트폴리오 사이트 개발 : Vite : 레이아웃 | 프론트앤드 | 포트폴리오",
img: port02,
author: "webstoryboy",
videoId: "qEHaq4M2lXs",
date: "2023.09.09",
channelId: "UCsvQSv7EeCMHyYb9ENKAJZw",
},{
title: "03. 다양한 프레임워크로 구축하는 포트폴리오 사이트 개발 : Vite : 헤더 영역 | 웹스토리보이 | 포트폴리오",
img: port03,
author: "webstoryboy",
videoId: "fzH2LsKoVdg",
date: "2023.09.09",
channelId: "UCsvQSv7EeCMHyYb9ENKAJZw",
},{
title: "04. 다양한 프레임워크로 구축하는 포트폴리오 사이트 개발 : Vite : 인트로 영역 | 웹스토리보이 | 리액트",
img: port04,
author: "webstoryboy",
videoId: "N4itpjUEqss",
date: "2023.09.09",
channelId: "UCsvQSv7EeCMHyYb9ENKAJZw",
},{
title: "05. 다양한 프레임워크로 구축하는 포트폴리오 사이트 개발 : Vite : 스킬 영역 | 웹스토리보이 | 비트",
img: port05,
author: "webstoryboy",
videoId: "8FemQEZVAyQ",
date: "2023.09.09",
channelId: "UCsvQSv7EeCMHyYb9ENKAJZw",
},{
title: "06. 다양한 프레임워크로 구축하는 포트폴리오 사이트 개발 : Vite : 사이트 영역 | 웹스토리보이 | 포폴",
img: port06,
author: "webstoryboy",
videoId: "HoMX0lQfzvg",
date: "2023.09.09",
channelId: "UCsvQSv7EeCMHyYb9ENKAJZw",
},{
title: "07. 다양한 프레임워크로 구축하는 포트폴리오 사이트 개발 : Vite : 포트폴리오 영역 | 웹스토리보이 | 자바스크립트",
img: port07,
author: "webstoryboy",
videoId: "AEVpBAeXOBQ",
date: "2023.09.09",
channelId: "UCsvQSv7EeCMHyYb9ENKAJZw",
},{
title: "08. 다양한 프레임워크로 구축하는 포트폴리오 사이트 개발 : Vite : 연락처 영역 | 웹스토리보이 | 퍼블리셔",
img: port08,
author: "webstoryboy",
videoId: "mjZISLURugw",
date: "2023.09.09",
channelId: "UCsvQSv7EeCMHyYb9ENKAJZw",
},{
title: "09. 다양한 프레임워크로 구축하는 포트폴리오 사이트 개발 : Vite : 푸터 영역 | 웹스토리보이 | 사이트제작",
img: port09,
author: "webstoryboy",
videoId: "r2Gv5a_SJcY",
date: "2023.09.09",
channelId: "UCsvQSv7EeCMHyYb9ENKAJZw",
},{
title: "10. 다양한 프레임워크로 구축하는 포트폴리오 사이트 개발 : Vite : 스킬 영역 | 웹스토리보이 | 비트",
img: port10,
author: "webstoryboy",
videoId: "ePvRxd2d4Ss",
date: "2023.09.09",
channelId: "UCsvQSv7EeCMHyYb9ENKAJZw",
},{
title: "11. 다양한 프레임워크로 구축하는 포트폴리오 사이트 개발 : React : 셋팅하기 | 프레임워크 | 리액트",
img: port11,
author: "webstoryboy",
videoId: "Og-tmd7OsI8",
date: "2023.09.09",
channelId: "UCsvQSv7EeCMHyYb9ENKAJZw",
},{
title: "12. 다양한 프레임워크로 구축하는 포트폴리오 사이트 개발 : React : 컨퍼넌트 | 프레임워크 | 리액트",
img: port12,
author: "webstoryboy",
videoId: "AxXNdkxPkPE",
date: "2023.09.09",
channelId: "UCsvQSv7EeCMHyYb9ENKAJZw",
},{
title: "13. 다양한 프레임워크로 구축하는 포트폴리오 사이트 개발 : React : 헤더영역 | 포트폴리오 | 리액트",
img: port13,
author: "webstoryboy",
videoId: "z1dUDfcry1s",
date: "2023.09.09",
channelId: "UCsvQSv7EeCMHyYb9ENKAJZw",
},{
title: "14. 다양한 프레임워크로 구축하는 포트폴리오 사이트 개발 : React : 인트로 영역 | 포트폴리오 | 리액트",
img: port14,
author: "webstoryboy",
videoId: "iYTyX1rxfbM",
date: "2023.09.09",
channelId: "UCsvQSv7EeCMHyYb9ENKAJZw",
},{
title: "15. 다양한 프레임워크로 구축하는 포트폴리오 사이트 개발 : React : 스킬 영역 | 포트폴리오 | 리액트",
img: port15,
author: "webstoryboy",
videoId: "Uxebhc16cZ0",
date: "2023.09.09",
channelId: "UCsvQSv7EeCMHyYb9ENKAJZw",
},{
title: "16. 다양한 프레임워크로 구축하는 포트폴리오 사이트 개발 : React : 사이트 영역 | 포트폴리오 | 리액트",
img: port16,
author: "webstoryboy",
videoId: "odEkjiLIfQg",
date: "2023.09.09",
channelId: "UCsvQSv7EeCMHyYb9ENKAJZw",
},{
title: "17. 다양한 프레임워크로 구축하는 포트폴리오 사이트 개발 : React : 포트폴리오 영역 | 포트폴리오 | 리액트",
img: port17,
author: "webstoryboy",
videoId: "OIx3E6qe5qM",
date: "2023.09.09",
channelId: "UCsvQSv7EeCMHyYb9ENKAJZw",
},{
title: "18. 다양한 프레임워크로 구축하는 포트폴리오 사이트 개발 : React : 연락처 영역 | 포트폴리오 | 리액트",
img: port18,
author: "webstoryboy",
videoId: "oIO9Ko-GoSo",
date: "2023.09.09",
channelId: "UCsvQSv7EeCMHyYb9ENKAJZw",
},{
title: "19. 다양한 프레임워크로 구축하는 포트폴리오 사이트 개발 : React : 푸터 영역 | 포트폴리오 | 리액트",
img: port19,
author: "webstoryboy",
videoId: "hViAdG0qqkk",
date: "2023.09.09",
channelId: "UCsvQSv7EeCMHyYb9ENKAJZw",
},{
title: "20. 다양한 프레임워크로 구축하는 포트폴리오 사이트 개발 : React : 마무리 영역 | 포트폴리오 | 리액트",
img: port20,
author: "webstoryboy",
videoId: "0lCuUTt0qPs",
date: "2023.09.09",
channelId: "UCsvQSv7EeCMHyYb9ENKAJZw",
},{
title: "21. 다양한 프레임워크로 구축하는 포트폴리오 사이트 개발 : Vue : 셋팅하기 | 포트폴리오 | vue.js",
img: port21,
author: "webstoryboy",
videoId: "hPqonjWGxLU",
date: "2023.09.09",
channelId: "UCsvQSv7EeCMHyYb9ENKAJZw",
},{
title: "22. 다양한 프레임워크로 구축하는 포트폴리오 사이트 개발 : Vue : 컨퍼넌트 | 포트폴리오 | 프레임워크",
img: port22,
author: "webstoryboy",
videoId: "apcZFPfAaGA",
date: "2023.09.09",
channelId: "UCsvQSv7EeCMHyYb9ENKAJZw",
},{
title: "23. 다양한 프레임워크로 구축하는 포트폴리오 사이트 개발 : Vue : 헤더영역 | 포트폴리오 | vue.js",
img: port23,
author: "webstoryboy",
videoId: "rMYiB5TiBbo",
date: "2023.09.09",
channelId: "UCsvQSv7EeCMHyYb9ENKAJZw",
},{
title: "24. 다양한 프레임워크로 구축하는 포트폴리오 사이트 개발 : Vue : 인트로 영역 | 포트폴리오 | 취업",
img: port24,
author: "webstoryboy",
videoId: "L4CBHaC3W-U",
date: "2023.09.09",
channelId: "UCsvQSv7EeCMHyYb9ENKAJZw",
},{
title: "25. 다양한 프레임워크로 구축하는 포트폴리오 사이트 개발 : Vue : 스킬 영역 | 포트폴리오 | 사이트 제작",
img: port25,
author: "webstoryboy",
videoId: "NgXcV73XdEc",
date: "2023.09.09",
channelId: "UCsvQSv7EeCMHyYb9ENKAJZw",
},{
title: "26. 다양한 프레임워크로 구축하는 포트폴리오 사이트 개발 : Vue : 사이트 영역 | 포트폴리오 | 사이트 제작",
img: port26,
author: "webstoryboy",
videoId: "PLZmRIge7JI",
date: "2023.09.09",
channelId: "UCsvQSv7EeCMHyYb9ENKAJZw",
},{
title: "27. 다양한 프레임워크로 구축하는 포트폴리오 사이트 개발 : Vue : 포트폴리오 영역 | 포트폴리오 | 웹쓰",
img: port27,
author: "webstoryboy",
videoId: "GmO6yNEKQPA",
date: "2023.09.09",
channelId: "UCsvQSv7EeCMHyYb9ENKAJZw",
},{
title: "28. 다양한 프레임워크로 구축하는 포트폴리오 사이트 개발 : Vue : 연락처 영역 | 포트폴리오 | 웹스토리보이",
img: port28,
author: "webstoryboy",
videoId: "jBoYyc976-o",
date: "2023.09.09",
channelId: "UCsvQSv7EeCMHyYb9ENKAJZw",
},{
title: "29. 다양한 프레임워크로 구축하는 포트폴리오 사이트 개발 : Vue : 푸터 영역 | 포트폴리오 | 웹스토리보이",
img: port29,
author: "webstoryboy",
videoId: "Y_JMRXxZShM",
date: "2023.09.09",
channelId: "UCsvQSv7EeCMHyYb9ENKAJZw",
},{
title: "30. 다양한 프레임워크로 구축하는 포트폴리오 사이트 개발 : Vue : 마무리 | 포트폴리오 | 웹스토리보이",
img: port30,
author: "webstoryboy",
videoId: "jahFUTbWOM8",
date: "2023.09.09",
channelId: "UCsvQSv7EeCMHyYb9ENKAJZw",
},{
title: "31. 다양한 프레임워크로 구축하는 포트폴리오 사이트 개발 : Next : 셋팅하기 | 포트폴리오 | Next.js",
img: port31,
author: "webstoryboy",
videoId: "oEVQNaRijIo",
date: "2023.09.09",
channelId: "UCsvQSv7EeCMHyYb9ENKAJZw",
},{
title: "32. 다양한 프레임워크로 구축하는 포트폴리오 사이트 개발 : Next : 컨퍼넌트 | 포트폴리오 | Next.js",
img: port32,
author: "webstoryboy",
videoId: "Q2gNBdZzqKs",
date: "2023.09.09",
channelId: "UCsvQSv7EeCMHyYb9ENKAJZw",
},{
title: "33. 다양한 프레임워크로 구축하는 포트폴리오 사이트 개발 : Next : 헤더 영역 | 포트폴리오 | 웹스토리보이",
img: port33,
author: "webstoryboy",
videoId: "oa7IrUt80_w",
date: "2023.09.09",
channelId: "UCsvQSv7EeCMHyYb9ENKAJZw",
},{
title: "34. 다양한 프레임워크로 구축하는 포트폴리오 사이트 개발 : Next : 인트로 영역 | 포트폴리오 | 웹스토리보이",
img: port34,
author: "webstoryboy",
videoId: "v5CC2B7oiQc",
date: "2023.09.09",
channelId: "UCsvQSv7EeCMHyYb9ENKAJZw",
},{
title: "35. 다양한 프레임워크로 구축하는 포트폴리오 사이트 개발 : Next : 스킬 영역 | 포트폴리오 | 웹스토리보이",
img: port35,
author: "webstoryboy",
videoId: "iCivMPVgNco",
date: "2023.09.09",
channelId: "UCsvQSv7EeCMHyYb9ENKAJZw",
},{
title: "36. 다양한 프레임워크로 구축하는 포트폴리오 사이트 개발 : Next : 사이트 영역 | 포트폴리오 | 웹스토리보이",
img: port36,
author: "webstoryboy",
videoId: "q07sEGN5XfQ",
date: "2023.09.09",
channelId: "UCsvQSv7EeCMHyYb9ENKAJZw",
},{
title: "37. 다양한 프레임워크로 구축하는 포트폴리오 사이트 개발 : Next : 포트폴리오 영역 | 포트폴리오 | 웹스토리보이",
img: port37,
author: "webstoryboy",
videoId: "X1FQkZKkeak",
date: "2023.09.09",
channelId: "UCsvQSv7EeCMHyYb9ENKAJZw",
},{
title: "38. 다양한 프레임워크로 구축하는 포트폴리오 사이트 개발 : Next : 연락처 영역 | 포트폴리오 | 웹스토리보이",
img: port38,
author: "webstoryboy",
videoId: "qbOeLfS-0tU",
date: "2023.09.09",
channelId: "UCsvQSv7EeCMHyYb9ENKAJZw",
},{
title: "39. 다양한 프레임워크로 구축하는 포트폴리오 사이트 개발 : Next : 푸터 영역 | 포트폴리오 | webstoryboy",
img: port39,
author: "webstoryboy",
videoId: "Pyg44nISZ6w",
date: "2023.09.09",
channelId: "UCsvQSv7EeCMHyYb9ENKAJZw",
},{
title: "40. 다양한 프레임워크로 구축하는 포트폴리오 사이트 개발 : Next : 마무리 | 포트폴리오 | webstoryboy",
img: port40,
author: "webstoryboy",
videoId: "UPltdWsp_Xo",
date: "2023.09.09",
channelId: "UCsvQSv7EeCMHyYb9ENKAJZw",
},
]
components > contents > Portfolio.jsx 파일을 수정하겠습니다.
import React from 'react'
import { portfolioText } from '../../data/portfolio'
import { Link } from 'react-router-dom'
const Portfolio = () => {
return (
<section id='portfolio'>
<h2>🤗 포트폴리오 만드는 방법을 공유합니다.</h2>
<div className='video__inner'>
{portfolioText.map((video, key) => (
<div className="video" key={key}>
<div className="video__thumb play__icon">
<Link to={`/video/${video.videoId}`}>
<img src={video.img} alt={video.title} />
</Link>
</div>
</div>
))}
</div>
</section>
)
}
export default Portfolio메인 페이지 포트폴리오 사이트 만들기 섹션은 다음과 같이 나옵니다.
14_5. 유튜브 사이트 컴퍼넌트 작업
이번에도 동일한 방식으로 작업해보겠습니다.
데이터를 추가하겠습니다.
data > youtube.js 파일을 만들겠습니다.
import youtube01 from "../assets/img/youtube/youtube01.jpg";
import youtube02 from "../assets/img/youtube/youtube02.jpg";
import youtube03 from "../assets/img/youtube/youtube03.jpg";
import youtube04 from "../assets/img/youtube/youtube04.jpg";
import youtube05 from "../assets/img/youtube/youtube05.jpg";
export const youtubeText = [
{
title: "01 나만의 유튜브 사이트 만들기",
img: youtube01,
author: "webstoryboy",
videoId: "OKZXYgAgtyw",
date: "2023.09.09",
channelId: "UCsvQSv7EeCMHyYb9ENKAJZw",
},{
title: "02 나만의 유튜브 사이트 만들기",
img: youtube02,
author: "webstoryboy",
videoId: "OKZXYgAgtyw",
date: "2023.09.09",
channelId: "UCsvQSv7EeCMHyYb9ENKAJZw",
},{
title: "03 나만의 유튜브 사이트 만들기",
img: youtube03,
author: "webstoryboy",
videoId: "OKZXYgAgtyw",
date: "2023.09.09",
channelId: "UCsvQSv7EeCMHyYb9ENKAJZw",
},{
title: "04 나만의 유튜브 사이트 만들기",
img: youtube04,
author: "webstoryboy",
videoId: "OKZXYgAgtyw",
date: "2023.09.09",
channelId: "UCsvQSv7EeCMHyYb9ENKAJZw",
},{
title: "05 나만의 유튜브 사이트 만들기",
img: youtube05,
author: "webstoryboy",
videoId: "OKZXYgAgtyw",
date: "2023.09.09",
channelId: "UCsvQSv7EeCMHyYb9ENKAJZw",
},{
title: "06 나만의 유튜브 사이트 만들기",
img: youtube01,
author: "webstoryboy",
videoId: "OKZXYgAgtyw",
date: "2023.09.09",
channelId: "UCsvQSv7EeCMHyYb9ENKAJZw",
},{
title: "07 나만의 유튜브 사이트 만들기",
img: youtube02,
author: "webstoryboy",
videoId: "OKZXYgAgtyw",
date: "2023.09.09",
channelId: "UCsvQSv7EeCMHyYb9ENKAJZw",
},{
title: "08 나만의 유튜브 사이트 만들기",
img: youtube03,
author: "webstoryboy",
videoId: "OKZXYgAgtyw",
date: "2023.09.09",
channelId: "UCsvQSv7EeCMHyYb9ENKAJZw",
},{
title: "09 나만의 유튜브 사이트 만들기",
img: youtube04,
author: "webstoryboy",
videoId: "OKZXYgAgtyw",
date: "2023.09.09",
channelId: "UCsvQSv7EeCMHyYb9ENKAJZw",
},{
title: "10 나만의 유튜브 사이트 만들기",
img: youtube05,
author: "webstoryboy",
videoId: "OKZXYgAgtyw",
date: "2023.09.09",
channelId: "UCsvQSv7EeCMHyYb9ENKAJZw",
},{
title: "11 나만의 유튜브 사이트 만들기",
img: youtube01,
author: "webstoryboy",
videoId: "OKZXYgAgtyw",
date: "2023.09.09",
channelId: "UCsvQSv7EeCMHyYb9ENKAJZw",
},{
title: "12 나만의 유튜브 사이트 만들기",
img: youtube02,
author: "webstoryboy",
videoId: "OKZXYgAgtyw",
date: "2023.09.09",
channelId: "UCsvQSv7EeCMHyYb9ENKAJZw",
},{
title: "13 나만의 유튜브 사이트 만들기",
img: youtube03,
author: "webstoryboy",
videoId: "OKZXYgAgtyw",
date: "2023.09.09",
channelId: "UCsvQSv7EeCMHyYb9ENKAJZw",
},{
title: "14 나만의 유튜브 사이트 만들기",
img: youtube04,
author: "webstoryboy",
videoId: "OKZXYgAgtyw",
date: "2023.09.09",
channelId: "UCsvQSv7EeCMHyYb9ENKAJZw",
},{
title: "15 나만의 유튜브 사이트 만들기",
img: youtube05,
author: "webstoryboy",
videoId: "OKZXYgAgtyw",
date: "2023.09.09",
channelId: "UCsvQSv7EeCMHyYb9ENKAJZw",
},{
title: "16 나만의 유튜브 사이트 만들기",
img: youtube01,
author: "webstoryboy",
videoId: "OKZXYgAgtyw",
date: "2023.09.09",
channelId: "UCsvQSv7EeCMHyYb9ENKAJZw",
},{
title: "17 나만의 유튜브 사이트 만들기",
img: youtube02,
author: "webstoryboy",
videoId: "OKZXYgAgtyw",
date: "2023.09.09",
channelId: "UCsvQSv7EeCMHyYb9ENKAJZw",
},{
title: "18 나만의 유튜브 사이트 만들기",
img: youtube03,
author: "webstoryboy",
videoId: "OKZXYgAgtyw",
date: "2023.09.09",
channelId: "UCsvQSv7EeCMHyYb9ENKAJZw",
},{
title: "19 나만의 유튜브 사이트 만들기",
img: youtube04,
author: "webstoryboy",
videoId: "OKZXYgAgtyw",
date: "2023.09.09",
channelId: "UCsvQSv7EeCMHyYb9ENKAJZw",
},{
title: "20 나만의 유튜브 사이트 만들기",
img: youtube05,
author: "webstoryboy",
videoId: "OKZXYgAgtyw",
date: "2023.09.09",
channelId: "UCsvQSv7EeCMHyYb9ENKAJZw",
}
]
components > contents > Youtube.jsx 파일을 수정하겠습니다.
import React from 'react'
import { youtubeText } from '../../data/youtube'
import { Link } from 'react-router-dom'
const Youtube = () => {
return (
<section id='youtube'>
<h2>😱 지금 이 코딩을 영상으로</h2>
<div className='video__inner'>
{youtubeText.map((video, key) => (
<div className="video" key={key}>
<div className="video__thumb play__icon">
<Link to={`/video/${video.videoId}`}>
<img src={video.img} alt={video.title} />
</Link>
</div>
</div>
))}
</div>
</section>
)
}
export default Youtube메인 페이지 포트폴리오 사이트 만들기 섹션은 다음과 같이 나옵니다.
마무리
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)
new file: src/assets/scss/section/_video.scss
modified: src/assets/scss/style.scss
modified: src/components/contents/Gsap.jsx
modified: src/components/contents/Portfolio.jsx
modified: src/components/contents/Webd.jsx
modified: src/components/contents/Website.jsx
modified: src/components/contents/Youtube.jsx
new file: src/data/gsap.js
new file: src/data/portfolio.js
new file: src/data/webd.js
new file: src/data/website.js
new file: src/data/youtube.js
webstoryboyhwang@Webstoryboyui-MacBookPro webs-youtube % git commit -m "메인 섹션 나머지 콘텐츠 작업"
[main c5bf75b] 메인 섹션 나머지 콘텐츠 작업
12 files changed, 1257 insertions(+), 8 deletions(-)
create mode 100644 src/assets/scss/section/_video.scss
create mode 100644 src/data/gsap.js
create mode 100644 src/data/portfolio.js
create mode 100644 src/data/webd.js
create mode 100644 src/data/website.js
create mode 100644 src/data/youtube.js
webstoryboyhwang@Webstoryboyui-MacBookPro webs-youtube % git push -u origin main
Enumerating objects: 35, done.
Counting objects: 100% (35/35), done.
Delta compression using up to 10 threads
Compressing objects: 100% (21/21), done.
Writing objects: 100% (21/21), 8.31 KiB | 8.31 MiB/s, done.
Total 21 (delta 11), reused 0 (delta 0), pack-reused 0
remote: Resolving deltas: 100% (11/11), completed with 4 local objects.
To https://github.com/webstoryboy/webs-youtube.git
36b400d..c5bf75b main -> main
branch 'main' set up to track 'origin/main'.
메인 페이지 섹션을 모두 완성하였습니다. 공통적인 요소들도 있고 콘텐츠를 요소들이 많기 때문에 이미지 슬라이드 형식으로 변경하여 작업할 것입니다. 오늘도 수고하셨습니다. 😘
예제 목록
- 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. 나만의 유튜브 사이트 만들기 : 빌드 및 배포하기
댓글