무료
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기
비디오파일을 인코딩도 되나요?
파일 업로드후에 ffmpeg를 노드서버에서 인코딩도 할수 있나요? avi,mov등 비디오파일을 mp4로 인코딩 할수있는지 궁금합니다.
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기
multer fileFilter 사용법이 변경되었나봐요 수정해봤습니다
강의 너무 잘듣고 있습니다. 필터가 안되어서 구글링해서 고쳐봤습니다. 사용법이 조금 변경되었나봐요 const storage = multer.diskStorage({ destination: (req, file, cb) => { cb(null, 'uploads/') }, filename: (req, file, cb) => { cb(null, `${Date.now()}_${file.originalname}`) } }) const fileFilter = (req, file, cb) => { // mime type 체크하여 원하는 타입만 필터링 if (file.mimetype == 'video/mp4' ) { cb(null, true); } else { cb({msg:'mp4 파일만 업로드 가능합니다.'}, false); } } const upload = multer({ storage: storage, fileFilter: fileFilter }).single("file") //================================= // Video //================================= router.post("/uploadfiles", (req, res) => { upload(req, res, err => { if (err) { return res.json({ success: false, err }) } else{ return res.json({ success: true, filePath: res.req.file.path, fileName: res.req.file.filename }) } }) });
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기
빌드 경로 문제
client와 server 구현하고 빌드를 해보려고 합니다. npm run bulid 시 client라는 폴더를 만들어서 index.html 파일의 위치가 바뀌어 오류가 발생하고 있습니다. npx create-react-app으로 만들었는데 수정가능한가요? 현재 index.html파일위치는 PS C:\Users\zxc88\Desktop\Front_End\react\react-mern-project\client\public> 오류는 아래이미지입니다.
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기
썸네일 저장 못하는신분들 .. 참고하세요!
url: response.data.url, 이 부분을 아래처럼 바꾸시면 되실겁니다. url: response.data.filePath, 에러는 아래처럼 떴습니다
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기
npm run dev
C:\Users\gustj\Desktop\test_runi>npm run dev > react-boiler-plate@1.0.0 dev > concurrently "npm run backend" "npm run start --prefix client" 'concurrently'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다. -어떡하죠-
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기
[질문] 좋아요&싫어요, 트래픽 관련 트러블 슈팅 처리 방법 문의
response.data.likes.map(like =>{ if(like.userId === props.userId){ setLikeAction('liked'); } }) 여러 답변들을 다 직접 응대 해주시느라 고생이 많으십니다. 위와 같이 좋아요 & 싫어요 정보를 가져온다면, 좋아요 10,000개일 때 트래픽 처리는 어떻게 되는지가 궁금합니다. 해당 코드의 경우, 10000건의 좋아요 정보를 모두 가져와야하고 이는 서버에 부하를 주지 않을지 궁금했습니다. 물론 사용자가 소수라면 상관 없겠지만, 사용자가 많은 유튜브나 페이스북에서는 이런 상황에 대해서 트러블을 실제로 어떻게 처리하는지 궁금합니다. 혹시 알 수도 있을까요?... 한 예시 다음과 같습니다. 실제 유튜브에서 좋아요 1억개인 영상을 볼 때마다, 좋아요를 누른 모든 사람의 정보를 다 받아와서 처리하기는 무리라고 생각합니다. 그래서 DB에서 직접 length를 뽑아오는게 아닐지 생각했습니다. 그렇기에 대용량 트래픽에서는 데이터를 어떻게 처리하는지 알 수 있을까요? 해당 강의들은 소스를 실제로 어떻게 구성하는지에 대해서 강의를 배울 수 있어서 저에게는 좋은 강의입니다. 하지만, 실제로 이런 부분들을 알아가는게 개발자라고 생각하거든요... 이런 트래픽 관련해서 트러블 슈팅이 발생할거 같았습니다. ㅎㅎ 답변 기다리겠습니다. 감사합니다.
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기
라우터 에러 질문
댓글 기능에서 에러가 많이나서 이것저것 고쳐봤는데 이 문제는 어떻게 해결해야 할지 몰라서 강사님에게 질문드려요 ㅠ 댓글은 디비에도 잘올라가고 렌더링상에도 문제가 없지만 너무 찝찝해서 그냥 넘어가지 못하겠네요 .. 라우터 부분에서 send(err)로 보내줘서 그런가 했는데 json형식으로 보내줘도 똑같이 에러가 나더라구요 .. 어떻게 해결해야할까요 ? https://github.com/hyunbeanohh/YoutubeClone
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기
input 태그
안녕하세요. 다름이 아니라 input 태그가 있는데 영상에서 보면 안보여서 어떻게 처리가 된 건지 궁금합니다.
- 해결됨따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기
ffmpeg를 깔지 않으면 썸네일 생성 기능을 사용할 수 없나요?
안녕하세요:) ffmpeg를 깔지 않으면 썸네일 생성 기능을 사용할 수 없는건가요?
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기
workspace 경로에 한글 포함 시 문제
기본적인 문제인듯 한데 혹시 workspace 경로에 한글이 포함된 경우 npm install 등 안되는 케이스가 많이 있나요? 저는 npm install시 cp949 에러가 나서 경로에 한글을 빼고 했더니 정상 동작하는 것 같습니다.
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기
에러를 찾는데 어디가 문제인지 잘 모르겠습니다...ㅜ
현재 에러코드관련해서 refreshFunction이 에러가 발생했는데요. 강사님이 올려주신 자료로 참고해서 해도 잘 못찾겠습니다... 깃허브도 올립니다. https://github.com/miok-jung/react-youtube
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기
안녕하세요 setState 실행 순서가 조금 이상해서 질문남겨요...
안녕하세요 양질의 수업을 무료로 오픈해주셔서 항상 공부 잘하고 있습니다. 이번에 클론 코딩 진행하면서 setState 부분이 조금 이상해서 질문 드려요 import React, { useEffect, useState } from 'react' import Axios from 'axios'; import { Row, Col, List, Avatar } from 'antd' function VideoDetailPage(props) { const videoId = props.match.params.videoId; const VideoVariable = { videoId: videoId }; const [Video, setVideo] = useState([]) useEffect(() => { Axios.post('/api/video/getVideo', VideoVariable) .then((res) => { if (res.data.success) { setVideo(res.data.video); console.log('state 업데이트 완료') } else { alert('비디오 정보 로딩 실패'); } }) }, []); if (Video.writer) { return ( <Row gutter={[16, 16]}> <Col lg={18} xs={24}> <div style={{ width: '100%', padding: '3rem 4em' }}> <video style={{ width: '100%' }} src={`http://localhost:5000/${Video.filePath}`} controls></video> <List.Item // actions={[<LikeDislikes video videoId={videoId} userId={localStorage.getItem('userId')} />, <Subscriber userTo={Video.writer._id} userFrom={localStorage.getItem('userId')} />]} > <List.Item.Meta avatar={<Avatar src={Video.writer && Video.writer.image} />} title={<a href="https://ant.design">{Video.title}</a>} description={Video.description} /> <div></div> </List.Item> {/* <Comments CommentLists={CommentLists} postId={Video._id} refreshFunction={updateComment} /> */} </div> </Col> <Col lg={6} xs={24}> side video {/* <SideVideo /> */} </Col> </Row> ) } else { console.log(Video, '후후') return <div> Loading... ?? </div> } } export default VideoDetailPage 이게 제 코드구요 실행하면 아래의 else 부분의 후후먼저 실행되고 위의 setVideo가 실행됩니다. 그래서 에러가 발생해 detail 페이지로 가지않고 다시 landing 페이지로 넘어옵니다 비동기 처리때문인가 싶어 setVideo를 콜백의 형태로 남겨서 동기처리 할수있다길래 해봐도 안되고, useEffect 아래 input 리스트에 Video를 넣어보기도 했는데 잘 안되네요 ㅠㅠ https://github.com/dnfwlxo11/mini_youtube 이게 제 풀 코드입니다. component 코드들이랑 index.js 코드랑 몇번이나 본지 모르겠어요 이유가 뭘까요?
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기
npm run dev오류
npm run dev 하면 밑에 오류가 뜹니다. $ npm run dev npm ERR! missing script: dev npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\박수연\AppData\Local\npm-cache\_logs\2021-05-10T13_49_20_336Z-debug.log server>config>dev.js module.exports = { mongoURI:'mongodb+srv://anny:<password>@0413.8kle6.mongodb.net/myFirstDatabase?retryWrites=true&w=majority' } <password>부분을 비밀번호로 바꾸고 실행했는데도 안되네요...
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기
화살표 함수 질문합니다.
화살표 함수를 사용할 때, () => {} () => () 차이가 무엇인지 궁금합니다 !!
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기
썸네일 저장경로
썸네일 저장경로를 서버로 변경하고 싶은데 이 부분은 어떻게 해야 하나요? 동영상은 서버로 올릴 수 있게 수정했는데 썸네일은 어디를 수정해야 할 지 보이지가 않네요
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기
첫 화면이 이상합니다.
./src/_reducers/user_reducer.js Line 11:13: Unreachable code no-unreachable Line 14:13: Unreachable code no-unreachable Line 17:13: Unreachable code no-unreachable ./src/hoc/auth.js Line 2:8: 'Axios' is defined but never used no-unused-vars Line 33:12: React Hook useEffect has missing dependencies: 'dispatch' and 'props.history'. Either include them or remove the dependency array react-hooks/exhaustive-deps ./src/components/views/LoginPage/LoginPage.js Line 2:8: 'Axios' is defined but never used no-unused-vars ./src/components/views/RegisterPage/RegisterPage.js Line 4:8: 'Axios' is defined but never used no-unused-vars ./src/App.js Line 6:3: 'Link' is defined but never used no-unused-vars Search for the keywords to learn more about each warning. To ignore, add // eslint-disable-next-line to the line before. [HPM] Error occurred while trying to proxy request /api/hello from localhost:3001 to http://localhost:5000 (ECONNREFUSED) (https://nodejs.org/api/errors.html#errors_common_system_errors) [HPM] Error occurred while trying to proxy request /api/users/auth from localhost:3001 to http://localhost:5000 (ECONNREFUSED) (https://nodejs.org/api/errors.html#errors_common_system_errors) 터미널에 이렇게 뜨면서 시작을 하고 시작페이지와 버튼만 출력됩니다.
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기
강사님 랜딩페이지 질문드립니다.
안녕하세요 강사님. 강의 너무 잘 듣고 있습니다. 강사님 강의를 듣고 사이드프로젝트를 진행 하고있습니다. 헤로쿠에 배포 까지 해봤는데 랜딩 페이지 에서 목록을 불러오는 과정에서 오류가납니다. 희한한 것은 로컬에서는 잘되는데 헤로쿠에서는 안되네요. 더욱이 희한한것은 로그인 로그아웃 글작성 기능 모두 잘 작동하는데 랜딩 페이지에서 목록을 불러오는 부분만 안됩니다... 그래서 제 나름대로 여러 방법으로 디버깅을 해봤습니다. 위는 제 랜딩페이지의 코드 입니다. console.log(response.data) 로 디버깅을 해봤습니다. 여기서 희안한 점을 발견했습니다. 위 사진은 제 로컬에서 본 콘솔입니다. response.data 부분이 잘 출력됩니다. 위는 헤로쿠 배포후 웹에서 console.log 로 찍어본 response.data 입니다. 저 부분이 respose.data.success 부분이 가 아니어서 오류가 나는것같은데 왜 배포후에 저런 현상이 일어나는것일까요.. 혼자 몇일 동안 검색하고 해결해보려했지만 도저히 해결이 안되서 질문 남깁니다 ㅠㅠ 바쁘실텐데 답변해주신다면 정말 감사하겠습니다.
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기
구독 기능까지 만들고 나서 영상 업로드과정에서 에러가 납니다.
네비게이션 바에 만들어놓은 Upload 버튼을 누르면 /video/upload 경로로 가는데 그 과정에서 App.js에서 비디오 재생화면의 라우트를 만들어놓은 <Route exact path='/video/:videoId' component={Auth(VideoDetailPage, null)} /> 이부분과 맞닿아서 upload부분을 videoId로 인식해서 일어나는 문제인거 같습니다. 혹시 해결방법이 있는지 아니면 제가 문제인건지 궁금해서 질문 올립니다!
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기
redux 사용여부
안녕하세요 강사님 강의 잘 듣고있는 한 학생입니다. 기초강의, 영화앱제작까지듣고 유튜브 제작 강의를 듣고있는데요 회원가입, 로그인, 로그아웃에서는 사용자의 정보를 저장하기위해 store에 사용자의 정보와 id를 저장해놓았습니다. 그래서 props를 통해 넘기고 넘기는 과정을 생략하고 언제든지 react-redux를 통해 store에서 불러와 사용할수있었죠. 근데 youtube강의에서는 id를 가져오는 것을 제외하곤 redux를 한번도 사용하지 않으시더라구요,, 유튜브 제작강의 중 reply를 다는 부분에서 너무 props를 많이 사용하길래 헷갈려서 동영상정보도 redux에 저장하고 불러오면 되지않을까? 왜 강사님은 redux를 알려주고 사용하지 않으실까라는.. 생각을 하게되었습니다. 혹시 redux는 변하지 않는 그러니까 로그인한 회원정보 이런것을 저장할때만 쓰이고 다른 변수들은 props를 통해 전달해야하나요? 긴 질문 읽어주셔서 감사합니다.
- 해결됨따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기
boilerplate 다운로드 및 npm install 시 에러
아직 root 폴더에서 npm install 하는 단계입니다. 에러를 구글링하다보니 windows-build-tools 를 설치해야한다고해서, 관리자권한으로 powershell 실행해서 잘 설치했는데 해결되지 않아서요..ㅠㅠ 어떻게 해야할지 알려주실 수 있을까요? ++ 에러메시지 아래 추천으로 npm config set python 을 실행해봤지만 해결되지 않았습니다. node-pre-gyp WARN Using needle for node-pre-gyp https download node-pre-gyp WARN Tried to download(404): https://github.com/kelektiv/node.bcrypt.js/releases/download/v3.0.8/bcrypt_lib-v3.0.8-node-v83-win32-x64-unknown.tar.gz node-pre-gyp WARN Pre-built binaries not found for bcrypt@3.0.8 and node@14.16.0 (node-v83 ABI, unknown) (falling back to source compile with node-gyp) gyp ERR! find Python gyp ERR! find Python Python is not set from command line or npm configuration gyp ERR! find Python Python is not set from environment variable PYTHON gyp ERR! find Python checking if "python" can be used gyp ERR! find Python - "python" is not in PATH or produced an error gyp ERR! find Python checking if "python2" can be used gyp ERR! find Python - "python2" is not in PATH or produced an error gyp ERR! find Python checking if "python3" can be used gyp ERR! find Python - "python3" is not in PATH or produced an error gyp ERR! find Python checking if the py launcher can be used to find Python 2 gyp ERR! find Python - "py.exe" is not in PATH or produced an error gyp ERR! find Python checking if Python is C:\Python27\python.exe gyp ERR! find Python - "C:\Python27\python.exe" could not be run gyp ERR! find Python checking if Python is C:\Python37\python.exe gyp ERR! find Python - "C:\Python37\python.exe" could not be run gyp ERR! find Python gyp ERR! find Python ********************************************************** gyp ERR! find Python You need to install the latest version of Python. gyp ERR! find Python Node-gyp should be able to find and use Python. If not, gyp ERR! find Python you can try one of the following options: gyp ERR! find Python - Use the switch --python="C:\Path\To\python.exe" gyp ERR! find Python (accepted by both node-gyp and npm) gyp ERR! find Python - Set the environment variable PYTHON gyp ERR! find Python - Set the npm configuration variable python: gyp ERR! find Python npm config set python "C:\Path\To\python.exe" gyp ERR! find Python For more information consult the documentation at: gyp ERR! find Python https://github.com/nodejs/node-gyp#installation gyp ERR! find Python ********************************************************** gyp ERR! find Python gyp ERR! configure error gyp ERR! stack Error: Could not find any Python installation to use gyp ERR! stack at PythonFinder.fail (C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\lib\find-python.js:307:47) gyp ERR! stack at PythonFinder.runChecks (C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\lib\find-python.js:136:21) gyp ERR! stack at PythonFinder.<anonymous> (C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\lib\find-python.js:225:16) gyp ERR! stack at PythonFinder.execFileCallback (C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\lib\find-python.js:271:16) gyp ERR! stack at exithandler (child_process.js:315:5) gyp ERR! stack at ChildProcess.errorhandler (child_process.js:327:5) gyp ERR! stack at ChildProcess.emit (events.js:315:20) gyp ERR! stack at Process.ChildProcess._handle.onexit (internal/child_process.js:275:12) gyp ERR! stack at onErrorNT (internal/child_process.js:465:16) gyp ERR! stack at processTicksAndRejections (internal/process/task_queues.js:80:21) gyp ERR! System Windows_NT 10.0.19042 gyp ERR! command "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\node_modules\\node-gyp\\bin\\node-gyp.js" "configure" "--fallback-to-build" "--module=C:\\김하영\\STUDY\\react\\react_study_2\\boilerplate-mern-stack-master\\node_modules\\bcrypt\\lib\\binding\\bcrypt_lib.node" "--module_name=bcrypt_lib" "--module_path=C:\\김하영\\STUDY\\react\\react_study_2\\boilerplate-mern-stack-master\\node_modules\\bcrypt\\lib\\binding" "--napi_version=7" "--node_abi_napi=napi" "--napi_build_version=0" "--node_napi_label=node-v83" gyp ERR! cwd C:\김하영\STUDY\react\react_study_2\boilerplate-mern-stack-master\node_modules\bcrypt gyp ERR! node -v v14.16.0 gyp ERR! node-gyp -v v5.1.0 gyp ERR! not ok node-pre-gyp ERR! build error node-pre-gyp ERR! stack Error: Failed to execute 'C:\Program Files\nodejs\node.exe C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\bin\node-gyp.js configure --fallback-to-build --module=C:\김하영\STUDY\react\react_study_2\boilerplate-mern-stack-master\node_modules\bcrypt\lib\binding\bcrypt_lib.node --module_name=bcrypt_lib --module_path=C:\김하영\STUDY\react\react_study_2\boilerplate-mern-stack-master\node_modules\bcrypt\lib\binding --napi_version=7 --node_abi_napi=napi --napi_build_version=0 --node_napi_label=node-v83' (1) node-pre-gyp ERR! stack at ChildProcess.<anonymous> (C:\김하영\STUDY\react\react_study_2\boilerplate-mern-stack-master\node_modules\node-pre-gyp\lib\util\compile.js:83:29) node-pre-gyp ERR! stack at ChildProcess.emit (events.js:315:20) node-pre-gyp ERR! stack at maybeClose (internal/child_process.js:1048:16) node-pre-gyp ERR! stack at Process.ChildProcess._handle.onexit (internal/child_process.js:288:5) node-pre-gyp ERR! System Windows_NT 10.0.19042 node-pre-gyp ERR! command "C:\\Program Files\\nodejs\\node.exe" "C:\\김하영\\STUDY\\react\\react_study_2\\boilerplate-mern-stack-master\\node_modules\\node-pre-gyp\\bin\\node-pre-gyp" "install" "--fallback-to-build" node-pre-gyp ERR! cwd C:\김하영\STUDY\react\react_study_2\boilerplate-mern-stack-master\node_modules\bcrypt node-pre-gyp ERR! node -v v14.16.0 node-pre-gyp ERR! node-pre-gyp -v v0.14.0 node-pre-gyp ERR! not ok Failed to execute 'C:\Program Files\nodejs\node.exe C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\bin\node-gyp.js configure --fallback-to-build --module=C:\김하영\STUDY\react\react_study_2\boilerplate-mern-stack-master\node_modules\bcrypt\lib\binding\bcrypt_lib.node --module_name=bcrypt_lib --module_path=C:\김하 영\STUDY\react\react_study_2\boilerplate-mern-stack-master\node_modules\bcrypt\lib\binding --napi_version=7 --node_abi_napi=napi --napi_build_version=0 --node_napi_label=node-v83' (1) npm WARN react-redux@5.1.2 requires a peer of react@^0.14.0 || ^15.0.0-0 || ^16.0.0-0 but none is installed. You must install peer dependencies yourself. npm WARN react-redux@5.1.2 requires a peer of redux@^2.0.0 || ^3.0.0 || ^4.0.0-0 but none is installed. You must install peer dependencies yourself. npm WARN react-boiler-plate@1.0.0 No repository field. npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.12 (node_modules\fsevents): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.12: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"}) npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! bcrypt@3.0.8 install: `node-pre-gyp install --fallback-to-build` npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the bcrypt@3.0.8 install script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above. npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\jerem\AppData\Roaming\npm-cache\_logs\2021-04-26T00_37_15_758Z-debug.log