안녕하세요 John Ahn님 질문이 있습니다!

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

좋아요 싫어요 기능 (3) 클릭시 기능들

작성

287

안녕하세요 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

nodejs react redux mongodb

답변 4

John Ahn

지식공유자

안녕하세요 ^^

제가 직접해보니

return
res
.status(200)
.json({success: true})

이 백엔드 부분에 이렇게 되있는걸 아래처럼

return res
.status(200)
.json({ success: true })

아래 처럼 바꾸니 잘됩니다 ~

setTimeout도 잘 적용이 되어있습니다 ~

그리고 아마 에러나는건

ant design 쪽 에러나는건

혹시 비디오 등록한 거 DB 속에

유저 정보 없이 비디오만 등록 된게 있나요 ???

릴롱궤

한번 만들어 봤어요

비디오 디테일 페이지에서

마운트될때만 실행되도록

useEffect로

 Axios.post("/api/video/updateViews", variable).then((res) => {
      if (res.data.success) {
        setViews(res.data.views);
      } else {
        console.log("조회수를 올리는데 실패하였습니다.");
      }
    });

이렇게 포스트 방식으로 요청하고

서버에서

router.post("/updateViews", (req, res) => {
  Video.findById(req.body.videoId)
    .populate("writer")
    .exec((err, doc) => {
      if (err) return res.status(400).json({ success: false, err });
      doc.views++;
      doc.save((err) => {
        if (err) return res.status(400).json({ success: false, err });
      });
      res.status(200).json({ success: true, views: doc.views });
    });
});

이렇게 받아서 증가시킨걸 다시 클라이언트로 보내줘서

useState를 사용해서

const [Views, setViews] = useState(0);

Views 로 올렸습니다

2connect_bright

질문자

추가로 질문이 있습니다.

조회수를 올리는 쿼리가 따로 있는지요..

없다면 landingpage에 있는 image를 클릭해서 detail 페이지로 들어가면 refresh되면서

조회수가 서버에도 저장되어 landingPage 나 sideVideo에 있는 조회수에도

자연스럽게 views의 숫자가 올라가게 하고 싶거든요.

이미 modes/Video.js에는 videoSchema로

views : { type: number, defalut: 0 } 가 있어서 코드 몇 줄을 추가하면 될 것 같아서

이것저것 시도를 해봤습니다..

routes/video.js에 따로 조회수를 증가하는 route를 만들어도 보고

비디오 디테일페이지를 가져오는 router에 쿼리를 추가도 해봤습니다.

위의 두가지 이외에도 구글링을 통해 이것저것 시도를 해봤는데도 잘 안되네요.. ㅠ ㅠ

아무래도 제가 잘못 적용하고 있는 것 같아서 이렇게 질문을 드립니다..

2connect_bright

질문자

감사합니다! John 님

말씀해주신대로 서버쪽에 코드적용이 안되는 부분이 있어서 수정했고 그 뒤에는 setTimeout도 잘 됩니다 ㅜ ㅜ

prettier

그리고 antdesign 에러도 잘 수정했습니다!

DB에서도 user정보 없이 비디오가 업로드 된게 있었어요.

제가 upload 페이지를 수정하다가 눌렀었나봐요..ㅜ ㅜ

20개 넘게 영상을 올렸어서 비디오 리스트가 2페이지 생긴걸 미처 확인 못했네요

하루 넘게 머리 싸맸는데 정말 감사합니다!!!

덕분에 정말 많이 배웠습니다!

다음 강의도 기대하겠습니다 :)

인프런 커뮤니티 질문&답변

안녕하세요 John Ahn님 질문이 있습니다!