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

이 강의는 React 프레임워크와 YouTube API를 이용하여 자신만의 간단한 영상 사이트를 만듭니다. React의 기본 개념을 이해하고, 컴포넌트를 구조화하고 상태를 관리하는 방법을 학습하며, YouTube Data API를 활용하여 외부 데이터를 가져오는 방법을 익히고, API 응답을 처리하여 사용자에게 의미 있는 정보를 제공하는 방법을 이해합니다.

완성작 보기

미리보기 :

사용스택

• 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

2-2 추가 라이브러리 설치

• react-router-dom 은 React 애플리케이션에서 라우팅 및 페이지 네비게이션을 처리하기 위한 라이브러리입니다
• Axios는 JavaScript 및 Node.js 환경에서 HTTP 요청을 만들고 처리하는 데 사용되는 라이브러리입니다.
• react-icons는 React 애플리케이션에서 아이콘을 사용하기 위한 라이브러리입니다.
• react-player는 React 애플리케이션에서 다양한 비디오 및 오디오 소스를 재생하기 위한 라이브러리입니다.
• Sass는 CSS의 확장된 버전으로, 스타일시트를 보다 간결하고 유지보수하기 쉽게 작성할 수 있도록 도와주는 CSS 전처리기입니다.
• react-helmet-async는 React 애플리케이션에서 동적으로 웹 페이지의 헤더 메타데이터를 관리하기 위한 라이브러리입니다.
• Swiper는 모바일 및 데스크톱 환경에서 사용할 수 있는 슬라이더 및 캐러셀 컴포넌트를 구현하는 JavaScript 라이브러리입니다.

Getting Started with Create React App

This project was bootstrapped with Create React App.

Available Scripts

In the project directory, you can run:

npm start

Runs the app in the development mode.
Open http://localhost:3000 to view it in your browser.

The page will reload when you make changes.
You may also see any lint errors in the console.

npm test

Launches the test runner in the interactive watch mode.
See the section about running tests for more information.

npm run build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

See the section about deployment for more information.

npm run eject

Note: this is a one-way operation. Once you eject, you can't go back!

If you aren't satisfied with the build tool and configuration choices, you can eject at any time. This command will remove the single build dependency from your project.

Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except eject will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.

You don't have to ever use eject. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.

Learn More

You can learn more in the Create React App documentation.

To learn React, check out the React documentation.

Code Splitting

This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting

Analyzing the Bundle Size

This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size

Making a Progressive Web App

This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app

Advanced Configuration

This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration

Deployment

This section has moved here: https://facebook.github.io/create-react-app/docs/deployment

npm run build fails to minify

This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify