[2019.04.18] Recase.ly 스프린트를 진행하며

현재 React로 youtobe 화면을 만드는 스프린트를 진행하고 있다.

 

# 작업한 Recase.ly 화면

 

youtube API와 연동해서, 검색창에 검색을 하면 검색 영상과 관련 영상들을 유튜브처럼 화면에 보여주는 작업이다.

 

# 스프린트를 진행하며 감탄한 부분 '실시간 검색 방식'

요즘 넷플릭스 등 서비스의 검색방식은, 검색어를 입력 후 엔터 키나 버튼을 누르는 방식이 아닌, 검색어 입력이 끝나면 바로 검색 내용이 나오도록 하는 방식을 쓴다.

그럼 검색내용을 한 글자 한 글자 쓸 때마다 검색기능을 실행하고 화면에 보여주는 작업을 하게 되지 않나? 라고 생각을 했다.

그래서 처음에는 검색 키워드가, 설정한 글자 수 이상이 되면 그때 검색 기능이 실행이 되도록 하는 것이였다.

하지만 그렇게 되면, 해당 글자 수 이상의 키워드를 쓸 때부터는 역시나 무리가 가게 된다.

그래서 같은 수강생에게 들은 방식이, setTimeout을 이용하는 방식이였다.

 

검색 키워드를 입력할 때마다 실시간 검색 결과 값 가져오는 방법

• 검색입력을 할 때마다 검색 기능 함수를 setTimeout으로 1초 정도로 걸어주는데, 그 전 setTimeout이 있는지 확인한다.
• setTimeout이 있으면 clear 해준 후, 다시 검색기능을 setTimout으로 걸어준다.

이렇게 하면, 검색어를 입력할 때마다 clear하고 다시 setTimeout 걸고를 반복하다가, 마지막에 키워드를 다 치고 변함이 없으면 마지막으로 setTimeout을 걸은 1초 뒤의 검색기능이 실행이 되어, 그제서야 검색기능으로 인해 검색 결과값이 나타나게 된다..

진짜 이 방식을 생각한 사람은 대단한 것 같다..

 

# 진행 중 힘들었던 점

리액트 구조와 유튜브 APi를 연동하는데에 애를 먹었다. API 키를 만드는 것과 API 매개변수로 넘겨주는 방식

그리고 fetch로 서버 요청을 해야하는데....우선 코드에 막 넣어보는 것보다 나는 개발자도구에서 잘 돌아가나 확인을 먼저 해보는 타입이라, fetch API로 youtube 데이터 요청을 해 봤었다. 그때 개발자 도구는 구글 화면에서 이용했었다.

근데 계속 fetch cors 방식이 disable 되었다고 에러 실패가 나오는 것이였다.. 

헬프데스크에 글을 올려봤는데 fetch header에 cors를 enable하도록 설정하면 된다고 해서 설정 방법을 막 찾아보고 전부 시도해 봤었다. 근데 자꾸 실패가 떠서 엄청나게 삽질을 하는 중... 구글 크롬이 아닌 다른 곳에서 개발자 도구로 서버 요청을 하니 아주 잘 된다...-0-..

그냥 따로 Header 요청을 안하고 그냥 됐다... 괜한 시간낭비를 했다...;;

그래도 거의 다 했다. 조금 더 리액트를 자유자재로 다룰 수 있도록 노력해야겠다.