[노드/리액트 유튜브] #9~10. 비디오 디테일 페이지, Side 비디오 생성

**본 포스팅은 유튜브&인프런 John Ahn님의 노드 리액트 유튜브 클론 강의를 참고하여 작성하였습니다.**

 

 

비디오 디테일 페이지 만들기

 

 

1. 비어있는 비디오 디테일 페이지 만들기

2. route 만들기

모든 비디오에는 videoId가 있다. 그걸 통해 각 비디오마다 독립적인 video detail에 들어가기 위해
path="/video/:videoId" 로 설정해준다.

3. 비디오 디테일 페이지 template 만들기

4.

4. mongoDB에서 비디오 데이터 가져오기

5. 가져온 데이터들을 스크린에 출력하기

 

결과

 

 

---

 

 

 비디오 디테일 페이지에 Side 비디오 생성

 

 

1. 사이드 비디오 template 만들기

2. 한개의 카드 template 만들기

-> 여러개의 카드 불러오기 위해 이후에는 map을 사용 (4번 과정)

3. DB에서 비디오 데이터 불러오기

4. 불러온 데이터 화면에 출력하기

 

결과