5. 랜딩 페이지에 비디오 보이기 - 유튜브 클론 코딩

1.랜딩페이지에서 서버에있는 비디오 데이터들을 가져오기 위한 Axios통신 보내기

const LandingPage = (props) => {
  const [Video, setVideo] = useState([]);

  useEffect(() => {
    Axios.get('/api/video/getVideos').then((response) => {
      if (response.data.success) {
        console.log(response.data);
        setVideo(response.data.videos);
      } else {
        alert('비디오 가져오기를 실패했습니다.');
      }
    });
  }, []);
  ....이하생략
 

2. 서버에 있는 라우터에서 클라이언트로 비디오데이터 정보 보내기

router.get("/getVideos", (req, res) => {
  //비디오를 DB에서 가져와서 클라이언트에 보낸다.
  Video.find() //Video collection에있는 모든 데이터들을 찾는다.
    .populate("writer") //writer에 type으로 Schema.Types.ObjectId라고 지정을 해주었었는데 populate를 걸어줘야 user에있는 모든 데이터들을 들고올 수있다.
    //populate를 안걸어 줄 경우 writer의 id만 가져온다.
    .exec((err, videos) => {
      if (err) return res.status(400).send(err);
      res.status(200).json({ success: true, videos });
    });
});

* .populate를 하는 이유는 writer에 type으로 Schema.Types.ObjectId로 모든 user에있는 데이터를 가져올 수있는데 populate메서드를 이용해야만 들고올 수있다.

다음과 같이 writer에 모든 user정보가 담겨있다.

3.가져온 비디오들을 랜딩페이지 뷰에 출력하기(antd 이용)

 const renderCards = Video.map((video, index) => {
    var minutes = Math.floor(video.duration / 60);
    var seconds = Math.floor(video.duration - minutes * 60);

    return (
      <Col lg={6} md={8} xs={24} key={index}>
        {/*lg:가장클때 6그리드를쓰겠다. md:중간크기일때 8그리드를 쓰겠다. 
        xs:가장작은 크기일때는 24그리드를 쓰겠다. 총24그리드 */}
        <div style={{ position: 'relative' }}>
          <a href={`/video/${video._id}`}>
            <img
              style={{ width: '100%' }}
              alt="thumbnail"
              src={`http://localhost:5000/${video.thumbnail}`}
            />
            <div
              className="duration"
              style={{
                bottom: 0,
                right: 0,
                position: 'absolute',
                margin: '4px',
                color: '#fff',
                backgroundColor: 'rgba(17, 17, 17, 0.8)',
                opacity: 0.8,
                padding: '2px 4px',
                borderRadius: '2px',
                letterSpacing: '0.5px',
                fontSize: '12px',
                fontWeight: '500',
                lineHeight: '12px',
              }}
            >
              <span>
                {minutes} : {seconds}
              </span>
            </div>
          </a>
        </div>
        <br />
        <Meta
          avatar={<Avatar src={video.writer.image} />}
          title={video.title}
        />
        <span>{video.writer.name} </span>
        <br />
        <span style={{ marginLeft: '3rem' }}> {video.views}</span>-
        <span> {moment(video.createdAt).format('MMM Do YY')} </span>
      </Col>
    );
  });
  return (
    <div style={{ width: '85%', margin: '3rem auto' }}>
      <Title level={2}>Recommended</Title>
      <hr />
      <Row gutter={16}>
      {renderCards}
      </Row>
    </div>
  );
};

 

* 랜딩페이지에 나타내기 위한 반응형 페이지를 위한 그리드 사용도 있고 동영상재생시간을 나타내기 위한 position사용도 있으니 위의 css코드는 꼭 분석하여 숙지할 필요가 있다.(코드는 antd 사이트에서 제공)

 

실행결과 -3가지

 

* css는 antd에서 제공하는 코드를 사용했다.

https://3x.ant.design/

Ant Design - A UI Design Language and React UI library