본문 바로가기

REACT17

[클론코딩] 따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기 #8. 비디오 디테일 페이지 만들기 저번에는 landingpage에 비디오들을 출력했었다 1. 비어있는 비디오 디테일 페이지 생성 client-src-components-view에 VideoDetailPage 폴더를 만든다 그리고 그 안에 VideoDetailPage.js 파일을 만든다 2. 비디오 디테일 페이지를 위한 Route 만들기 새로운 페이지를 만들었으므로 App.js에 가서 Route를 해준다 일단 VideoDetailPage를 가져와준다 import VideoDetailPage from './views/VideoDetailPage/VideoDetailPage'; Route를 해주는데, 주소는 videoId로 설정한다 또한 로그인하지 않은 사람들도 접속할 수 있게 null로 설정한다 landingPage에서 동영상을 클릭하면 V.. 2022. 8. 24.
[클론코딩] 따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기 #7. 랜딩 페이지에 비디오 나타나게 하기 비디오 업로드를 성공했으니 업로드한 비디오를 랜딩 페이지에 띄우려고 한다 참고로 저번에 확인했던 collections 내에 비디오 데이터들이 모두 title이 없는 상태로 저장이 돼있어서 지웠다^^ type:String이라고 해야되는데 tyepe: String이라고 오타내서 그런거였음..ㅠㅠ 아무튼 다시 만들어서 현재는 하나의 비디오만 저장돼있는 상태이다 Video.js에 있던 Schema 변수가 다 담겨져있다 1. 빈 랜딩 페이지 생성 이미 boiler-plate에 만들어져 있으므로 패스 2. 비디오 카드 Template 만들기 LandingPage에서 비디오 카드가 어떻게 보여지는지 template을 만들어준다 return ( Recommended {/*{renderCards} {minutes} : .. 2022. 8. 24.
[클론코딩] 따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기 #6. 비디오 업로드 하기 1. 비디오 Collection 만들기 비디오를 올리려면 데이터베이스에 저장을 해야되는데, 아직 그 안에 있는 Tables을 만들어주지 않았다(MongoDB에서는 Collections라고 하는듯) mySQL로 했을 때는 tables라고 불렀는데 MongoDB에서 부르는 명칭이 살짝살짝 다르다고 한다 server폴더 - models폴더 안에 Video.js 파일을 새롭게 생성한다 위의 diagram을 보면 writer, title, description, privacy, filePath, category, views, duration, thumbnail을 변수로 넣는다고 했으므로 똑같이 해준다 const Schema = mongoose.Schema; const mongoose = require('mongo.. 2022. 8. 24.
[클론코딩] 따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기 #5. ffmpeg로 비디오 썸네일 생성하기 1. 썸네일 생성을 위한 dependency 다운 받기 FFmpeg : 멀티미디어 디코딩, 인코딩, 스트리밍 에 대한 모든 기능을 제공하는 오픈 소스 라이브러리 맥은 설정하기 쉽다는데 나는 윈도우라 ^^ ;; 구글에 치면 ffmpeg 다운로드 방법 굉장히 많이 나온다 난 7z 파일 압축 해제를 못해서 아래의 사이트에서 압축을 풀어주었다 압축 풀기 사이트 : https://extract.me/ko/ 아카이브 추출기 온라인 이 앱이 Google 드라이브와 함께 작동하도록 승인하세요. OK extract.me 환경변수 편집까지 마치고 나서 npm install fluent-ffmpeg --save 해주면 끝이 난다 2. 서버에 저장된 비디오를 이용한 썸네일 생성, 3.생성된 썸네일을 서버에 저장 저번에 콘솔로.. 2022. 8. 23.
[클론코딩] 따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기 #4. Multer로 노드 서버에 비디오 저장하기 0. onDrop func 만들기 저번에 Dropzone에 있는 onDrop을 설정하지 않았다 그래서 파일을 올렸는데도 아무런 반응이 나타나지 않은 것이다 multiple은 한 번에 파일을 여러개 올릴 건지 하나 올릴 건지 정하는 것이다 그리고 위에서 onDrop 함수를 작성해준다 const onDrop = (files) => { let formData = new FormData; const config = { header: {'content-type': 'multipart/form-data'} } formData.append("file", files[0]) console.log(files) // Axios 이용하여 request를 서버에 보냄 // 위에 것들 보내주지 않으면 파일에 오류 발생 Axios.. 2022. 8. 17.
[클론코딩] 따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기 #3. 비디오 업로드 FORM 만들기 클론코딩 하나 해놓고 웹사이트를 만들겠다던 과거의 나 ,, 미쳤었다! ^^ 하다보니 너무 부족한 것을 깨닫고 클론코딩 하나를 더 할 것이다 이 분 강의가 설명도 잘 되어있고 많은 수강생들이 있어 오류 찾기도 수월했다 https://www.inflearn.com/course/%EB%94%B0%EB%9D%BC%ED%95%98%EB%A9%B0-%EB%B0%B0%EC%9A%B0%EB%8A%94-%EB%85%B8%EB%93%9C-%EB%A6%AC%EC%95%A1%ED%8A%B8-%EC%9C%A0%ED%8A%9C%EB%B8%8C-%EB%A7%8C%EB%93%A4%EA%B8%B0/dashboard [무료] 따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기 - 인프런 | 강의 이 강의를 통해 리액트와 노드.. 2022. 8. 17.
[클론코딩] 무비앱 시리즈 #14 #14 Favorite 페이지 (2) 저번에는 Favorite 페이지로 들어가면 내가 좋아요 한 영화의 제목, 시간이 뜨는 것까지 구현했다 오늘은 Remove를 누르면 삭제가 되는 것과 마우스를 갖다 대면 영화 스틸컷?이 나오는 것을 구현할 것이다 1. Popover되게 만들기 ant design에서 Popover을 가져온다(마우스를 갖다대면 작은 창이 뜸) import {Popover} from 'antd'; Favorite 페이지에서 좋아요 한 영화들의 정보가 나오는 곳을 따로 빼서 만들어준다 const renderCards = Favorites.map((favorite, index) => { return {favorite.movieTitle} {favorite.movieRunTime} mins Re.. 2022. 7. 26.
[클론코딩] 무비앱 시리즈 #13 #13 Favorite 페이지 만들기 (1) Favorite 리스트에 넣은 영화들을 한 눈에 확인할 수 있는 페이지를 만들 것이다 1. FavoritePage 템플릿 만들기 일단 페이지를 하나 만드는 것이므로 views 폴더 안에 FavoritePage 폴더를 생성하고, 그 안에 FavoritePage.js 파일을 생생성한다 그 다음 App.js에 연결해준다 import FavoritePage from './views/FavoritePage/FavoritePage'; Auth(FavoritePage, true)는 로그인한 사람만 볼 수 있다는 뜻이다 그 다음 views - NavBar - Sections 안에 있는 LeftMenu.js에 들어가서 favorite 탭을 만들어준다 기존에 있던.. 2022. 7. 25.
[클론코딩] 무비앱 시리즈 #12 #12 Favorite list에 추가 삭제 저번 시간에는 [Add Favorite 0] 버튼까지 만들었다 이제 이 버튼을 클릭하면 Add Favorite 0 - Not Favorite 으로 바뀌는 과정을 구현할 것이다 Add Favorite 버튼을 누르면 event가 발생해야 하므로 코드를 수정한다 return ( {Favorited ? " Not Favorite " : "Add to Favorite "} {FavoriteNumber} ) 클릭을 하면 onClickFavorite이 실행된다는 뜻이다 그럼 onClickFavorite을 만들어보자 그 전에, variables를 onClickFavorite에서도 쓰기 위해서 variables의 위치를 useEffect()함수 바깥에서 선언하고(왠.. 2022. 7. 25.
[클론코딩] 무비앱 시리즈 #10 ~ #11 #10 Favorite 버튼 만들기 (2) #9에서는 영화를 좋아하는 사람 수를 가져오다가 끝이 났다 이어서 진행할 것이다 server 폴더 안에있는 routes 폴더에 favorite.js 파일을 생성해준다 기본적인 틀은 user.js을 가져와 복사, 붙여넣기 한다 그리고 맞게 수정해준다 const express = require('express'); const router = express.Router(); const { Favorite } = require('../models/Favorite') router.post('/favoriteNumber', (req, res) => { //req.body.movieId // 좋아요 숫자가 얼마나 되는지, body : index.js에서 bodyParser있.. 2022. 7. 20.

티스토리툴바