무료
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기
multer를 이용해 클라이언트 request를 받는 것과 express의 router로 request를 받는 것 질문이요!
안녕하세요! 강의 잘 듣고 있습니다. 저번의 질문 해결해주신 것 감사합니다! 진행 도중 또 질문이 생겨 올립니다 ㅠㅠ 파일 저장을 위한 storage 설정을 한 후에 그 설정 정보를 변수에 다음과 같이 담고서, / STORAGE MULTER CONFIG let storage = multer.diskStorage({ // 클라이언트로 전달 받은 파일을 서버의 어느 곳에 저장할지 설정하는 부분이다. // node server 폴더 구조에 맞춰서 uploads라는 폴더를 생성해 주자! destination: (req, file, cb) => { cb(null, "uploads/"); }, // 저장되는 파일 이름을 지정하는 부분이다. filename: (req, file, cb) => { cb(null, `${Date.now()}_${file.originalname}`); } }); // 파일 저장 방식에 대해 설정한 정보를 upload란 변수에 담는다. 파일은 하나만 핸들링한다. const upload = multer({ storage: storage }).single("file"); 그 후에 upload 변수를 이용해 router 처리 시에 클라이언트로부터 온 파일을 핸들링 하는데요, 다음의 차이가 있습니다. router.post('/uploadfiles', (req, res) => { // 찍히지 않는다 console.log("req.file : ", req.file); // 클라이언트에서 받은 비디오 파일을 노드 서버에 저장한다. // 이를 위해 multer라는 dependency를 다운받는다. upload(req, res, (err) => { // 파일 필터링 let typeArray = req.file.filename.split('.'); let fileType = typeArray[1]; // 확장자가 동영상이 아니라면 if(fileType !== 'mp4' && fileType !== 'avi') { return res.json({success: false, err}); } // 잘 찍힌다. console.log("req.file : ", req.file); if(err) { return res.json({success: false, err}); } return res.json({ success: true, url: req.file.path, fileName: req.file.filename }); }) }); upload 내에서만 req.file이 찍히는데요, 클라이언트 요청에서의 코드는 formData에 'file'이란 key로 다음과 같이 보내줍니다. const onDrop = (files) => { let formData = new FormData; formData.append('file', files[0]); const config = { header: {'content-type': 'multipart/form-data'} }; axios.post('/api/video/uploadfiles', formData, config) .then(response => { if(response.data.success) { console.log(response.data); } else { alert('비디오 업로드를 실패했습니다.'); } }) .catch(error => { console.log(error) }); }; 도대체 왜 이런 현상이 발생하며, 무슨 차이가 있는 것일까요...?
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기
클라이언트 포트는 3000이고, 노드 서버 포트는 5000입니다.
좋은 강의 제공해 주셔서 감사합니다! 강의 수강 도중 궁금한 점이 생겨서 질문 드립니다! 클라이언트(http://localhost:3000)에서 HTTP 요청을 할 때, api/video/uploadfiles 와 같은 식으로 요청하게 되면 기본적으로 http://localhost:3000/api/video/uploadfiles 의 주소로 서버에 request가 날라가더군요 ㅠ 그래서 명시적으로 다음과 같이 axios를 이용한 HTTP 요청의 url 부분에 axios.post('http://localhost:5000/api/video/uploadfiles', formData, config) .then(response => { if(response.data.success) { console.log(response.data); } else { alert('비디오 업로드를 실패했습니다.'); } }) .catch(error => { console.log(error) }); 이렇게 해 주고 있는데, 이처럼 클라이언트(port : 3000)와 서버(port : 5000)가 다른 포트 번호를 가지고 있을 때 저렇게 도메인+포트까지 다 명시를 해 줘야 하나요? 아니면 도메인+포트를 생략할 수 있는 방법이 있나요?
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기
클릭 액션이 동작하지 않을 땐 어떻게 해야하나요?
ReplyComment 에서 ReplyCommnet 를 보기 위해 "View 1 more comment(s)" 를 클릭했을 때와 LikeDislikes 에서 "onLike" 나 "onDislike" 이모티콘을 클릭했을 때 클릭 액션에 따른 변화 ( ReplyComment 가 보이거나 Like, Dislike 가 아이콘이 변경되는 등 ) 가 일어나지 않는다면 어떤 부분을 확인해야 할까요? 클릭 액션시 별도 오류도 출력되지 않고 console.log로 state 이나 해당 함수 실행여부를 확인했을 땐 정상적으로 출력됩니다.
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기
질문입니다.
router.post('/uploadfiles',(req,res) =>{ // 비디오를 서버에 저장하낟 . upload(req,res,err=>{ if(err){ return res.json({success:false, err}) } console.log("=================================================================") console.log(res.req.file) return ( res.json({ success:true , url : res.req.file.path , fileName : res.req.file.filename }) ) }) }) // 앞에 라우팅해줬기 떄문에 이렇게 써줘도 되요 다음의 코드에서 res.req 부분이 잘 이해가 되지 않아 질문합니다. 저는 res는 벡 엔드쪽에서 프론트 쪽으로, 그리고 req는 프론트에서 벡 엔드쪽으로 가는 정보들을 모아놓은 개념이라고 생각을 했습니다. 정확히 말하면, http를 통해 request와 관련된 패킷( request 헤더와 바디) response와 관련된 패킷(response 헤더와 바디) 이 2개가 오가는 것으로 알고 있는데 그런데 res.req는 뭔가 그 개념 자체를 무시하는 문법인 것 같아서 이것은 내부적으로 어떤 의미를 가지고 있는지 궁금합니다. 요청과 응답을 별개인데 응답에서 요청을 참조한다?? 말이 어패가 있는 것 같아서요. 혹시 조금의 설명을 부탁드려도 될련지요? ==================================== 좋은 강의 항상 너무 감사드립니다. 가르침에 대해 재능이 있으신 것 같아요. ^^^
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기
질문입니다.
안녕하세요 강사님 강의 정말 잘 듣고 있습니다. 서버에 대한 질문이 있어서 이렇게 질문을 남깁니다. 일반적으로 현업에서는 이용되는 서버의 종류가 보통 몇개나 되나요 ?? 지금 웹 공부 초기단계라 이 서버라는 개념이 추상적이라 이해가 잘 안가네요 ㅠ 제 생각에는 서버는 벡 엔드라는 서버만 존재하고 클라이언트는 웹 브라우저라는 도구를 통해 그냥 url을 요청하고 벡 엔드는 그 url에 맞는 html과 css, js만을 보내주고 웹 브라우저가 받기만 하면 된다고 이해를 하고 있는데 프론트 엔드 서버라는 이야기가 나오니까 개념이 또 헷갈리기 시작합니다. 벡 엔드라는 것이 내부 로직과 관련되고 프론트 엔드는 겉 모습에 대한 내용이고 그 각각의 역할을 2개의 서버로 구분했을 뿐 인 건가요? 사실상 2개의 서버를 하나로 통합해서 서비스를 해도되는데 관리와 기능의 구분 상 나눈 것 이라고 이해해도 되는 것 일까요? 제가 생각한 것을 그림으로 표현해봤는데 혹시나 제가 잘못 이해하고 있는 개념이 있다면 따끔하게 지적 부탁드립니다 ㅠㅜ 좋은 강의 항상 감사드립니다.
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기
오류 발생 문의드려요 ㅠㅠ
코드는 맞는데 찾을 수 없다고 오류가 생겨서 비디오 업로드를 하지 못하고 있어요
- 해결됨따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기
파일필터
파일필터 정상작동여부 판단을 위해서 mp4가 아닌 png를 올려보앗는데 업로드폴더에 들어갑니다 ㅠㅠ
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기
설정
cd client가 안되여
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기
안녕하세요! npm run dev 빌드 관련 문의드립니다.
안녕하세요!! 유튜브에서 ERN STACK PROJECT - ONLINE SHOP CLONE (SOURCE CODE INCLUDED) (REACT JS) 강의 듣고있습니다. git에서 소스 clone 받은 후 root, client 경로에서 npm install, mongoURI까지 설정했습니다. client, server에서는 각각 npm 빌드가 되지만, root 경로에서는 npm run dev 빌드가 되지 않습니다. 아래에 발생하는 에러로그 첨부드립니다. 감사합니다.
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기
안녕하세요!!! register등록시 오류로 질문드립니다.
유튜브에서 boiler-plater강의 보고 인프런와서 유튜브 클론 학습을 따라 하고 있습니다. 유튜브 boiler-plater강의 따라 할때도 submit버튼 클릭시 아무 이벤트도 실행이 안 되서 질문 드렸었는데 여기서도 register 등록하려고 정보 입력하고 submit버튼 눌렀는데 등록이 안되고 vscode에서 버튼 클릭시 아래에 오류가 계속 발생합니다 . ㅠㅠ [HPM] Error occurred while trying to proxy request /api/users/register from localhost:3000 to http://localhost:5000/ (ECONNREFUSED) (https://nodejs.org/api/errors.html#errors_common_system_errors)
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기
Encountered two children with the same key
다음 에러를 없애려면 어떻게 해야할까요? map함수때매 생긴 문제 같은데 key값을 함수에도 설정이 가능한가요?
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기
두 번째 뎁스 이후 댓글 출력 에러
안녕하세요! boiler plate 강의에 이어 youtube clone까지 매우 잘 배우고 있습니다. 처음으로 오류가 발생하여 질문드리는데요, 댓글 기능 중 두 번째 debpth 이후 대댓글들 출력이 안되는 오류가 발생합니다. View n-th coment(s) paragraph도 출력이 안되구요, 해당 기능이 작동을 하지 않으니 그 이후 댓글을 볼 수 가 없습니다. 아래는 깃헙 주소입니다! https://github.com/hermes0827/youtube-clone
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기
Cannot read property format of undefined
metadata의 format에서 위의 오류가 계속 발생합니다. 영상 파일은 서버에 잘 저장되는데 썸네일이 생성되지 않습니다.
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기
[참고] MongoDB 접속 오류 : querySrv ENODATA
강좌에서 소개한 것처럼 Github 에서 boiler-plate 를 받아서 npm run dev 를 할 떄 다음과 같은 오류가 발생했습니다. 제 경운 콘솔에선 다음과 같은 에러 로그를 출력했고 실행된 브라우저에서는 로그인 상태가 되고 로그 아웃이 동작하지 않았습니다. MongoDB Atlas 에 접속되지 않는 이슈입니다. 이 경우 여러 해결 방법이 있을 수 있는데 제 경우 MongoDB Altas 내 설정 변경으로 해결했습니다. 방법은 다음과 같습니다. 1. MongoDB 에 접속해 로그인한다. 2. 왼쪽 메뉴 중 "ATLAS" 하위 "Clusters" 로 들어간다. 3. "SANDBOX" 내 "boiler-plate" 에서 "CONNECT" 옵션을 선택한다. 4. 두번째 항목인 "Connect your application" 을 선택한다. 5. 1번 항목의 VERSION 을 변경한다. 3.0 or later -> 2.2.12 or later >> 버전에 따라 "Connection String Only" 가 달라집니다. 6. 2번항목의 "Connection String Only" 를 복사한다. 7. 소스코드로 돌아와서 "server" -> "config" -> "dev.js" 에 있는 mongoDB 접속 URI 를 변경한다. >> 접속 URI 내 <password> 를 자신의 mongodb 접속 비밀번호로 변경해야 합니다 . 정상적으로 처리됐다면 npm run dev 를 실행했던 콘솔내 정상 접속 로그가 출력될 것 입니다. 참고 : https://stackoverflow.com/questions/55499175/how-to-fix-error-querysrv-erefused-when-connecting-to-mongodb-atlas
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기
랜딩 페이지에 비디오가 안보여요 ㅠㅠ
현재 Video upload 페이지에서 비디오를 올리면 서버에 저장되고 해당 비디오와 섬네일 이미지가 local에도 저장되는 것을 확인되었습니다. 이유는 모르겠지만 GET을 실패하고 [HPM] Proxy created: /api -> http://localhost:5000/ [1] ℹ 「wds」: Project is running at http://192.168.0.5/ [1] ℹ 「wds」: webpack output is served from [1] ℹ 「wds」: Content not from webpack is served from /Users/sujinkim/Downloads/YoutubeClone/client/public [1] ℹ 「wds」: 404s will fallback to / [1] Starting the development server... 터미널에서는 이런식으로 나옵니다 ㅠㅠ 어디서부터가 문제인지 너무 모르겠어서 문의 남겨요. 깃헙 주소는 https://github.com/Sujin-Kim1/YoutubeClone 입니다. 도와주세요 ㅠㅠ
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기
npm run dev시 오류
안녕하세요 ! 영상 4분 30초 쪽에 보면 npm run dev 입력하면 오류가 발생하는데요 > react-boiler-plate@1.0.0 dev C:\VScodeProject\boilerplate-mern-stack-master > 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 (internal/child_process.js:267:19) [0] at onErrorNT (internal/child_process.js:469:16) [0] at processTicksAndRejections (internal/process/task_queues.js:84:21) [1] Error occurred when executing command: npm run start --prefix client [1] Error: spawn cmd.exe ENOENT [1] at Process.ChildProcess._handle.onexit (internal/child_process.js:267:19) [1] at onErrorNT (internal/child_process.js:469:16) [1] at processTicksAndRejections (internal/process/task_queues.js:84:21) [1] npm run start --prefix client exited with code -4058 [0] npm run backend exited with code -4058 npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! react-boiler-plate@1.0.0 dev: `concurrently "npm run backend" "npm run start --prefix client"` npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the react-boiler-plate@1.0.0 dev 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\hdg42\AppData\Roaming\npm-cache\_logs\2020-03-23T12_21_01_907Z-debug.log 이렇게 나옵니다. 무슨 문제일까요? 답글
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기
format에러 도와주시면 감사하겠습니다!
John Ahn님 강의 정말 잘 듣고 있습니다. 유튜브로 한국어 유튜브 클론 강의 듣고 있습니다. 처음부터 따라하고 있는데 6강에서 썸네일이 만들어 지지 않습니다. window로 ffmpeg를 잘 설치하였습니다! 그래서 깃에 올려주셔서 완성본을 다운받아 실행해도 이런식으로 format이 잘 못되었다고 나오거나 ffprobe error가 나옵니다! uploads 폴더와 thumbnails 폴더에는 잘 저장되어 있습니다. 도와주시면 감사하겠습니다!! 그리고 제가 보일러 플레이트나 movie api로 만드신 인강에서는 proxy에 문제가 없었습니다. 그런데 이번 강의에서 업로드 할때 썸네일이 보이지 않고 제출 버튼을 누르면 저렇게 마지막에 hpm 에러가 나오고 있습니다! 유뷰트에 영어버전 유뷰트 클론을 보고 저와 같은 에러가 있는 사람이 있어서 John Ahn 님이 작성하신 두번째 코드로 작성하였을때 아래 사진과 같이 나왔습니다
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기
img src 속성 GET 404에러
<img src={`http://localhost:5000/${thumbnailPath}`} art="thumbnail" /> 안녕하세요 오류가 발생하여 질문드립니다. 이미지 태그의 src 값을 위와 같이 설정하고 강의와 같이 thumbnailPath의 값이 있을 경우에 img를 출력하도록 작성했습니다. 하지만 GET 404 에러가 발생합니다.. 서버에서 썸네일 이미지를 못가져오는것 같습니다 ㅠㅠ thumbnailPath의 값과 서버에 저장된 썸네일의 경로 값을 비교해보았는데 같습니다.. github 주소입니다. https://github.com/kangdari/youtube_clone/tree/c967f1f2a5fe2d33851facc7a5d235cba70bf942
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기
fileFilter가 정상적으로 작동되지 않는것 같습니다.
영상에서는 diskStorage 함수 내부에 fileFilter 함수를 작성하여 파일 확장자에 따라 오류 처리를 하도록 했는데 안되는 것 같아요. 구글링해보니 multer 함수 내부에 fileFilter 함수를 정의해야한다고합니다. 궁금해서 찾아봤습니다. ... const multerFilter = (req, file, cb) => { const ext = path.extname(file.originalname); // 동영상이 아닌 경우 에러 발생 if (ext !== ".mp4") { return cb(new Error("only mp4 is allwoed!")); } // 동영상 파일 cb(null, true); }; const upload = multer({ storage: storage, fileFilter: multerFilter }).single("file");
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기
보일러 플레이트 강의 ppt 공유 가능한지 질문드립니다.
이전에 제가 오해할 수 있게 말씀드린것 같네요. ㅜㅜ 제가 요청드리고 싶은건 유튜브에 있는 보일러 플레이트 강의 ppt인데 가능할까요?