무료
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기
Comment 모델에서 responseTo의 ref 질문입니다.
너무너무 좋은 강의 감사합니다. 짱짱! 강의 1주행 후 각 구조 설명을 보면서 만들고 있습니다. 제가 궁금한 첫번째 부분은 댓글 기능 생성 중 Comment 모델에서 responseTo의 ref는 'User'입니다. 대댓글에서 생성될 comment의 responseTo는 부모 comment의 id가 들어가야 하구요. 그래서 현재 에러는 나지 않지만 ref는 해당 ObjectId가 속해있는 모델을 넣어준다고 하셨는데 'Comment' 모델이 아닌 'User'로 설정하신 다른 이유가 있는가 궁금해서요. 그리고 구독 클릭시 (unSubscribe나 subscribe) userFrom이 null일 경우 구독신청이 작동해도 상관없는 건가요? 만약 아니라면 기능이 작동하지 않게 로그인 페이지로 보내야 하는지 혹은 알림만 띄워주면 될까요? 정말 좋은 강의 감사드립니다. 복 받으실거에요!!
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기
댓글 부분 관련 질문 있습니다
댓글 기능 부분에서 singleComment 부분을 하고 있는데 [HPM] Error occurred while trying to proxy request /api/video/getVideoDetail from localhost:3000 to http://localhost:5000 (ECONNRESET) (https://nodejs.org/api/errors.html#errors_common_system_errors) [1] [HPM] Error occurred while trying to proxy request /api/comment/getComments from localhost:3000 to http://localhost:5000 (ECONNRESET) (https://nodejs.org/api/errors.html#errors_common_system_errors) [1] [HPM] Error occurred while trying to proxy request /api/comment/getComments from localhost:3000 to http://localhost:5000 (ECONNRESET) (https://nodejs.org/api/errors.html#errors_common_system_errors) [1] [HPM] Error occurred while trying to proxy request /api/comment/getComments from localhost:3000 to http://localhost:5000 (ECONNRESET) (https://nodejs.org/api/errors.html#errors_common_system_errors) 이런식의 에러가 뜨며 이런 식으로 댓글 리스트가 전혀 보이지 않습니다. 업로드는 정상적으로 되고 있지만 댓글이 하나도 보이지 않습니다. 코드는 선생님의 코드를 그대로 가져왔습니다. 원인이 뭔지 잘 모르겠습니다.
- 해결됨따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기
업로드비디오페이지.js 에서 userData._id를 찾을 수 없다는데 왜 그런걸까요?ㅜㅜ
(사진)
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기
request 애러
db연동을 확인해봐도 그렇고 로그인,가입,비디오 등록할 때마다 [HPM] Error occurred while trying to proxy request /api/users/auth from localhost:3000 to http://localhost:5000 (ECONNREFUSED) (https://nodejs.org/api/errors.html#errors_common_system_errors) 이러한 에러가 뜹니다.. 뭐가 문제인걸 까요 ㅠㅠ 깃주소입니다: https://gitlab.com/jangsenoho/react-youtube.git
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기
comment error
선생님 안녕하세요! 댓글기능 강의를 따라하다가 질문드립니다. ReplyComment를 달면 'View 1 more comment' 태그가 생기나, 클릭 및 오픈되지가 않습니다. 선생님 github에 가서 실제 소스코드와 비교도 해봤지만 틀린 부분이 없다고 생각되는데 어떤 문제인지 감이 잡히지가 않아서요 ㅠㅠ 검토 한 번 부탁드리겠습니다..!! https://github.com/kang-hye-ji/YouTube-JohnAhn/commits/master ps) React App에서 ID : kanghj9480@naver.com / PW : 1234567 로 로그인하셔서 실험하시면 됩니다!^^
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기
댓글기능 질문
강사님 안녕하세요^^ 댓글기능 관련 질문 드려요. Comment.js 컴포넌트에서 '/api/comment/saveComment'에 variable을 보내는데, variable은 다음과 같습니다. const variable={ writer:user.userData._id, postId:videoId, content:commentValue } 이제 comment.js route로 와서 다음을 실행합니다. router.post('/saveComment', (req, res)=>{ const comment = new Comment(req.body) comment.save((err,commentInfo)=>{ if(err) return res.status(400).send(err); (★★★★★)Comment.find({'_id':comment._id}) .populate('writer') .exec((err,result)=>{ if(err) return res.status(400).send(err) return res.status(200).json({success:true, result}) }) }) }) 위의 5번째 줄 : Comment.find( {'_id' : comment._id} ) 이 부분에서 어떻게 comment._id가 입력 가능한지 궁금합니다. 1) req.body에서는 userData의 _id를 'writer'라는 이름으로 axios 햇으니 'writer'로 받아야 하는것은 아닌지요? 2) const comment = new Comment(req.body) 이 부분 때문이라고 해도.. Comment 모델이나 User 모델에는 '_id'가 나와있지 않고, 'writer'만 나와있는데 어떻게 'comment._id'로 받아지는 건지 궁금합니다. ++++++++++++++++++++++++++++++++++) 그리고 1) commentLists를 mapping한 것을 console창에 띄워보면, _id와 writer에 속한 _id가 각각 존재하던데 이 둘의 차이는 무엇인지 궁금합니다. 2) 또 parentCommentId로 'comment._id' 값을 주셨는데, 이것은 writer의 _id인지, 그냥 _id 인지요?? writer의 _id 토큰값은 동일하고, 그냥 _id 토큰값은 매 댓글마다 변경되는 듯 합니다. 그럼 답변 부탁드립니다^^
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기
state변화시 렌더링 질문
let [SubscribeNumber,setSubscribeNumber]=useState(0) let [Subscribed,setSubscribed] = useState(false); //버튼 클릭시마다 실행되는 함수 if (Subscribed) { Axios.post('/api/subscribe/removeFromSubscribe',subscribeVariable) .then(response=>{ if (response.data.success) { setSubscribeNumber(SubscribeNumber-1); setSubscribed(!Subscribed); } else { alert('Fail at Remove Subscribe') } }) } 1.setSubscribeNumber와 setSubscribe를 통해 state 변화시 컴포넌트가 다시 렌더링된다고 알고 있는데여 그럼 이 경우는 setSubscribeNumber한 후 렌더링 => setSubscribe한 후 다시 렌더링하고 종료 그러니깐 버튼 클릭시마다 총 2번의 렌더링을 실행한다고 보면 될까요? 2. setSubscribeNumber실행시 state변화가 먼저 일어나고 렌더링이 일어나는지 혹은 변화되기 전의 state값으로 렌더링 후 state변화가 일어나는지 순서가 헷갈리는데 무엇이 맞을까요? 3. useEffect(callback, []) =>여기서 2번째 인자로 []를 넘기면 componentDidMount처럼 행동한다고 봤는데 실무에서도 이렇게 자주 사용하시나요? 항상 너무나 감사합니다.혼자 처음부터 만들어보려는데 쉽지 않네요. 이거 얼른 다하고 결제해놓은 쇼핑몰도 할 생각입니다.
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기
(비디오 업로드)npm run dev error
안녕하세요. bolier plate강의 끝나고 비디오 업로드 FORM만들기(1)강의 듣다가 초반에 npm run dev했을때 에러나서 여쭤봐요..! 처음 concurrently에러나서 install까지 하고 다시 했더니 또 에러가 났습니다ㅠ 다시 npm run dev했을 때 모습입니다.. 답변 부탁드릴게요!
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기
map 에서의 warning 에러
Warning: Each child in a list should have a unique "key" prop. 이라는 에러가 나오는 데요. Comment.j 에서 이부분이 나오는 듯 합니다. 그런데 여러 코멘트인데 키를 무엇으로 정할 지도 모르겠으며, 어느 위치에 넣어야 하는 지 난감합니다. 신경은 쓰이고요. 수고하세요. 아직 리플라이 뎁스 문제도 이해를 못했구요. { props.commentLists && props.commentLists.map((comment, index) => ( (!comment.responseTo && <React.Fragment> <SingleComment postId={props.postId} comment={comment} refreshFunction={props.refreshFunction} /> <ReplyComment commentLists={props.commentLists} postId={props.postId} parentCommentId={comment._id} refreshFunction={props.refreshFunction} /> </React.Fragment> ) ))}
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기
안녕하세요 댓글기능 부분에서 질문 드립니다!
안녕하세요 1강부터 차례로 따라하다가 댓글 기능에서 다른 부분은 다 잘되는데 글씨가 안 보이네요 ㅠㅠ 댓글 파트 강의 2~3번씩 처음부터 돌려 보면서 코드 보는데 다른 부분을 못 찾겠습니다 ㅠㅠ 그리고 페이지 새로고침을 하면 정보가 안 남고 다 날라가네요 ㅠㅠ 깃 주소 입니다 https://github.com/wdh005/youtubeclonecoding.git
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기
보일러플레이트
로그인 안했는데도 로그인 되어있는 상황이네요 로그아웃은 당연히작동하고요...
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기
key={index} 추가 필요합니다.
동작을 시켜보니 에러가 발생하여 Landing/ subscription Page 에 return <Col key={index} lg={6} md={8} xs={24}> 를 추가 하면 없어 집니다.
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기
path변수가 온 곳
var storage = multer.diskStorage({ destination: (req, file, cb) => { cb(null, "uploads/"); }, filename: (req, file, cb) => { cb(null, `${Date.now()}_${file.originalname}`); }, fileFilter: (req, file, cb) => { console.log(path,'at File Filter') const ext = path.extname(file.originalname); if (ext !== ".mp4") { return cb(res.status(400).end("only jpg, png, mp4 is allowed"), false); } cb(null, true); }, }); 이 곳에서 path의 정체를 출력해보고 싶었는데 파일 업로드를 해도 출력이 안 됩니다.혹시 path가 어디서 왔는지 알 수 있을까요? 그리고 오픈소스를 사용할 때 저는 사용법을 30분씩 봐도 모르겠던데 이거 정상인가싶기도 하고 제가 뒤떨어지는가 걱정도 되네요.
- 해결됨따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기
질문 부탁드립니다.
안녕하세요 항상 강의 잘 보고있습니다. upload video 할때 오류가나서 이렇게 질문드립니다. 일단 console.log(response.data)쓰고 axios로 파일을 전송하려해도 콘솔창에는 2개 오류가 뜹니다. 1번 POST http://localhost:3000/api/video/uploadfiles 404 (Not Found) 2번 Uncaught (in promise) Error: Request failed with status code 404 보다보니까 포트가 서버 포트가 아닌것 같아서 문제가 발생하는 듯해서 아래처럼 포트까지 지정해서 풀 url을 적으니 문제는 해결이됩니다! axios.post(`http://localhost:5000/api/video/uploadfiles`, formData, config) 그런데 강사님처럼 했을때 제대로 작동하지 않는 이유는 제가 어느부분에서 제대로 하지 못했기 때문인거같은데 어느부분에서 실수를 했는지 알고싶어서 문의드립니다. 깃 url = https://github.com/Changyu-Ryou/Youtube-clone 입니다. 감사합니다.
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기
페이지 새로고침에 대해 질문 드립니다
강사님 안녕하세요 ~ 저는 업로드 페이지를 따로 만들지 않고 Modal 창을 이용해서 구현했는데 업로드 후에 메인 페이지를 새로고침 하고싶은데 props.history.push('/'); 를 했을 때 이미 '/' 경로에 있으면 새로고침이 안되는 것 같아요,, 어떻게 새로고침을 구현할 수 있을까요?
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기
회원가입이 시도시 이런 에러가나와서요
회회원가입 버튼을 눌러도 가입이 진행이 안되서 질문드립니다.. 뭐가문제인지 모르겠어요
- 해결됨따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기
VideoDetailPage에서 Subscribe관련 질문
VideoDetailPage가 render되고 Subscribe 컴포넌트에서 useEffect 사용으로 state변화로 rerender되서 Subscribe버튼이 Subscribe -> Subscribed 로 보여지는게 싫어서 처음부터 Subscribed로 랜더할수있게 하는 방법이 있을까요?
- 해결됨따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기
views아래에도 기능별로 폴더를 만드는 게 좋은가요?
views - Video (하나의 상위 폴더) - VideoDetail - VideoDetailpage.js - VideoUpload - VideoUploadpage.js 이렇게 비디오(Video)로 하나로 만들면 좋을 것 같은데, VideoDetailpage, VideoUploadpage 폴더를 views아래서 따로 만드시는 이유가 있을까요? Layout과 관련된 NavBar, Footer도 한 폴더로 몰아두면 좋을 것 같은데, 검색해보니 해외 소스들도 최대한 depth를 얕게 가져가려고 하는 것 같더라고요. 아직 js는 import할 때 경로를 일일히 적어주어야하는 부분 때문인 것 같기도 한데 특별한 이유가 있을까요? (사실 이부분이 제일 귀찮고 ㅜㅜ 힘들고 ㅜㅜ vsc와 sublimetext 같은 프로그램의 import 자동기능도 모두 별로인 것 같습니다 ㅜㅜ 코딩이 너무 힘들어요.)
- 해결됨따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기
실무에서는 퍼블리싱 적용은 어떻게 하나요?
antd를 사용하셔서 편히 화면구성을 했지만, 보통은 퍼블리셔들이 직접 작성한 css와 js파일은 어떻게 리액트에 적용하는지 궁금합니다. 일단 검색해서 여러 방법들 중에서 2가지 방법을 시도해봤는데요. 1. public에 assets폴더를 만들고 index.html에 기존 방법대로 link해줌. => 장점 : 쉽고 잘 돌아감. => 문제점 : 1) body에 걸린 클래스는 변경이 불가능한 것 같음 2) 가능하게 하려면 페이지 렌더링을 매번 다시 해야하는데 그러면 react의 장점이 없어지는 것 같음. 2. src안에 assets폴더를 만들고, index.js에서 링크 => 문제점 : 1. 이 역시 body나 하나 아래 div(wrapper)에 걸린 class를 선택, 변경 시 만들어진 렌더링을 다시 해야하는 것 같음. 2. js파일들을 수정없이 import할 방법을 찾지 못함. => 모든 함수들은 전부 react function에 맞게 수정해야하면 시간이 많이 걸림. 검색해보아도 딱히 깔끔한 방법들은 없고, antd나 유명한 material 같은 라이브러리들은 리액트에 맞게 다시 코딩하는 방법들 튜토리얼과 포스팅 들이 많아서 어떤 방법이 좋은지 궁금합니다. (처음부터 리액트에 맞게 퍼블리싱하는 방법은 우선 제외했습니다!)
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기
nosql은 트랜잭션 처리를 어떻게 해야하나요?
안녕하세요. 강의 정말 잘 보고 있습니다! 검색해보니 몽고디비 트랜잭션이 4.0이상에서는 가능하지만 , 다중화, 이중화, 백업 개념이라고 나오는데 확실히 이해가 되지 않습니다 ㅜㅜ 파일 업로드나 디비 업데이트의 경우, 시간이 오래걸리거나 충돌할 가능성이 있을 것 같은데 1. 어떤 식으로 처리를 해주는게 좋은 방법이고 맞을까요? 2. 어느 단계(수준)에서 진행해주는 것이 좋은지 궁금합니다. 좋은 주말 되세요!