React-Youtube : 구독페이지 만들기

유튜브를 사용해보신 분들은 아시겠지만, 유튜브는 각자의 채널의 고유 페이지가 있습니다.

오늘은 그러한 페이지를 만들려고 하는데요. 시작해보려고 합니다.

 

순서가 많이 헷갈릴 수 있기에 순서를 먼저 표시를 해보도록 하겠습니다.

1. 먼저 구독한 페이지를 볼 수 있는 파일을 먼저 생성을 한다.

2. 페이지의 링크를 위해 라우터를 생성한다.

3. 만든 페이지의 템플릿을 생성한다. (즉, CSS를 입히다.)

4. 내가 구독한 유저의 비디오만을 골라오는 API를 생성한다.

5. 서버에서 만든 데이터들을 화면에 출력하도록 한다.

이렇게 5단계에 순서에 맞게 실행하면 된다.

 

1. 페이지 생성

해당하는 위치에 혹은 원하는 위치에 폴더 및 파일을 생성한다. 필자의 설치 경로는 다음과 같다.

client > src > components > views > SubscriptionPage > SubscriptionPage.js

 

2. 라우터 생성

파일을 만들었으니 화면으로 페이지를 볼 수 있도록 라우터를 생성해주도록 한다.

// 중략
import SubscriptionPage from './views/SubscriptionPage/SubscriptionPage';

function App(){
	return (
    	<!-- 중략 -->
        <Route exact path="/subscription" component={Auth(SubscriptionPage, null)}
    );
}

export default App;

 

3. 템플릿 만들기

템플릿을 따로 만들 수도 있지만, 기존의 LandingPage.js를 참고하여 가져오도록 한다.

 

4. 내가 구독한 유저의 비디오들 만 서버에서 가져오기

클라이언트에서는 /api/video/getSubscriptionVideos 라는 api를 만들었는데, 해당하는 서버에서 할 일을 넣으려고 한다.

// server > routes > video.js
// 중략
const { Subscriber } = require("../models/Subscriber");
//중략
router.post("/getSubscriptionVideos", (req, res) => {
  // 자신의 아이디를 가지고 구독하는 사람들을 찾는다.
  Subscriber.find({ userFrom: req.body.userFrom }).exec(
    (err, subscriberInfo) => {
      if (err) return res.status(400).send(err);
      let subscribedUser = [];

      subscriberInfo.map((subscriber, i) => {
        subscribedUser.push(subscriber.userTo);
      });
      // 찾은 사람들의 비디오를 가지고 온다.
      Video.find({ writer: { $in: subscribedUser } })
        .populate("writer")
        .exec((err, videos) => {
          if (err) return res.status(400).send(err);
          res.status(200).json({ success: true, videos });
        });
    }
  );
});

내 아이디를 찾아 내가 구독하는 사람을 찾는다. 만약 내가 구독한 사람이 있을 때 화면에 뿌려주는 라우터를 만들었다.

 

5. 가져온 비디오 데이터들을 화면에 출력하기

// client > src > components > views > SubscriptionPage > SubscriptionPage.js
// 중략
function SubscriptionPage() {
  const [Video, setVideo] = useState([]);

  useEffect(() => {
    //모든 것을 가져올 때는 props가 필요가 없지만, 특정 값을 가져올 때는 props값을 넣어줘야 해 variable이 필요하다
    const subscriptionVariables = {
      userFrom: localStorage.getItem("userId"),
    };
    Axios.post("/api/video/getSubscriptionVideos", subscriptionVariables).then(
      (response) => {
        if (response.data.success) {
          console.log(response.data);
          setVideo(response.data.videos);
        } else {
          alert("비디오 가져오기를 실패 했습니다.");
        }
      }
    );
  }, []);
  // 중략
};
export default SubscriptionPage

 

TMI ERROR Story

504 GateWay, 500 Error이 발생하였었는데 몇번을 찾아보았지만 못 찾았다가 겨우 찾았다. 코드를 넣는 위치가 잘못되었다.

video.js에서 Video.find의 위치의 문제점이였고, 이 비디오에서 찾기는 내가 구독한 사람을 찾은 후 코드를 작성해야 하는 것인데 범주를 벗어나는 위치에 하여 에러가 발생하였다.

 

 

 

코드를 공부하는 것도 좋지만, 어떤 흐름을 가지고 이해를 하면 금방 찾을 수 있었던거라

다시 한번 이 개발의 로직을 다시한번 생각을 하게 되었다.