나만의 비디오 스트리밍 플랫폼 구축하기 | 생각보다 쉽습니다!

CodeWithHarry가 HTML, CSS, next.js를 사용해 동영상 스트리밍 웹사이트를 만드는 방법을 알려드립니다. 또한 Linode Object Storage를 사용하여 비디오를 저장하고 HTML, CSS, 자바스크립트를 사용하여 Object Storage Bucket에서 브라우저로 바로 비디오를 스트리밍하는 방법을 설명합니다.

챕터
0:00 이 동영상에서 다룰 내용
0:30 next.js 프로젝트 생성하기
1:38 next.js 프로젝트에 Tailwind CSS 추가하기
5:08 navbar 컴포넌트 생성하기
7:00 chatGPT를 사용하여 탐색 모음 코딩하기
7:40 내비게이션 바 기초 구축
10:00 ChatGPT에서 React 코드로 코드 변환하기
13:15 ChatGPT 코드 제거
13:36 내비게이션 바 텍스트 변경하기
14:30 watch.js 생성하기
16:30 비디오 업로드 모듈 생성
20:00 파일 업로드 태그 생성
22:30 비디오 시청 모듈 생성
23:45 리노드에서 오브젝트 스토리지 버킷 생성하기
25:00 React 파일 업로더 생성하기
26:25 생성하기 API
28:15 테스트 API
30:10 Formidable 및 S3-SDK 설치하기
30:30 upload.js 빌드
32:10 next.js에서 바디파서 비활성화하기
32:50 Formidable을 활용하여 양식 파싱하기
36:20 upload.js QA
39:20 list.js 생성하기
43:12 프론트엔드에 연결하기
44:20 비디오 카드로 시청 페이지 채우기
49:10 업로드 페이지를 다음에 연결 API
55:00 업로드 최대 파일 크기 수정
56:00 시청 페이지에 업로드한 동영상 표시하기
1:03:50 시청 페이지에 플레이어 만들기
1:10:50 플레이어 업로드 및 테스트하기
1:14:40 다운로드 버튼을 아이콘으로 변경하기
1:16:50 결론