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

이 프로젝트는 React 프레임워크와 YouTube Data API를 활용하여, 나만의 간단한 유튜브 영상 사이트를 만드는 것을 목표로 합니다.

해당 프로젝트를 통해 다음과 같은 내용을 학습하였습니다 :

• React의 기본 개념과 컴포넌트 기반 구조 이해
• 상태(State)와 props를 활용한 컴포넌트 간 데이터 흐름 관리
• YouTube Data API를 사용하여 외부 영상 데이터를 가져오는 방법
• API 응답 데이터를 구조화하고 사용자에게 의미 있는 정보로 보여주는 방식
• 실제 데이터를 기반으로 동적인 UI 구현

본 프로젝트는 Webstoryboy 유튜브 강의 시리즈를 참고하여 진행하였습니다.

완성작 보기

미리보기 :

사용스택

• node.js를 설치하고 사용
• react를 사용하여 사이트를 완성
• youTube Api를 이용하여 데이터를 가져오기
• rapidapi를 이용하여 데이터를 가져오기
• netlify를 통해 사이트를 배포
• firebase를 통해 사이트를 배포
• vercel를 통해 사이트를 배포
• git을 사용하여 파일을 관리

프로젝트 실행

• react를 설치 npx create-react-app 타이틀
• react-router-dom을 설치 npm install react-router-dom
• axios를 설치 npm install axios
• react-icons을 설치 npm install react-icons
• react-player를 설치 npm install react-player
• sass를 설치 npm install sass
• react-helmet-async를 설치 npm install react-helmet-async
• swiper를 설치 npm install swiper

참고 : https://webstoryboy.co.kr/1965 [WEBSTORYBOY:티스토리]