유튜브같이 동영상 보는 거 ~ 2023/03/13

 예전에 노마드 코더의 '유튜브 클론코딩' 강의를 수강한 적이 있다. 그리고 지금, React를 어느 정도 알고 있는 상황에서, 이 유튜브 클론 코딩한 결과물에 리액트를 적용해보려 했다. 하지만 생각보다 잘 풀리지 않아서 그냥 처음부터 스스로 해보기로 하였다. 이 글은 현재 2023년 03월 13일까지의 기록이다. 

 

1. Server

app.use("/watch", videoRouter);
app.use("/", rootRouter);

...

rootRouter.get("/search", searchVideo);	// 제목에서 검색한 단어를 포함하는 영상들을 포함하는 배열을 반환
rootRouter.get("/", home);	// 저장된 모든 영상들을 반환

...

videoRouter.get("/:id", getVideoById);	// 아이디에 따른 비디오를 반환(영상을 클릭한 경우 등)

 path에 따라 적절한 데이터를 반환한다. 우선, "/"의 경우에는 모든 영상들을, "/search"는 검색한 단어를 제목에 포함하는 영상들을 반환한다. 그리고 어떤 영상을 클릭한 경우 등, 특정 영상의 정보가 필요한 경우를 위한 함수를 작성하였다.

 

2.  Client

 URI에 따라 보여주는 화면이 다르다. 우선, 기본적인 Home이다.

 

2-1. Home

Home 컴포넌트

사이드 메뉴

 

 

아직 DBMS 없이 더미 데이터를 이용하여 진행하고 있다. 우선, 가장 처음 볼 화면인 Home은 유튜브와 비슷하게 보이게 하려 했다. 한 행에 영상이 4개씩 보이게 하였다. 그리고 각 영상의 썸네일 혹은 제목 등을 클릭할 경우 그 영상의 정보를 보여주는 화면으로 넘어갈 것이다. 그리고 제일 왼쪽 위에 리스트 아이콘이 있는데, 이 아이콘을 클릭할 경우 두 번째 사진같이 사이드 메뉴가 나오도록 하였다. 아직 애니메이션을 적용하지 않아 저 메뉴가 등장하고 사라지는 것이 아직은 어색하다.

 

2-2. Watch

Watch 컴포넌트

 특정 영상을 클릭할 경우 볼 수 있는 화면이다. 나중에 DBMS를 이용햐여 실제 영상을 이용한다면, 저 썸네일 대신 영상이 보일 것이다. 현재 이미지에서는 초록색과 파란색으로 화면이 가득하다. 이는 개인적으로 각 구역을 명확히 확인하기 위한 버릇으로, 좀 더 다듬어진 후에 당연히 수정할 예정이다.

 

2-3. Search

Search 컴포넌트

 

 이 화면은 제일 위의 헤더의 검색창에 특정 단어를 검색하면 볼 수 있는 화면이다. 이 화면에서는 검색한 단어가 제목에 포함되는 영상들만 보여준다. 현재 위의 이미지에서는 '페페'라는 단어를 검색하였고, 페페라는 단어가 포함된 영상만 보이는 것을 확인할 수 있다. 아직 CSS 부분이 거의 되어있지 않기에 매우 엉성하게 보인다. 이는 나중에 개선될 예정이다.

 

3. 추후 예정

 우선, 로그인 화면, 계정 생성, 영상 게시, 영상 수정, 영상 삭제 등을 구현할 예정이다. 그 후, 적절한 DBMS를 이용하여 더미 데이터가 아닌 실제 영상들을 이용해 작업을 진행할 것이다. 

 

https://github.com/als982001/videos-react

GitHub - als982001/videos-react