무료
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기
구독,구독취소에 대해 질문이 있어요
안녕하세요 ... 구독, 구독취소 잘 적용이되는데 페이지 새로고침만하면 왜 버튼이 다시 구독전으로 돌아갈까요... db확인해보니 구독할때마다 계속 구독정보가 저장되더라구요 _id값만 다르게 계속 중복저장돼서 그런가싶기도하고 뭐가 문제인지 모르겟네요 ㅠㅠ const express = require("express"); const router = express.Router(); const { Subscriber } = require("../models/Subscriber"); //================================= // Subscriber //================================= router.post("/subscriberNumber", (req, res) => { Subscriber.find({ userTo: req.body.userTo }) .exec((err, subscriber) => { if (err) return res.status(400).send(err); return res .status(200) .json({ success: true, subscriberNumber: subscriber.length }); }); }); router.post("/subscribed", (req, res) => { Subscriber.find({ userTo: req.body.userTo, userFrom: req.body.userFrom }) .exec((err, subscriber) => { if (err) return res.status(400).send(err); let result = false; if (subscriber.length !== 0) { result = true; } res.status(200).json({ success: true, subscribed: result }); }); }); router.post("/unSubscribe", (req, res) => { Subscriber.findOneAndDelete({ userTo: req.body.userTo, userFrom: req.body.userFrom, }).exec((err, doc) => { if (err) return res.status(400).json({ success: false, err }); res.status(200).json({ success: true, doc }); }); }); router.post("/subscribe", (req, res) => { const subscriber = new Subscriber(req.body); subscriber.save((err, doc) => { if (err) return res.status(400).json({ success: false, err }); res.status(200).json({ success: true, doc }); }); }); module.exports = router; import React, { useEffect, useState } from "react"; import Axios from "axios"; function Subscribe(props) { const [SubscriberNumber, setSubscriberNumber] = useState(0); const [Subscribed, setSubscribed] = useState(false); useEffect(() => { let variables = { userTo: props.userTo }; Axios.post("/api/subscribe/subscriberNumber", variables).then( (response) => { if (response.data.success) { setSubscriberNumber(response.data.subscriberNumber); } else { alert("구독자수를 확인하는데 실패했습니다."); } } ); let subscribedVariables = { userTo: props.userTo, userFrom: localStorage.getItem("userId"), }; Axios.post("/api/subscribe/subscribed", subscribedVariables).then( (response) => { if (response.data.success) { setSubscribed(response.data.subscribed); } else { alert("구독했는지 확인하지 못했습니다."); } } ); }, []); const onSubscribe = () => { let subscribeVariables = { userTo: props.userTo, userFrom: props.userFrom, }; if (Subscribed) { Axios.post("/api/subscribe/unSubscribe", subscribeVariables).then( (response) => { if (response.data.success) { setSubscribed(!Subscribed); setSubscriberNumber(SubscriberNumber - 1); } else { alert("구독취소를 실패했습니다."); } } ); } else { Axios.post("/api/subscribe/subscribe", subscribeVariables).then( (response) => { if (response.data.success) { setSubscribed(!Subscribed); setSubscriberNumber(SubscriberNumber + 1); } else { alert("구독을 실패했습니다."); } } ); } }; return ( <div style={{ backgroundColor: `${Subscribed ? "#AAAAAA" : "#CC0000"}`, borderRadius: "4px", color: "white", padding: "10px 16px", fontWeight: "500", fontSize: "1rem", textTransform: "uppercase", }} onClick={onSubscribe} > {Subscribed ? "Subscribed" : `${SubscriberNumber} Subscribe`} </div> ); } export default Subscribe;
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기
npm run dev 후 에러가 뜹니다ㅜㅜ
$ npm run dev > react-chat-app@1.0.0 dev > concurrently "npm run backend" "npm run start --prefix client" [0] Error occurred when executing command: npm run backend [0] Error: spawn cmd.exe ENOENT [0] at Process.ChildProcess._handle.onexit (node:internal/child_process:277:19) [0] at onErrorNT (node:internal/child_process:477:16) [0] at processTicksAndRejections (node:internal/process/task_queues:81:21) [1] Error occurred when executing command: npm run start --prefix client [1] Error: spawn cmd.exe ENOENT [1] at Process.ChildProcess._handle.onexit (node:internal/child_process:277:19) [1] at onErrorNT (node:internal/child_process:477:16) [1] at processTicksAndRejections (node:internal/process/task_queues:81:21) [1] npm run start --prefix client exited with code -4058 [0] npm run backend exited with code -4058 npm ERR! code 1 npm ERR! path C:\Users\jeong\react\react-youtube-clone-master npm ERR! command failed npm ERR! command C:\WINDOWS\system32\cmd.exe /d /s /c concurrently "npm run backend" "npm run start --prefix client" npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\jeong\AppData\Local\npm-cache\_logs\2021-01-25T07_55_17_844Z-debug.log
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기
안녕하세요 질문드립니다.
제가 boiler-plate강의를 두어번 정도 듣고 어느정도 이해가되어서 유튜브만들기로 넘어왔는데요,boiler-plate강의에서 만든 것과 boilerplate-mern-stack에 있는 것이 차이가 좀 많더라구요. nav바도 생겼고 회원가입페이지나 로그인페이지 부분 ui도 다르고해서.. 혹시 이런 차이점들에 대해서 무시하고 그냥 들어도 무관한지 여쭤봅니다 ㅠㅠ
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기
useState안쓰는 이유가 뭔가요?ㅠ
비디오 디테일 페이지에서 댓글 올리자마자 comment list에 업뎃 바로바로 되고 화면에 re-render되기 위해 새로운 function을 만들던데요,, useState의 2번째 args인 array에 뭔가 넣어두면 그게 변경될때만 re-render되는거라고 배워서 그렇게 해봤거든요? 근데 미친듯이 console.logging이 되더라구요 ㅠㅠ 제가 생각한대로 댓글 달때마다 re-render은 되는데, 댓글을 새로 달지 않고 가만히 있을때도 미친듯이 logging이 되고 re-render이 되니까 이상해서요 ;; 이유가 뭘까요? const VideoDetailPage = (props) => { const [videoDetail, setVideoDetail] = useState([]); const [commentList, setCommentList] = useState([]); const videoID = props.match.params.videoID; const variable = { videoID: videoID }; useEffect(() => { axios.post('/api/video/getVideoDetail', variable).then((res) => { if (res.data.success) { setVideoDetail(res.data.videoDetail); } else { alert('비디오 정보 가져오기 실패'); } }); // 이 부분이 끊임없이 re렌더 됩니다..ㅠㅠ console.log(commentList); axios.post('/api/comment/getComments', variable).then((res) => { if (res.data.success) { setCommentList(res.data.comments); } else { alert('코멘트 정보 가져오기 실패'); } }); }, [commentList]);
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기
.get .post의 차이점 질문남깁니다.
밑에도 질문있던데 제 궁금증은 해결이 안되서 질문남깁니다. https://blog.outsider.ne.kr/312 이글보고 get과 post의 이해는 대강했는데요, get은 db에서 정보를 가져오고, post는 db로 정보를 전달/수정하는 것.. 그리고 axios.get이면 router.get으로 동일하게 맞춰줘야한다 정도 눈치껏 이해했습니다. 그런데 VideoDetailPage에서 왜 post를 썼는지 이해가 안됩니다. (나중에 views나 코멘트를 남기는걸로 정보를 db에 올리긴 하겠지만 이단계에서는 아니니까요) 거의 비슷한 로직인 LandingPage에서 쓴건 get이니까 더 헷갈리네요 . LandingPage에서 한번 더 들어갔기때문에 post를 쓴건가요? 미리 감사합니다!
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기
npm run dev 오류 (server)
[0] (node:10908) Warning: Accessing non-existent property 'count' of module exports inside circular dependency [0] (Use `node --trace-warnings ...` to show where the warning was created) [0] (node:10908) Warning: Accessing non-existent property 'findOne' of module exports inside circular dependency [0] (node:10908) Warning: Accessing non-existent property 'remove' of module exports inside circular dependency [0] (node:10908) Warning: Accessing non-existent property 'updateOne' of module exports inside circular dependency [0] events.js:292 [0] throw er; // Unhandled 'error' event [0] ^ [0] [0] Error: listen EADDRINUSE: address already in use :::5000 [0] at Server.setupListenHandle [as _listen2] (net.js:1318:16) [0] at listenInCluster (net.js:1366:12) [0] at Server.listen (net.js:1452:7) [0] at Function.listen (C:\Users\jimin\Downloads\boilerplate-mern-stack-master\boilerplate-mern-stack-master\node_modules\express\lib\application.js:618:24) [0] at Object.<anonymous> (C:\Users\jimin\Downloads\boilerplate-mern-stack-master\boilerplate-mern-stack-master\server\index.js:58:5) [0] at Module._compile (internal/modules/cjs/loader.js:1063:30) [0] at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10) [0] at Module.load (internal/modules/cjs/loader.js:928:32) [0] at Function.Module._load (internal/modules/cjs/loader.js:769:14) [0] at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:72:12) [0] at internal/main/run_main_module.js:17:47 [0] Emitted 'error' event on Server instance at: [0] at emitErrorNT (net.js:1345:8) [0] at processTicksAndRejections (internal/process/task_queues.js:80:21) { [0] code: 'EADDRINUSE', [0] errno: -4091, [0] syscall: 'listen', [0] address: '::', [0] port: 5000 [0] } [0] [nodemon] app crashed - waiting for file changes before starting... 이렇게 오류가 납니다. localhost:3000 포트에서는 정상적으로 잘 작동이 되더만, localhost:5000 포트에서는 Error Cannot GET /가 뜹니다. 왜 이런걸까요? ㅠ
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기
안녕하세요
수업 잘 듣고있는 학생입니다!! 늦게나마 궁금한게 있어 질문남깁니다. 항상 궁금해왔던것인데 Axios로 request를 보낼시 언제는 get을쓰고 언제는 post를 쓰고 계신데, 혹시 어떤 때를 기준으로 그 둘을 구분하는지 여쭈어봐도될까요?
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기
subscribe.js에서 mongoDB save메소드에 관한 질문입니다.
먼저 이렇게 강의 올려주셔서 감사합니다! 정말 큰 도움이 되고 있어요. 지금 강의 들었던 걸 다시 만들어보면서 복습하고 있는데.. save메소드를 사용할 때 항상 새로운 객체를 만들어서 save를 하시더라구요. (아래와 같은 방식으로) const subscribe = new Subscriber(req.body); 그래서 find 메소드를 사용할 때 처럼 그냥 Subscriber모델을 바로 쓰면 안되나? 해서 써봤는데 바로 에러가 떴습니다. 궁금해서 save메소드에 관한 설명을 봤는데도 왜 객체를 만들어야만 하는지에 대해서는 모르겠어서 질문 드립니다.
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기
선생님은 혹시 이런 에러 안뜨셨나요?
선생님 따라서 강의보고 작성하는 데 key 에러가 많이 뜨네요. 찾아보니까 component안에 prop을 줄때 key값을 안줘서 나오는 현상 같은데 어디를 어떻게 적용할지 모르겠네요. https://github.com/ohjooyeong/youtubeclone-with-react
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기
영상실행시 영상이 좌우로 떨리네요
지원되지 않은 형식의 파일이라그런가요?
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기
배포관련하여질문드립니다!!
강의 정말 잘듣고있습니다. 정말 도움이 많이 되는 강의해주셔서 정말로 감사드립니다. 다름이 아니오라, 강사님의 보일러 플레이트를 기준으로 강의를 시작하셨는데, 배포를 해보고싶어서요!!! 보일러플레이트를 기준으로 했을때, 프로젝트를 배포하려면 어찌해야하는건가요?? 배포관련된 다른 댓글들도보았는데 쉽게 따라하기가 힘들어서요..ㅠㅠ 혹시 직관적이고 직접적으로 설명해주실수있으실까요?(강사님의 보일러플레이트파일을 기준으로요!!!ㅠㅠ) 배포도해보고싶은데 알려주시면 정말감사하겠습니다!! ㅠㅠ 이상입니다!!!
- 해결됨따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기
npm run dev 했을때 몽고db 오류
npm run dev 했을때 정상적으로 웹이 켜지긴하는데 sign in, sign up이 보이지않고 로그아웃만 보입니다 터미널에선 이런 오류가 나옵니다 그리고 혹시 dev.js 에서 <username> <password> 부분 유저네임 sj 패스워드 root면 <sj><root> 이런식으로 기입하는게 맞나요? MongooseError [MongooseServerSelectionError]: Authentication failed. [0] at new MongooseServerSelectionError (C:\Users\hsj11\Desktop\st\node_modules\mongoose\lib\error\serverSelection.js:22:11) [0] at NativeConnection.Connection.openUri (C:\Users\hsj11\Desktop\st\node_modules\mongoose\lib\connection.js:823:32) [0] at Mongoose.connect (C:\Users\hsj11\Desktop\st\node_modules\mongoose\lib\index.js:333:15)[0] at Object.<anonymous> (C:\Users\hsj11\Desktop\st\server\index.js:18:26) [0] at Module._compile (internal/modules/cjs/loader.js:1137:30) [0] at Object.Module._extensions..js (internal/modules/cjs/loader.js:1157:10) [0] at Module.load (internal/modules/cjs/loader.js:985:32) [0] at Function.Module._load (internal/modules/cjs/loader.js:878:14) [0] at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:71:12) [0] at internal/main/run_main_module.js:17:47 { [0] reason: TopologyDescription { [0] type: 'ReplicaSetNoPrimary', [0] setName: null, [0] maxSetVersion: null, [0] maxElectionId: null, [0] servers: Map { [0] 'sangjun-shard-00-00.rckbj.mongodb.net:27017' => [ServerDescription], [0] 'sangjun-shard-00-01.rckbj.mongodb.net:27017' => [ServerDescription], [0] 'sangjun-shard-00-02.rckbj.mongodb.net:27017' => [ServerDescription] [0] }, [0] stale: false, [0] compatible: true, [0] compatibilityError: null, [0] logicalSessionTimeoutMinutes: null, [0] heartbeatFrequencyMS: 10000, [0] localThresholdMS: 15, [0] commonWireVersion: null [0] }, [0] [Symbol(mongoErrorContextSymbol)]: {} [0] }
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기
이 에러는 왜나는걸까요?ㅠㅠ
그동안 강의보면서 에러나도 어찌저찌 잘 넘겼는데 ㅠㅠ 이번 에러는 조금 감이 안오네요 ㅠㅠ writer가 유효하지 않게 넘어가는 건지 ㅠㅠ 이유가 있을까요?
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기
Sign in, Sign up이 보이지 않습니다
위 사진과 같이 npm run dev를 했을 때 이미 로그인되어 있고 강의 상의 페이지처럼 Sign in, Sign up 이 없습니다. 아래에 비슷한 질문에서 로그를 확인해보라는 말이 있으셔서 함께 올려봅니다. [0] [nodemon] app crashed - waiting for file changes before starting... [1] [HPM] Proxy created: / -> http://localhost:5000 [1] ℹ 「wds」: Project is running at http://172.30.1.27/ [1] ℹ 「wds」: webpack output is served from [1] ℹ 「wds」: Content not from webpack is served from /Users/~/Developer/React-youtube-clone/client/public [1] ℹ 「wds」: 404s will fallback to / [1] Starting the development server... [1] [1] Browserslist: caniuse-lite is outdated. Please run: [1] npx browserslist@latest --update-db [1] Compiled with warnings. [1] [1] ./src/components/views/LoginPage/LoginPage.js [1] Line 74:11: 'dirty' is assigned a value but never used no-unused-vars [1] Line 79:11: 'handleReset' is assigned a value but never used no-unused-vars [1] [1] ./src/components/views/RegisterPage/RegisterPage.js [1] Line 92:11: 'dirty' is assigned a value but never used no-unused-vars [1] Line 97:11: 'handleReset' is assigned a value but never used no-unused-vars [1] [1] Search for the keywords to learn more about each warning. [1] To ignore, add // eslint-disable-next-line to the line before.
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기
사이드 비디오 a태그
href ={`/video/${video.id}`} 제가 못본건진 모르겠지만 a 태그가 사이드 영상에서는 빠진 것 같습니다! 강의 항상감사합니다!!
- 해결됨따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기
img나 video src에 관해 질문있습니다.
만약 배포하게 된다면 주소가 로컬호스트가 아니게 될텐데 배포할 경우에는 어떻게 수정해야하는건가요? 배포 할 주소를 넣어주면 되나요?
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기
파일 업로드시 오류가 생깁니다
10kb 미만의 작은 파일들은 잘 올라가다가 10kb 이상 파일을 업로드시 콘솔에 서버 504에러가 찍히고 터미널에는 아래와 같은 프록시 오류와 file안의 내용을 찾을 수 없다는 오류가 같이 뜹니다 혹시 file이 제대로 리턴되지 않나해서 파일 데이터만 보내봤습니다 이렇게 해본 결과 더 이상 에러는 뜨지 않는대신 사이즈가 큰 파일들은 파일 데이터가 넘어가지 않는걸 확인했슴다 이 이후의 문제를 못풀고 있어서 도움 요청합니다 ㅠ
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기
비디오 재생이 안됩니다
영상 재생을 누르면 소리만 나오고 영상이 안나옵니다.. (썸네일도 보이지않아요) 코덱 문제인가요?? 갤러시로 찍은 영상은 잘 나오는데 아이폰으로 찍은 영상을 올리면 소리만 나오네요..
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기
강의 자료 요청드립니다
선생님 강의 항상 잘 보고 있습니다. 혹시 강의 자료 요청 부탁드려도 될까요? 새해 복 많이 받으세요!
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기
파일필터 관련질문
안녕하세요 강사님! 새해 복 많이 받으세요! 아래에 유용석님 질문글처럼 저도 mp4파일 말고 png파일을 올려봤는데요 uploads 폴더에 들어가집니다.. 아래에서 말씀해주신대로 필터조건을 걸어주면 사진업로드할때 비디오로 조건이 걸리긴하는데 다시 모든파일로 바꿔서 png파일을 올리면 올라가지더라구요. 여기서 mp4만 지정을 해줘서 아예 다른건 올라가지지 않을줄알았는데 말이죠,, 아예 저기서 if (ext !== '.mp4') 해놨으니 딱 mp4만 업로드 가능하게 하고싶은데 어떻게 해야될까요?? 모든코드는 영상속 강의님 코드와 동일하게 했습니다. 아 추가적으로 사소한 한가지가 더 있는데요! 강사님과 모든 코드를 똑같이 썼는데 왜 업로드아이콘의 + 가 가운데로 가지 않을까요?? 이렇게 했는데 이렇게 나옵니다.. 혹시 다른 수강생분들이 먼저 보시고 아시는 내용이라면 답변 부탁드립니다..