목적
remix를 사용한 코드를 잠깐 봤었는데 react-router와 매우 유사하다는 것을 깨달았다.
알고보니 같은 팀에서 만든 거라고 한다.
안그래도 전에 만든 초짜(?) 포트폴리오가 react-router기반으로 만들어진 프로젝트였음에도 불구하고 react-router 기능을 거의 사용하지 않았기 때문에 이번엔 제대로 한 번 사용해보고자 마음먹었다.
서드파티 API를 사용해서 외부 데이터를 받아오고 랜더링하는 프로젝트를 생각하다가 모바일버전의 유튜브를 클론코딩해 보기로 했다.
사용한 기술
react18+ ( react function components )
CSS Module
react-router v6
vite
react-icons
Web Storage API
Fetch API
ReactPlayer
Youtube Data API v3
uuid
느낀점
먼저 Youtube Data API가 굉장히 이상하게(?) 되어있다는 것을 깨달았다.
유튜브 맨 처음 화면에 나오는게 뭐가 있나.
영상 소스와 영상 제목, 조회수, 채널 제목, 채널 이미지 등.. 여러 데이터들이 표시된다.
그런데 이 중에 채널 이미지는 API의 엔드포인트가 다르다.
즉, 페이지당 Fetch를 두 번씩 해야 하는 것이다.
이게 왜 문제냐면, 유튜브는 api사용 개수 제한이 있기 때문이다.
멋도 모르고 하다가 에러가 나서 확인해보니 다 썼단다.
따라서 채널 이미지는 포기하고 또한, 중복 데이터를 받아오지 않게 하지 위해 localStorage로 가짜 캐싱을 만들어 사용할 수 밖에 없었다.
Rapid API를 통해서 한 번에 데이터를 받아오는 방법이 있지만 Rapid API는 하루 개수 제한이 500개라서 패쓰했다.
또한, 모바일 유튜브처럼 영상 자동 재생이 되도록 하고 싶었는데 권장하지 않는(?) 동작이라고 한다.
사용자가 직접 클릭해서 영상을 재생하도록 하는 것이 좋다고 한다.
따라서 자동재생은 넣지 않았다.
이번에 프로젝트를 진행하면서 Fetch에 대해 깊게 고찰해보는 시간을 가졌었다.
왜냐하면 Fetch는 결국 외부 데이터를 가져오는 것이기 때문에 데이터를 바로바로 보여줄 수가 없기 때문이다.
여기서 2가지 선택지가 생긴다.
- 데이터를 다 받아온 후에 랜더링 할 것이냐
- 먼저 틀을 잡아서 렌더링한 후에 받아온 데이터를 끼워 넣을 것이냐
개발자 마다 서로 다른 생각과 호불호가 발생하겠지만, 내생각은 이렇다.
페이지가 전환될 때는 첫 번째 방법을 사용하고 페이지를 변경하지 않고 그 안에서 데이터가 변경되는 경우엔 두 번째 방법을 사용하는 것이 사용자 경험에 더 좋을 것이라 생각했다.
(물론 그냥 개인적 취향이다)
따라서 이번 프로젝트에서는 두 번째 방법이 사용될 만한 기능이 없으므로 첫 번째 방법으로만 Fetch API를 사용했다.
react-router v6에서는 loader를 통해 첫 번째 방법을 사용할 수 있었다.
페이지를 로드할 때 loader 함수를 먼저 실행하고 그 결과를 컴포넌트 내부에서 훅으로 받아올 수 있다.
즉, 페이지를 전환하면 loader가 먼저 호출되고 페이지를 렌더링하는 컴포넌트가 호출되기 때문에 react-router가 클라이언트 사이드 렌더링 라이브러리임에도 불구하고 서버 사이드 렌더링과 같은 효과를 보여준다.
결국 서버 사이드 렌더링과 같은 동작을 하기 때문에 페이지 로드 후 첫 렌더링 까지의 시간이 제일 중요하다.
따라서 메인페이지에서 영상을 로드하는 대신 썸네일만 로드하는 식으로 페이지를 구성했다.
즉, 영상 대신 이미지를 로드하는 것이라서 많은 시간을 아낄 수 있을 거라 생각했다.
해당 썸네일을 클릭하고 나서야 영상페이지로 전환되며 영상이 로드된다.
CSS Module을 이번에 처음 써봤다.
내가 느낀 장단점으로는 다음과 같다.
- 장점 : 컴포넌트별로 네임스페이스를 달리 하기 때문에 (정확히는 CSS의 클래스 네임에 랜덤한 접두사를 붙여넣는 식이다) 클래스 이름이 겹쳐도 문제가 일어나지 않는다.
- 단점 : 클래스 이름을 인라인에 집어 넣을때
{styles["클래스명"]}과 같은 식으로 넣어야 하기 때문에 상당히 귀찮다.
유틸리티 클래스를 설정하려면 두 개 이상의 클래스를 넣어야 하는데 그럴땐Array.prototype.join()을 이용하거나 템플릿 문자열로 넣어야 한다.
또한 클래스 선택자로만 스타일링할 수 있다.
결과물
