무료
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기
VideoDetailPage.js 비디오영상 렌더링할 때 썸네일도 안나오고 영상 재생도 안되시는 분들
위 처럼 404 not found가 발생하였고 파일 경로 문제로 파악하였습니다. 원인은 src부분의 따옴표가 경로를 인식 못하는 거 같더라구요.. 따옴표가 아닌 ``(backtick) 으로 변경하여 해결하였습니다. 에러 : src={'http://localhost:5000/${VideoDetail.filePath}'} 해결 : src={`http://localhost:5000/${VideoDetail.filePath}`} 혹시나 저와 같은 에러 발생하신분은 참고하시길 바랍니다~
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기
안녕하세요 url 문제로 404 not found 에러가 자꾸 뜹니다
api 앞부분에 video를 추가하지 않았는데 자꾸 video가 같이 전달되서 서버에서 데이터를 받아오지를 못하네요 왜그런지 아시는분 있을까요? 감사합니다.
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기
리액트에서 array.map()을 사용할때 index를 사용하면 좋지않은점
https://robinpokorny.medium.com/index-as-a-key-is-an-anti-pattern-e0349aece318 array 안에 있는 item을 추가하거나 삭제할 때 문제가 발생할 수 있다고 하네요 참고하세요
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기
똑같은 함수에 다른 결과값이 나오는 이유?
app.get('/', (req, res) => { res.send('Hello World!') }) app.get('/abcd', (req, res) => { res.send('Hello World!') }) app.get('/api/abcd', (req, res) => { res.send('api / abcd 입니다') }) // src 하위에 setupProxy.js const proxy = require("http-proxy-middleware"); module.exports = function(app) { app.use(proxy('/api', { target: 'http://localhost:4000/'})); }; axios.get('/') 을 주면 클라이언트의 html파일이 나와버리구요 <!DOCTYPE html> <html lang="en"> <head>~~~~~~~~~~~~~~~~ </body> </html> axios.get('/abcd')를 주면 /api/abcd 내용이 아닌 /abcd의 내용이 나와버립니다 ㅠㅠ 프록시 설정도 잘 해주어서 오류가 안나고 있는 상황인데 왜이런 현상이 발생할까요? 혹시 이유를 알고 계신가요?
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기
서버에러 504 질문드립니다.
유저콜렉션까지는 잘 됐고 지금도 잘되고있습니다. 근데 다른 콜렉션들은 추가도 안되고 계속 서버에러뜨는게 뭔가 이상하네요. 몽고디비 설정도 다시 다 해봤는데 달라지는게 없습니다 ㅠㅠ 답변주시면감사하겠습니다.
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기
bcrypt 작성할 때 arrow function 은 사용을 못하나요?
보일러플레이트 부분을 보고 있습니다. 해당 부분에서 function (err, salt) 부분을 (err, salt) => 로 변경하면 작동이 안되는데.. 어떤 차이가 있는지 궁금합니다. if (user.isModified("password")) { bcrypt.genSalt(saltRounds, function (err, salt) { if (err) return next(err); bcrypt.hash(user.password, salt, function (err, hash) { if (err) return next(err); user.password = hash; next(); }); }); }
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기
몽고db질문드립니다.
몽고db에서 connect를 눌렀더니 ip등록하는 부분이 나오는데.. mongoDB altlas 클러스터 보호 뭐라고 나오면서 add a connection IP address 라고 나오는데요 이건 그냥 localhost:3000 등록하면 되는건가요? 아니면 따로 등록 안해두 될까요?
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기
배포하는법
배포하는법은 어디서 볼수있을까요!?
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기
영상 재생이 안됩니다
세부 페이지에 들어가면 썸네일 화면이 뜨고 재생버튼이나 이미지를 클릭해도 재생이 되지 않는데 이는 어떤 문제인가요?
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기
new Like(variable)
const like = new Like(variable) , like.save(~~~)에서 new Like(variable)의 의미와 like.save를하면 어떤식으로 Like모델에 저장이 되는지 궁금해요 ㅠ
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기
Warning: Each child in a list should have a unique "key" prop.
Commet와 ReplyComment에서 key에러 뜨는데 해결할 좋은방법있을까요
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기
content.concat
새로운 comment를 submit했을 때 Content State에 새로운 comment를 추가해주기위해서 comment.concat을 쓰는거잖아요? submit할때 새로고침 되게하면 결과는 똑같은거 맞나요??!
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기
Redux devTool
devTool이 아무런 화면이 안뜨는데 아시는분있을까요? 저번에도 그래서 다시 지웠다 깔아서 되긴했는데 다른방법 아시는분 있다면 공유좀해주세요!
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기
스키마 writer 관해서
스키마 설정할때 writer:{ type: Schema.Types.ObjectId, ref:'user'} type에 Schema.Types.ObjectId 주고 ref에 "User"주면 User 스키마에서 정보를 가져올수있다했잖아요 그럼 writer에 Type은 뭐가되는거에요?? ref에 User 적고 type에 다른거적으면 User스키마에서 불러오는게 불가능한가요? 꼭 type: Schema.Types.ObjectId, ref:'user' 이렇게 해야만 정보를 불러올수있는건가요?
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기
파일 업로드 중 에러
업로드 하면 path가 정의되지않았다고 뜨면서 504에러가뜨고 서버가 끊겼어요 routes/video.js에서 res.req.file.path 는 파일 업로드하고나면 생기는 건줄알았는데 path를 따로 정의해줘야하네요... 저같은 사람 없을거같은데 혹~시나 해서 공유합니다,,ㅎ; const path = require('path');
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기
에러를 해결 못하겠습니다
댓글 작성 후 submit을 누르면 이런 에러가 뜨는데 이유를 모르겠습니다. 댓글 목록도 가져오지 못하는 것 같습니다 .ㅠㅠ 이유를 알 수 있을까요? ㅠㅠ routes/comment.js const express = require('express'); const router = express.Router(); const { Comment } = require("../models/Comment"); //================================= // Comment //================================= router.post('/saveComment',(req,res)=>{ const comment = new Comment(req.body) comment.save((err,comment)=>{ if(err) return res.json({success: false, err}) Comment.find({'_id':comment._id}) .populate('writer') .exec((err,result)=>{ if(err) return res.json({success: false, err}) res.status(200).json({success: true,result}) }) }) }) router.post('/getComments',(req,res)=>{ Comment.find({"postId":req.body.videoid}) .populate('writer') .exec((err,comments)=>{ if(err) return res.status(400).send(err) res.status(200).json({success:true,comments}) }) }) module.exports = router; comment.js import React, { useState } from 'react' import axios from 'axios' import {useSelector} from 'react-redux'; import SingleComment from './Singlecomment' function Comment(props) { const videoId = props.postId const user=useSelector(state=>state.user); //redux/state/user 경로 const [commentValue,setcommentValue]=useState("") const handleClick=(event)=>{ setcommentValue(event.currentTarget.value) } const onSubmit=(event)=>{ event.preventDefault(); const variable={ content:commentValue, writer:user.userData._id, postId:videoId } axios.post('/api/comment/saveComment',variable) .then(response=>{ if(response.data.success){ console.log(response.data.result) setcommentValue("") props.refreshFunction(response.data.result) }else{ alert('코멘트를 저장하지 못했습니다.') } }) } return ( <div> <br /> <p> Replies </p> <hr /> {console.log(props.commentLists)} {props.commentLists && props.commentLists.map((comment, index) => ( (!comment.responseTo && <SingleComment refreshFunction={props.refreshFunction} comment={comment} postId={videoId} /> ) ))} <form style={{display:'flex'}} onSubmit={onSubmit}> <textarea style={{width: '100%' , borderRadius: '5px'}} onChange={handleClick} value={commentValue} placeholder="코멘트를 작성해주세요" /> <br /> <button style={{width: '20%', height : '52px'}} onClick={onSubmit}>Submit</button> </form> </div> ) } export default Comment VideoDetailPage.js import React, { useEffect,useState } from 'react' import {Row,Col,List,Avatar} from 'antd' import { FaLaughSquint } from 'react-icons/fa' import Axios from 'axios' //import { post } from '../../../../../server/routes/video' //import { response } from 'express' import SideVideo from './Sections/SideVideo' import Subscribe from './Sections/Subscribe' import Comment from './Sections/Comment' function VideoDetailPage(props) { //const [Comments,setComment]=useState(initialState) const videoId=props.match.params.videoId const variable={videoId: videoId} const [VideoDetail,setVideoDetail]=useState([]) const [Comments,setComments]=useState([]) useEffect(()=>{ Axios.post('/api/video/getVideoDetail',variable) .then(response=>{ if(response.data.success){ setVideoDetail(response.data.videoDetail) }else{ alert('비디오 정보 가져오기 실패') } }) Axios.post('/api/comment/getComments', variable) .then(response=>{ if(response.data.success){ setComments(response.data.Comments) }else{ alert('코멘트 정보 가져오기 실패') } }) }, []) const refreshFunction=(newComment)=>{ setComments(Comments.concat(newComment)) } if(VideoDetail.writer){ const subscribeButton = VideoDetail.writer._id!==localStorage.getItem('userId') && <Subscribe userTo={VideoDetail.writer._id} userFrom={localStorage.getItem('userId')}/> return ( <Row gutter={[16,16]}> <Col lg={18} xs={24}> <div style={{width:'100%',padding:'3rem 4rem'}}> <video style={{width:'100%'}} src={`http://localhost:5000/${VideoDetail.filePath}`} controls/> <List.Item actions={[subscribeButton]} > <List.Item.Meta avatar={<Avatar src={VideoDetail.writer.image}/>} title={VideoDetail.writer.name} description={VideoDetail.description} /> </List.Item> <Comment refreshFunction={refreshFunction} commentLists={Comments} postId={videoId}/> </div> </Col> <Col lg={6} sx={24}> <SideVideo/> </Col> </Row> //</div> ) }else{ return( <div>...loading</div> ) } } export default VideoDetailPage
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기
네비 버튼이 안보입니다.
네비 버튼이 영상처럼 보이지 않고 .. 을 누르면 서브 버튼들이 아래로 나타나는 형태로 나타나는데 이걸 어떻게 바꿔야 할까요...? 그리고 npm 패키지들을 최신으로 다 업데이트했는데 여기서 수정해야할 부분이 있는건가요?
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기
로그인은 안되고 회원가입 버튼이 먹질 않습니다.
로그인을 하면 틀린 정보라고 나오는데 이를 이전 강의에서 만든 페이지에선 잘 작동합니다... 그리고 회원가입 버튼이 작동하질 않는데 이는 데이터베이스 문제일 확률이 큰가요? 에러는 아무것도 뜨지 않습니다...!
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기
이전강의와 비교
이전 강의에서 client의 App.js에서는 BrowserRouter을 사용하셨는데 깃에 업로드 된건 Suspense가 있고 BrowserRouter가 빠져있는데 왜 그런지 알려주실 수 있을까요?
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기
build 하는 법
안녕하세요. 공부하기 위해 강사님 강의를 수강해 듣다 boilerplate에 대해 알게 되었는데 build 하는 방법과 서버에서 mongoDB connection은 어떻게 이루어지는에 대해 궁금해 문의글 남깁니다 ㅎㅎㅎ