무료
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기
또.. 질문입니다 ㅎㅎㅎㅎ...
질문이 많아서 죄송하네요 ㅠ.ㅠ 코멘트를 랜더하는 코드에서 중괄호를 써서 함수를 만들면 (두번째 코드) 랜더가 안되더라구요 중괄호가 들어가는 것과 들어가지 않은것이 무슨 차이가 있는지 궁금합니다 궁금한게 많은것 같아서 죄송하네요 ㅠ.ㅠ. let renderReplyComment = (parentCommentId) => props.commentLists.map((comment, index) => ( <React.Fragment> {comment.responseTo === parentCommentId && ( <div style={{ width: "80%", marginLeft: "40px" }}> <SingleComment key={index} refreshFunction={props.refreshFunction} comment={comment} postId={props.postId} /> <ReplyComment parentCommentId={comment._id} refreshFunction={props.refreshFunction} postId={props.postId} commentLists={props.commentLists} /> </div> )} </React.Fragment> )); ===================================================== let renderReplyComment = (parentCommentId) => { props.commentLists.map((comment, index) => ( <React.Fragment> {comment.responseTo === parentCommentId && ( <div style={{ width: "80%", marginLeft: "40px" }}> <SingleComment key={index} refreshFunction={props.refreshFunction} comment={comment} postId={props.postId} /> <ReplyComment parentCommentId={comment._id} refreshFunction={props.refreshFunction} postId={props.postId} commentLists={props.commentLists} /> </div> )} </React.Fragment> )); };
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기
에러가 뜨네요~ ㅜ.ㅜ
getComment 라우터에서 setComments 로 빈 배열에 서버에서 받아온 댓글 객체들을 넣어줘야 하는데 객체 안에 있는 객체를 받지 못하는 것 같습니다 ㅠ.ㅠ 도움이 필요합니다 ㅎㅎ... https://github.com/ryun3433/Youtube2.0.git 깃헙주소입니다!
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기
ffmpeg 코드만 es5를 써야하는 이유가 있을까요?
제목이 곧 질문 내용입니다 :)
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기
Dropzone 같은 경우에는 설명해주시면서 강의해주시면 더 좋을것같아요!
Dropzone에대해서 이해못한체로 따라서 치기만 하니까 약간 답답해서..ㅎㅎㅎ getRootprops, getInputProps 를 어떻게 사용하는 건지 알려주시면 감사하겠습니다!
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기
Registerpage.js에서 formik, yup의 용도
Registerpage.js에서 formik과 yup이라는 모듈이 다운받아져 있는데 이건 무슨 용도인가요??
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기
2 Depth 이후 새로고침하면 출력이 안됩니다.
1 Depth에 댓글을 단 2 Depth의 경우, 새로고침 하더라도 출력이 됩니다. 2 Depth에 댓글을 단 3 Depth의 경우, View 1 more comment(s) 문구도 표시되고, 클릭하면 정상적으로 출력됩니다. 그런데 새로고침 하는 순간 3 Depth는 사라집니다... DB에 저장되는 것은 확인했습니다. 같은 공간에서 같은 강의로 실습한 사람도 마찬가지입니다.
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기
비디오를 가져오는 작업에서 해당 비디오에 달린 코멘트 수까지 가져오는 작업을 하려고 합니다!
일단 랜딩 페이지에서 전체 비디오를 가져오면서 각 비디오에 달린 댓글의 갯수도 함께 가져오고자 하여 '/api/video/getVideos'라우트에서 다음과 같이 작업하였습니다. 즉, Video 모델을 통해 DB에 저장된 모든 비디오를 다 가져온 후에 모든 비디오가 담긴 배열을 map을 통해 돌리면서 Comment 모델을 이용해 각 원소, 즉 각 비디오에 달린 댓글 수를 가져와서 그 값을 commentsNum이라는 속성을 생성하며 추가하는 작업을 하였습니다. 하지만 기대한 것과 다르게 commentsNum이라는 속성이 추가되지 않네요 ㅠㅠ 이론상 map을 돌리며 각 원소에 대해 작업한 것이 잘 적용되어야 하는데 말이죠... 위의 현상의 원인도 모르겠고, 해결 방안도 모르겠어서 질문 드립니다 ㅠ
- 따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기
npm run dev 오류입니다
삭제된 글입니다
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기
boilerplate-mern-stack 깃헙 dependency alerts
깃헙에 있는 boilerplate-mern-stack 을 다운받아서 압축을 풀고 저의 깃헙에 올리는 것까지 성공을 했는데 dependency alerts 라는 게 뜨는데 어떻게 해야 해결 할 수 있나요..?
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기
로그인 질문입니다ㅠ
안녕하세요 현재 수강하고 있습니다. 지금 이틀째 로그인이 되지 않고 있어서 그러는데 질문 좀 드려도 될까요?ㅠ postman으로 회원가입까진 됩니다ㅠ 근데 로그인만 할라하면 아래처럼 나옵니다.. 인터넷에 나온건 postman설정들어가래서 프록시도 만져보고 했는데도 잘 안되네요..ㅠ 제가 작성한 코드입니다.. user.js index.js 어느 부분이 잘못된걸까요?ㅠ 제 깃헙 주소입니다! https://github.com/yyoungeun/bolier-plate-ko 답변 부탁드립니다..! 감사합니다!
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기
코드관련 질문입니다.
안녕하세요 강사님. 강의 시작에 세팅된 보일러 플레이트를 공부 중에 이해가 좀 어려운 코드를 질문 드리고 싶어 질문을 하게 되었습니다. 1. \client\src\components\views\RegisterPage\RegisterPage.js const formItemLayout = { labelCol: { xs: { span: 24 }, sm: { span: 8 }, }, wrapperCol: { xs: { span: 24 }, sm: { span: 16 }, }, }; xs, sm 이 가지는 숫자의 의미에 대해서 정확히 알고 싶습니다. 그리고 formItemLayout을 아래 코드에서 <div className="app"> <h2>Sign up</h2> <Form style={{ minWidth: '375px' }} {...formItemLayout} onSubmit={handleSubmit} > <Form.Item required label="Name"> <Input 이렇게 사용하시던데 이 것의 의미는 어떤 맥락인지 궁금합니다. <Form.Item required label="Name"> <Input id="name" placeholder="Enter your name" type="text" value={values.name} onChange={handleChange} onBlur={handleBlur} className={ errors.name && touched.name ? 'text-input error' : 'text-input' } /> {errors.name && touched.name && ( <div className="input-feedback">{errors.name}</div> )} </Form.Item> ClassName에서와 그 밑에에서 errors.name과 touched.name을 활용한 코드의 용도가 잘 이해가 가질 않네요 ㅠ {props => { const { values, touched, errors, dirty, isSubmitting, handleChange, handleBlur, handleSubmit, handleReset, } = props; 파일 내에서 이렇게 변수를 선언하는 모습을 보았는데 이건 제가 기존에 보지 못한 선언 방식이라 당황스럽네요 ㅠ 이런 종류의 문법은 JSX만의 문법인 것 인가요? 그리고 위 코드가 무슨 의미인지 알 수 있을까요? 질문은 Bold 처리된 총 4개 입니다. 읽어주셔서 항상 너무 감사드립니다. 좋은 하루 보내세요!!
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기
window 환경에서 git 소스 받은 후 에러 뜰때
안녕하세요! 강의 너무 잘 듣고 있습니다. 윈도우 환경에서 강사님 git hub 소스를 받아 root, client npm install시 client 부분에서 'cd() never called'라는 오류로 인한 해결책을 공유하고자 글을 남깁니다. 위 에러는 proxy 관련 에러인거 같고 해결책으로는 client 하위로 이동하여 npm config rm proxynpm config rm https-proxy 실행 후 npm install을 재실행 해주세요. 이후 root로 이동 후 npm run dev를 하시면 강사님과 같은 메인 화면이 뜨는걸 확인 하실수 있습니다. 저와같은 오류를 겪으시는분들께 도움이 되었으면합니다~
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기
질문드립니다 ㅠㅠ
안녕하세요 강사님 열심히 따라 하고 있는데 자꾸 막히는 부분이 생기네요 ㅠㅠ 구글에 계속해서 찾아보지만 해결이 되지 않아 질문 드립니다. 비디오를 업로드시 uploads폴데에 비디오는 생기지만 썸네일은 생기지 않습니다 . 비디오를 선택하고 올리면 아래의 에레메시지만 뜨고 아무 변화가 없네요 ㅠㅠ [0] undefined [0] D:\boilerplate-mern-stack-master\server\routes\video.js:57 [0] console.log(metadata.format.duration); [0] ^ [0] [0] TypeError: Cannot read property 'format' of undefined [0] at D:\boilerplate-mern-stack-master\server\routes\video.js:57:30 [0] at handleCallback (D:\boilerplate-mern-stack-master\node_modules\fluent-ffmpeg\lib\ffprobe.js:106:9) at D:\boilerplate-mern-stack-master\node_modules\fluent-ffmpeg\lib\ffprobe.js:145:16[0] at D:\boilerplate-mern-stack-master\node_modules\fluent-ffmpeg\lib\capabilities.js:194:9 [0] at wrapper (D:\boilerplate-mern-stack-master\node_modules\async\dist\async.js:268:20) [0] at next (D:\boilerplate-mern-stack-master\node_modules\async\dist\async.js:4582:24) [0] at D:\boilerplate-mern-stack-master\node_modules\async\dist\async.js:321:20 [0] at D:\boilerplate-mern-stack-master\node_modules\fluent-ffmpeg\lib\capabilities.js:186:13 [0] at D:\boilerplate-mern-stack-master\node_modules\fluent-ffmpeg\lib\capabilities.js:123:9 [0] at wrapper (D:\boilerplate-mern-stack-master\node_modules\async\dist\async.js:268:20) [0] at next (D:\boilerplate-mern-stack-master\node_modules\async\dist\async.js:4582:24) [0] at D:\boilerplate-mern-stack-master\node_modules\async\dist\async.js:321:20 [0] at D:\boilerplate-mern-stack-master\node_modules\fluent-ffmpeg\lib\capabilities.js:116:11 [0] at D:\boilerplate-mern-stack-master\node_modules\fluent-ffmpeg\lib\utils.js:223:16 at F (D:\boilerplate-mern-stack-master\node_modules\which\which.js:68:[HPM] Error occurred while trying to proxy request /api/video/thumbnail from localhost:3000 to http://localhost:5000 (ECONNRESET) (https://nodejs.org/api/errors.html#errors_common_system_errors) [0] [nodemon] app crashed - waiting for file changes before starting... [0] 16) [0] at E (D:\boilerplate-mern-stack-master\node_modules\which\which.js:80:29) [1] [HPM] Error occurred while trying to proxy request /api/video/uploadfiles from localhost:3000 to http://localhost:5000 (ECONNREFUSED) (https://nodejs.org/api/errors.html#errors_common_system_errors) [1] [HPM] Error occurred while trying to proxy request /api/video/uploadfiles from localhost:3000 to http://localhost:5000 (ECONNREFUSED) (https://nodejs.org/api/errors.html#errors_common_system_errors) 깃주소입니다. ㅠㅠ https://github.com/wdh005/youtubeclonecoding.git
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기
질문입니다.
안녕하세요 강사님. 제가 직접 모든 코드를 따라쳐보면서 각 코드가 가지는 의미들까지 되짚어보면서 이번주 공부를 하고 있는데요, 의문이 생긴 코드가 있어 질문을 합니다. //use this to show the image you have in node js server to client (react js) //https://stackoverflow.com/questions/48914987/send-image-path-from-node-js-express-server-to-react-client app.use('/uploads', express.static('uploads')); // Serve static assets if in production if (process.env.NODE_ENV === "production") { // Set static folder app.use(express.static("client/build")); // index.html for all page routes app.get("*", (req, res) => { res.sendFile(path.resolve(__dirname, "client", "build", "index.html")); }); } 바로 이 코드인데요. 서버쪽의 index.js 입니다. 항상 개발단계에서만 작업을 하다보니 Production 단계에서는 이러한 코드처리가 구체적으로 어떤 의미를 가지는 건지가 잘 이해가 안되는 것 같아요. 대답하기 쉬우시라구 번호를 매겨 보았습니다.!!! 1. 일반적으로 코드를 완성하면 프론토 엔드 서버 따로 ( nginx 라던가 ), 벡 엔드 서버 따러 ( amazon ec2 라던가 ) 해서 각자의 역할을 분리하는 것으로 알고 있습니다. 2. 그렇다면 벡엔드쪽 코드인 위 코드에 프론트와 관련된 스태틱 폴더를 지정(app.use(express.static("client/build"));)하는 이유가 무엇인지요? 프론트 엔드의 스태틱 폴더를 관리하는 책임은 프론트 서버쪽 코드에서만 담당해야 하는 것이 아닐까요? 이 코드의 의미 자체를 모르겠어요 ㅠㅠ 3. app.get("*", (req, res) => 코드의 의미는 SPA 이기때문에 어떤 호출이건간에 벡엔드는 해줄 것이 없고 그냥 프론트 서버의 index.html로 가라는 뜻으로 받아들이면 되나요? 좋은 강의, 자료 감사합니다. 즐거운 하루 되세요
- 해결됨따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기
비디오 업로드 시에 file change 이벤트 시에 서버 로컬에 파일을 업로드 하잖아요!
안녕하세요 강의 열심히 수강 중인 학생입니다! 좋은 강의 감사합니다. 강의의 비디오 업로드 페이지에서 파일을 선택함으로써 change 감지를 하여 해당 파일을 핸들링하는 이벤트 함수를 정의하였잖아요! const onFileChange = (e) => { let files = e.currentTarget.files; let formData = new FormData; formData.append('file', files[0]); const config = { header: {'content-type': 'multipart/form-data'} }; axios.post('/api/image/uploadfiles', formData, config) .then(response => { if(response.data.success) { console.log(response.data); setFilePath(response.data.url); } else { alert('이미지 업로드를 실패했습니다.'); setFilePath(undefined); } }) .catch(error => { console.log(error); }); }; 그런데 이 부분에서 문제가 submit 이벤트가 아닌, change 이벤트에서 서버 로컬에 파일을 저장한다는 것입니다. 만일 클라이언트 사용자가 파일을 한 번 선택하고서 잘못 선택했네? 이러면서 다시 다른 파일을 선택 후에 form을 제출하게 되면 DB에는 마지막으로 선택한 파일 정보가 저장이 되지만, 서버를 돌리는 로컬 폴더에는 그 전에 선택한 파일까지도 올라가는 현상이 발행하게 됩니다. 물론, DB 정보만으로 클라이언트 상에 데이터가 뿌려지지만 서버 로컬 폴더에는 클라이언트에 보내지 않을 파일이 잔류하게 됩니다... 이 경우를 어떻게 처리할까요?!
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기
에러 발생으로 인해 ㅠ 질문좀 드릴게요..
업로드 부분에서 알려주신 maxsize 변경으로 잘진행이 되어 썸네일까지 뜨더라구요..ㅠ 그런데. mongoDB에 업로드 하는 과정에서 에러가 떠서 .. 문의드립니다 ㅠㅠ 콘솔을 찍어도 잘모르겠네요.. 1강 넘어왔더니.. 또걸려버렸네요.. https://github.com/jangbm/youtube_clone
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기
안녕하세요 John Ahn님 질문이 있습니다!
안녕하세요 John Ahn 님 유튜브로 영상을 보다가 무비앱 완독하고 유튜브까지 완독을 했습니다. 영상을 보면서 오류가 생길때마다 어찌어찌 해결하면서 끝까지 완독했는데요. 덕분에 React와 더불어 많은 공부를 할 수 있어 정말 감사드립니다. 다름이 아니라 코딩을 하다가 문제가 생겨서 이렇게 질문을 드립니다. 불과 몇시간전만 해도 모든 페이지를 완성해서 영상 업로드 및 댓글, 좋아요 기능 등 모든 페이지가 정상적으로 동작하는 것을 확인했습니다. 그상태로 깃허브에 commit 도 했구요 그런데 초반 upload 강의 중 setTimeout 부분이 적용이 안되서 혼자 구글링하며 이것저것 찾아보고 있는 도중에 갑자기 랜딩페이지가 에러가 뜨네요.. Unhandled Rejection (TypeError): Cannot read property 'image' of undefined (anonymous function) src/components/views/LandingPage/LandingPage.js:71 68 | <Meta avatar={// 유저 이미지 69 | // < Avatar 70 | // style={{ color: '#f56a00', backgroundColor: '#fde3cf' }}>SJ</Avatar> } > 71 | <Avatar src={video.writer.image} />} | ^ 72 | //영상 타이틀 73 | title={video.title}/> 74 | {/* writer_name */} LandingPage src/components/views/LandingPage/LandingPage.js:27 24 | }) 25 | }, []) //뒤에가 비어있으면 한번만 돈다 26 | > 27 | const renderCards = Videos.map((video, index) => { | ^ 28 | // duration을 받아올 때 모두 초로 되어있기에 따로 계산 29 | var minutes = Math.floor(video.duration / 60); 30 | var seconds = Math.floor(video.duration - minutes * 60); View compiled ▶ 18 stack frames were collapsed. (anonymous function) src/components/views/LandingPage/LandingPage.js:20 17 | .then(response => { 18 | if (response.data.success) { 19 | console.log(response.data.videos); > 20 | setVideos(response.data.videos) | ^ 21 | } else { 22 | alert('비디오 가져오기를 실패했습니다') 23 | } View compiled 이런 식으로요.. antd 에서 가져오는 Avatar 컴포넌트의 이미지 property를 읽을 수 없다는데요. 랜딩페이지는 초반에 완성을 하고 그 뒤에 건드리지도 않았는데.. 거기다 콘솔창에는 파일이 정상적으로 로드 된걸로 찍혀있어요. 그래서 redux app 으로 확인해보니 로그인은 되어 있는 상태고, URL 에 주소를 입력하면 다른 페이지들은 접속이 가능합니다. 구독 페이지나 업로드 페이지, 로그인 등 페이지가 정상적으로 나와요. MongoDB에 데이터도 정상적으로 들어가 있고, 업로드 페이지에서 파일을 올려도 정상적으로 업로드가 되고 서버에도 저장이 됩니다. 그런데 홈으로 돌아가거나 구독 페이지를 통해서 비디오 디테일 페이지로 들어가면 다시 TypeError가 나옵니다. 혹시나해서 John Ahn님 깃허브에서 코드를 그대로 가져다 했는데도 안되서요.. 이렇게 질문을 남깁니다. 추가로 비디오 업로드 페이지에서 setTimeout이 적용이 안되는데 왜 그런지도 알 수 있을까요? GitHub 주소 입니다: https://github.com/ceylon85/youtube_clone
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기
url : res.req.file.path 오류..
지속적으로 path가 undefined으로 오류가 나는데 왜그럴까요 ㅠㅠ 강사님이 완료하신 github 코드도 붙여넣어도 동일하게 오류가 생기네요.ㅠ
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기
초보 질문입니다.
안녕하세요. 항상 좋은 강의 감사드립니다. 궁금한점이 있어서 이렇게 남깁니다. 인자로 받을때 (req,res, cb) 를 넣는데 request, response는 알것같은데 cb는 무엇인가요? 그리고 dropzone에 파일을 업로드하면, console.log(files) 빈 array가 나옵니다 ㅠ 파일이 안나오네요. https://github.com/jangbm/youtube_clone.git 입니다. 고맙습니다.
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기
안녕하세요 강사님
강의를 1회독을 마치고 제가 만든 프로젝트를 실제 현업에서 쓰이는 서버 환경과 동일하게 구축하고 싶어서 해당 내용에 대해서 궁금하여 질문합니다. 지금 보면, 프론트 서버, 벡 엔드서버, 데이터베이스 서버가 이렇게 3개가 있는데요, 제가 포트폴리오로 이러한 프로젝트를 만들어서 배포까지 해보았다라고 어필을 하고 싶은데 어떤 호스팅 업체를 사용해서 환경을 구축해야 인터뷰시에 가장 매력적으로 (?? ㅎㅎㅎ) 보일지 고민입니다 . Heroku라는 서비스를 이용해 보았는데 현업보다는 그냥 토이프로젝트로 올릴때나 자주 쓰이는 것 같은데 현업에서는 프론트와 백을 어떤식으로 구성해서 서버를 구축해서 완성된 서비스를 배포하나요? <질문> - 가능하시다면 지금 올리신 유투브 서비스를 배포하기위한 쉬운 서버 서비스(프론트,백)들을 추천해주신다면 정말 감사하겠습니다. - 아 참 그리고 저번에 이야기한 클라우스 환경에서의 개발에 대한 강의를 준비 중이라 하셨는데 클라우드 환경에서의 개발을 어떤 의미인지 여쭤봐도 될까요? </질문> 좋은 강의 항상 감사드립니다. cf. 하던 일을 관두고 저번 달 부터 공부를 시작하면서 참 막막했습니다. 그런데 강사님 강의를 3주 전 부터 알게되고 기본강의부터 지금은 유투브까지 다 듣게 되었네요. 다음 달 안에까지 올리신 모든 클론 강의(필요하다면 영어강의까지) 다 듣고 제 힘으로 완전히 만들 수 있게 숙달한 후 포트폴리오로 적극적으로 어필해서 6~7월에 구직활동을 시작하려합니다. 주저리주저리 쓴 이유는 강사님이 하시는 활동이 정말 실제적으로 누군가에겐큰 도움이 되고 희망을 주고 있다고 말하고 싶어서 였어요. 감사합니다.