[클론코딩] 따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기 #7. 랜딩 페이지에 비디오 나타나게 하기

---

비디오 업로드를 성공했으니 업로드한 비디오를 랜딩 페이지에 띄우려고 한다

참고로 저번에 확인했던 collections 내에 비디오 데이터들이 모두 title이 없는 상태로 저장이 돼있어서 지웠다^^

type:String이라고 해야되는데 tyepe: String이라고 오타내서 그런거였음..ㅠㅠ

아무튼 다시 만들어서 현재는 하나의 비디오만 저장돼있는 상태이다

Video.js에 있던 Schema 변수가 다 담겨져있다

 

 

1. 빈 랜딩 페이지 생성

이미 boiler-plate에 만들어져 있으므로 패스

 

 

 

2. 비디오 카드 Template 만들기

LandingPage에서 비디오 카드가 어떻게 보여지는지 template을 만들어준다

    return (
        <div style={{width: '85%', margin: '3rem auto'}}>
            <Title level={2}> Recommended</Title>
            <hr />
            <Row gutter={[32,16]}>


                {/*{renderCards}

                <Col key={index} lg={6} md={8} xs={24}>
                <a href={`/video/post/${video._id}`}>
                    <div style={{position: 'relative'}}>
                        <img style={{width:'100%'}} src={`http://localhost:5000/${video.thumbnail}`} alt="thumbnail"/>
                        <div className='duration'>
                            <span>{minutes} : {seconds}</span>
                        </div>
                    </div>
                </a>
                    
                <br />
                <Meta
                    avatar={
                        <Avatar src={video.writer.image}/>    
                    }
                    title={video.title}
                    description=""
                />

                <span>{video.writer.name}</span> <br />
                <span style={{marginLeft:'3rem'}}> {video.views} views </span>
                -
                <span>{moment(video.createdAt).format("MMM Do YY")}</span>

                </Col> */}
            </Row>
        </div>

    )

 

이러면 

이렇게 되어있다

 

 

 

 

3. mongoDB에서 모든 비디오 가져오기

LandingPage가 보여지자마자 무엇을 할 것인지 지정하기 위해 useEffect() 함수를 사용한다

    useEffect(() => { // 돔이 열리자마자 무엇을 할 것인지

        Axios.get('/api/video/getVideos')
        .then(response => {
            if(response.data.success){
                console.log(response.data)
            }else{
                alert('비디오 가져오기에 실패 했습니다.')
            }
        })
    }, [])

비디오를 성공적으로 가져왔다면 콘솔로 결과물을 찍어볼 것이다

 

 

mongoDB에서 비디오를 받아오기 위해 video.js에 가서 getVideos를 새로 route 해줘야 한다~

router.get('/getVideos', (req, res) => {
  // 비디오를 DB에서 가져와 클라이언트에 보냄

  Video.find() // collections에 있는 모든 video 가져옴
  .populate('writer') // 모든 writer 정보 가져옴
  // 안하면 writer의 id만 가져옴
  .exec((err, videos)=> {
    if(err) return res.status(400).send(err)
    else res.status(200).json({success:true, videos})
  })
  
})

Video.find()를 이용하여 mongoDB에 데이터베이스에서 collections에 있는 모든 video를 가져올 수 있다

populate()를 이용하여 모든 정보를 가져온다

성공하면 success:true와 videos을 반환하고, 아니면 에러 메세지를 반환한다

 

success와 videos 모두 반환한 것을 알 수 있다

 

 

 

 

4. 가져온 비디오 데이터들을 출력하기

콘솔창으로 videos가 모두 가져와진 것을 확인했으니 이를 출력한다

useState을 이용하여 가져온 videos을 배열로 담는다

    const [Video, setVideo] = useState([]) // array에 담음

 

그 다음 renderCards를 작성한다

video의 duration을 이용하여 분/초를 표시하고,

저번에 지정해주었던 썸네일을 이용하여 이미지를 띄운다

avatar는 writer의 프로필 사진? 이라고 생각하면 될 것 같다

    const renderCards = Video.map((video, index)=> {
    
        // duration은 모두 second로 표시되어있으므로 가공함
        var minutes = Math.floor(video.duration/60)
        var seconds = Math.floor((video.duration - minutes * 60))

        return <Col key={index} lg={6} md={8} xs={24}>
        <a href={`/video/post/${video._id}`}>
            <div style={{position: 'relative'}}>
                <img style={{width:'100%'}} src={`http://localhost:5000/${video.thumbnail}`} alt="thumbnail"/>
                <div className='duration'>
                    <span>{minutes} : {seconds}</span>
                </div>
            </div>
        </a>
            
        <br />
        <Meta
            avatar={
                <Avatar src={video.writer.image}/>    
            }
            title={video.title}
            description=""
        />

        <span>{video.writer.name}</span> <br />
        <span style={{marginLeft:'3rem'}}> {video.views} views </span>
        -
        <span>{moment(video.createdAt).format("MMM Do YY")}</span>

        </Col> 
    })

그럼 아래와 같이 뜬다

 

오~

 

 

duration 부분이 안 이뻐서 index.css에 duration class를 추가해준다

.duration {
  bottom: 0;
  right: 0;
  position: absolute;
  margin: 4px;
  color: #fff;
  background-color: rgba(17,17,17,0.8);
  opacity: 0.8;
  padding: 2px 4px;
  border-radius: 2px;
  letter-spacing: 0.5px;
  font-size: 12px;
  font-weight: 500;
  line-height: 12px;
}

그러면 우리가 보는 익숙한 유튜브와 비슷하게 나온다