따라하며 배우는 노드, 리액트 시리즈  - 유튜브 사이트 만들기

따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기

(18개의 수강평)

2001명의 수강생
ReactReduxNode.jsMongoDB
무료
지식공유자 · John Ahn
21회 수업· 총 4시간 55분수업
평생 무제한 시청
수료증 미발급 강의
수강 난이도 초급
굼벵이 프로필

보일러플레이트 굼벵이 2일 전

로그인 안했는데도 로그인 되어있는 상황이네요

로그아웃은 당연히작동하고요...

1
skywalk 프로필

key={index} 추가 필요합니다. skywalk 3일 전

동작을 시켜보니 에러가 발생하여

Landing/ subscription Page 에 

return <Col key={index} lg={6} md={8} xs={24}> 를 추가 하면 없어 집니다.

1
으하핳 프로필

path변수가 온 곳 으하핳 4일 전

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분씩 봐도 모르겠던데 이거 정상인가싶기도 하고 제가 뒤떨어지는가 걱정도 되네요.

3
ycg02116 프로필

질문 부탁드립니다. ycg02116 8일 전

안녕하세요 항상 강의 잘 보고있습니다.

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

입니다.

감사합니다.

2
장우진 프로필

페이지 새로고침에 대해 질문 드립니다 장우진 10일 전

강사님 안녕하세요 ~ 

저는 업로드 페이지를 따로 만들지 않고 Modal 창을 이용해서 구현했는데

업로드 후에 메인 페이지를 새로고침 하고싶은데

props.history.push('/');

를 했을 때 이미 '/' 경로에 있으면 새로고침이 안되는 것 같아요,,

어떻게 새로고침을 구현할 수 있을까요?

3
으어어어 프로필

회원가입이 시도시 이런 에러가나와서요 으어어어 20일 전

회회원가입 버튼을 눌러도 가입이 진행이 안되서 질문드립니다.. 뭐가문제인지 모르겠어요 

1
김찬호 프로필

VideoDetailPage에서 Subscribe관련 질문 김찬호 20일 전

VideoDetailPage가 render되고 Subscribe 컴포넌트에서 useEffect 사용으로 state변화로 rerender되서 Subscribe버튼이 Subscribe -> Subscribed 로 보여지는게 싫어서 처음부터 Subscribed로 랜더할수있게 하는 방법이 있을까요?

2
마리오 프로필

views아래에도 기능별로 폴더를 만드는 게 좋은가요? 마리오 23일 전

views 

    - Video  (하나의 상위 폴더)

       - VideoDetail 

          - VideoDetailpage.js

       - VideoUpload 

          - VideoUploadpage.js

이렇게 비디오(Video)로 하나로 만들면 좋을 것 같은데,  VideoDetailpage, VideoUploadpage 폴더를 views아래서 따로 만드시는 이유가 있을까요?

Layout과 관련된 NavBar, Footer도 한 폴더로 몰아두면 좋을 것 같은데, 검색해보니 해외 소스들도 최대한 depth를 얕게 가져가려고 하는 것 같더라고요. 

아직 js는 import할 때 경로를 일일히 적어주어야하는 부분 때문인 것 같기도 한데 특별한 이유가 있을까요?

(사실 이부분이 제일 귀찮고 ㅜㅜ 힘들고 ㅜㅜ vsc와 sublimetext 같은 프로그램의 import 자동기능도  모두 별로인 것 같습니다 ㅜㅜ 코딩이 너무 힘들어요.)

2
마리오 프로필

실무에서는 퍼블리싱 적용은 어떻게 하나요? 마리오 23일 전

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 같은 라이브러리들은 리액트에 맞게 다시 코딩하는 방법들 튜토리얼과 포스팅 들이 많아서 어떤 방법이 좋은지 궁금합니다. 

(처음부터 리액트에 맞게 퍼블리싱하는 방법은 우선 제외했습니다!) 

2
마리오 프로필

nosql은 트랜잭션 처리를 어떻게 해야하나요? 마리오 23일 전

안녕하세요. 강의 정말 잘 보고 있습니다!

검색해보니 몽고디비 트랜잭션이 4.0이상에서는 가능하지만 , 다중화, 이중화, 백업 개념이라고  나오는데 확실히 이해가 되지 않습니다 ㅜㅜ 

파일 업로드나 디비 업데이트의 경우, 시간이 오래걸리거나 충돌할 가능성이 있을 것 같은데

1. 어떤 식으로 처리를 해주는게 좋은 방법이고 맞을까요? 

2. 어느 단계(수준)에서 진행해주는 것이 좋은지 궁금합니다. 

좋은 주말 되세요!

0
릴롱궤 프로필

또.. 질문입니다 ㅎㅎㅎㅎ... 릴롱궤 23일 전

질문이 많아서 죄송하네요 ㅠ.ㅠ

코멘트를 랜더하는 코드에서 

중괄호를 써서 함수를 만들면 (두번째 코드)

랜더가 안되더라구요

중괄호가 들어가는 것과 들어가지 않은것이 무슨 차이가 있는지 궁금합니다 

궁금한게 많은것 같아서 죄송하네요 ㅠ.ㅠ.

let renderReplyComment = (parentCommentId=>
    props.commentLists.map((commentindex=> (
      <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((commentindex=> (
      <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>
    ));
  };

2
릴롱궤 프로필

에러가 뜨네요~ ㅜ.ㅜ 릴롱궤 25일 전

getComment 라우터에서 

setComments 로 빈 배열에 서버에서 받아온 댓글 객체들을 넣어줘야 하는데 객체 안에 있는 객체를 받지 못하는 것 같습니다 ㅠ.ㅠ

도움이 필요합니다 ㅎㅎ...

https://github.com/ryun3433/Youtube2.0.git

깃헙주소입니다!

3
릴롱궤 프로필

ffmpeg 코드만 es5를 써야하는 이유가 있을까요? 릴롱궤 1달 전

제목이 곧 질문 내용입니다 :)

1
릴롱궤 프로필

Dropzone 같은 경우에는 설명해주시면서 강의해주시면 더 좋을것같아요! 릴롱궤 1달 전

Dropzone에대해서 이해못한체로 따라서 치기만 하니까 약간 답답해서..ㅎㅎㅎ getRootprops, getInputProps 를 어떻게 사용하는 건지 알려주시면 감사하겠습니다!

2
gheemddl 프로필

Registerpage.js에서 formik, yup의 용도 gheemddl 1달 전

Registerpage.js에서 formik과 yup이라는 모듈이 다운받아져 있는데 이건 무슨 용도인가요??

1
지식공유자 되기
많은 사람들에게 배움의 기회를 주고,
경제적 보상을 받아보세요.
지식공유참여
기업 교육을 위한 인프런
“인프런 비즈니스” 를 통해 모든 팀원이 인프런의 강의들을
자유롭게 학습하는 환경을 제공하세요.
인프런 비즈니스