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