React + Youtube API Youtube Clone 코딩

프로젝트 완성본

PC 화면

 

아이폰 XR 화면

아이패드 화면

사용한 기술 스택

• React
• Youtube API
• postCSS
• gh-pages

프로젝트 설명

간단히 youtube API 만을 가지고 메인화면에서는 가장 인기있는 한국지역영상 25개를 가져와 display하고

검색을 통해 최대 50개의 영상을 가져와서 영상 리스트를 update 합니다.

 

모바일,태블릿,pc 환경에 맞춰 반응형 디자인을 해보았습니다.

유튜브처럼 많은 목록을 나열하기에는 grid 레이아웃이 간편하고 좋았고,

상단에 navBar, 영상을 선택했을시 iframe player 이 추가되는데, 이때는 크게 3개의 컴포넌트를 flex로 적용하여서

flex-direction을 바꾸어주며 모바일에 대응했습니다.

 

상단의 navBar 와 iframe player는 fixed 속성을 주어 영상을 시청하면서도, 다른 목록을탐색할수있도록 적용해놓았습니다.

이렇게 직접 API를 사용해서 영상을보니 광고가없습니다(유일한 장점).

 

폴더구조

저는 style을 postCSS module을 적용하였기때문에, 폴더구조를 components에 각 컴포넌트들 폴더를 한번더만들고, 그폴더 안에 컴포넌트js파일과 module.css 파일을 함께 배치하였습니다.

 

Youtube class

service/youtube.js

index.js

각 컴포넌트 내에서 ajax통신을 하지않고, Youtube API를 따로 만들어 index.js에서 최초에 한번만 생성한후 props로 넘겨주었습니다.

 

OOP방식은 코드수정이 쉽고, 깔끔하고, 직관적인 코딩을 할수있었던것 같습니다.

 

최적화

videoList.js

최초 인기동영상 25개, 검색했을시 나열되는 50개의 영상을 담는 컴포넌트입니다.

이 컴포넌트는 사이트를 최초방문시 & 검색할 때 단순 video 리스트만 받아오기 때문에 memo를 적용하여 렌더링을 최적화 해줄 수 있었습니다.

 

searchBar.js

검색바도 마찬가지로 memo를 적용해줄 수 있어야했는데, app.js에서 ajax 통신을 했어야했는데, 별생각없이 코딩하다보니

memo를 적용해도 동영상을 클릭해서 player를 킬때도 렌더링이됩니다..

3의 props는 변하는게 없는게 분명한데, 아마도 useCallback을 어딘가에 적용해줘야할 것으로 의심됩니다.(다음프로젝트에서는 제대로 최적화해보겠습니다)

 

React에 만족스러운 부분

{selectedVideo && <Detail video={selectedVideo} />}

개인적으로 리액트를 사용하면서 편하다고 느끼는부분은 당연 state관리를 통한 자동 렌더링입니다.

그중에서도 특히 위 코드와 같이 조건부를 걸어 보여주고,보여주지 않는 부분들이 && 연산과, 3항연산자를 사용하는 것이 아주 편리합니다.

 

이전에 외주로 관리자페이지를 jquery만을 사용해서 만들었던 적이있는데, 그당시 가장 애먹었던 부분이 렌더링 부분이었습니다.

변수하나 바꾼다고 알아서바꿔주지않으니, element를 계속 다시 조작해야해서 힘들었었는데, 이런 수고로움이 없어지는 것만으로도 행복한 코딩이었습니다.

 

아쉬운 부분

searchBar.module.css

postCSS의 모듈을 사용했는데, 개념만 알고 처음 사용해본터라 사진과같은 실수를 범하였습니다.

무조건 클래스명으로 해야 컴포넌트에서 독립적으로 동작하는 것인데, element 단위로 style을 적용하니

전역으로 적용되는 버그를 발견하였습니다.(클래스명 지어주기 귀찮아하다보니 일어난 현상입니다)

 

배포와 보안

항상 배포할때마다 걱정했던것이 API key 숨기기였습니다.

dotenv를 사용해도 github에만 숨겨지지 결국, 개발자툴에서 network를 보면 고스란히 API가 찍힐수 밖에 없는것이 걱정이었습니다.

 

잠시 맛을 보았던 NextJS에서는 rewrite 기능을 통해서 숨길수있었던 것이 편리했습니다.

물론 react에서도 이미 방안이있겠지만, 차근차근 배워나가고싶어서 서두르진 않고있습니다.

 

가장 확실한 방법은 Google API key의 경우 도메인으로 restrict 를 제공하기 때문에 이를 이용했습니다.

 

제가 express로 직접 서버를 돌리고, 배포해본 경험이 많은데, 사실 제대로된 api제한을 걸어두지 않았습니다. 그래도 졸업전에 mbti테스트와 같은 간단한 serverless 서비스를 배포해보고싶은 야망이있는데, front에 모든게 담기는 만큼 보안에도 신경을 많이쓰고, 공부할 예정입니다.

 

프로젝트를 마치고

이프로젝트를 마치면서 확실히 1년전에 YoutubeAPI문서를 읽는 제 눈과, 현재의 눈은 많이 성장했다는 것을 느꼈습니다.

아는만큼 보인다는 말처럼, js기초를 다지고, web front부터 server까지 full stack으로 공부하다보니, 배경지식이 많이생겼고 더불어 문서읽는법, 남의코드읽는법이 많이 늘었습니다.

 

 이제는 1년전 ,2년전 자료를 보고도 현재와 달라진점을 캐치해내어 제것으로 다시 코딩할 수 있고, 그토록 싫었던 내코드 다시보기(리팩토링) 작업을 견디는 인내력도 생겼습니다.

 

그리고 프로젝트를 할때마다 느끼는것이지만 styling 영역이 개인적으로는 8할을 차지한다고 말할 만큼 중요하다고 생각하는데, 많은 방식중 어떤것이 효율적인지 아직 감을 잡지못하겠습니다.

 

확실한건 이제 전역css파일하나를 가지고 코딩하는것은 좋지않다는 것을 느꼈습니다. 그많은 클래스명,Id명을 작명하는것은 지옥구렁텅이에 빠지는 느낌입니다.

 

css module 방식이 그런면에서는 정말 정말 편리했습니다.