[HTML/CSS/Javascript] no-more-algorithm 회고

이번에는 아주아주아주아주아주아주아주아주아주 간단한 프로젝트를 해보았다. 이건 별로 뭐 어디다 말하기도 부끄러운 그런 프로젝트이지만 매우 개인적인 이유로 시작한 토이 프로젝트이다.

 

나는 쉴때 유튜브를 많이 본다. 그렇기에 다양한 영상 시청 덕분에 알고리즘은 아주 재미있는 영상들을 추천영상으로 띄워주고는 한다. 그런데 코딩을 하기 위해 유튜브를 볼때 유튜브의 추천 영상은 너무나도 짜증이난다. 막 이 영상을 보라고 유혹하는 듯하다. 이외에도 단순히 내가 얻고자 하는 지식이외에도 영상에 집중하지 못하게 하는 요소들이 너무 많다라고 생각했다. 그래서 코딩 공부를 할때는 영상에만 집중할 수 있고 이외의 부차적인 정보들을 닫을 수 있는 기능의 extension을 제작해봐야겠다 라고 생각했다.

 

방관 케이틀린 눌러야겠지....?

 

일단 크롬 익스텐션을 만들기 위해서는 해당 사이트를 참고해야한다.

https://developer.chrome.com/docs/extensions/reference/manifest?hl=en#register-a-content-script

매니페스트 파일 형식  |  Manifest  |  Chrome for Developers

간단한 작업 이외에 여러 복잡한 것을 구현할려면 해당 링크를 반드시 참고해야한다.

 

사실 뭐 기본적인 세팅 이런거는 다른 곳에서 자세히 적혀있으니 구글링을 통해서 방문하신분들은 죄송하지만 다른 곳을 참고해주시기 바라겠습니다 ㅎㅎㅎㅎ.

https://80000coding.oopy.io/34a2083b-c159-4524-b5f2-750d3ab4fbba

https://www.youtube.com/watch?v=QJSLtK2bY_A

 

 

어려웠던 점

어려웠던 점은 바로 유튜브의 태그들을 열심히 파악해야 했던 것, 캐싱 문제, onSubmit문제였다.

 

1. 유튜브 태그 파악

일단은 유튜브 홈페이지에 들어가고 html을 살펴보면 눈에 보이는 모든 element들은 <ytd-app> 태그안에 몽땅 들어가 있는 것을 알 수 있었다. 그리고 더 까보면 .content div에 4가지 컨테이너들이 있다. 첫번째는 로고, 검색input이 있는 #masthead-container가 있다. 두번째로는 <tp-yt-app-drawer>으로 왼쪽 버거 아이콘을 눌렀을 때 슬라이드로 들어오는 drawer를 관리하는 태그가 있다. 세번째로는 <ytd-mini-guide-renderer>으로 왼쪽 drawer의 미니 버전의 element들이 있고 마지막으로 <ytd-page-manger>태그가 있고 해당 태그는 비디오를 관리하는 태그인 <ytd-page-manger> 안에는 또 3개의 태그가 있는데 <ytd-browse>는 유튜브 첫페이지에서 보여주는 비디오들, <ytd-watch-flexy>는 비디오를 클릭하고 재생되는 해당 비디오(+해당 비디오 관련 정보), 마지막으로 <ytd-search>는 검색했을 때 나오는 비디오를 포함하는 태그들이다. 

 

2. 캐싱 문제

사실 캐싱 문제일거라고 추정만 되고 100프로 확신되는건 아니다. 어쨌든 extension에 등록한 자바스크립트 파일은 리액트가 아니기 때문에 처음 렌더링이 되고 다시 처음화면으로 돌아거나 할때 값들을 초기화하고 이런것들에 문제가 있었다. 또한 유튜브 영상을 유튜브 첫 페이지에서 들어가서 검색하고 고르는 것이 아닌 직접 url로 들어갈때에도 문제가 되는 부분들이 있었다.

 

근데 위의 문제말고 코드를 수정하고 수정한 내용이 즉시 화면에 적용이 되지도 않을 뿐더라 유뷰브 사이트에서 관리하는 캐시 때문에 아예 유튜브 화면을 끄지 않으면 코드가 제대로 작동하지 않았다. 정리하자면 

코드 수정 -> extension 새로고침 -> 사이트 새 탭에서 접속

위 과정을 반복해야 한다. 나는 그것도 모르고 코드를 수정하고 왜 반영이 안되지??? 라는 의문과 시간을 많이 소비했음....

 

3. onSubmit

당연히 input검색창이 form태그로 감싸져 있어서 addEventlistener으로 submit일때 특정 function을 수행하게 하였는데 동작하지 않았다. addEventlistener는 하나의 태그에 여러개가 존재하도 됨으로 사용하여도 됐는데 정작 실행이 되지 않았다.

 

대신에 다른 방법으로 해결해보려고 하였다. 그때 찾았던 것이 yt-page-data-updated였다. window에다가 addEventListener으로 "yt-page-data-updated"을 넣어주면 url이 변경될때마다 function을 수행할 수 있었다. 

 

완성

아주 깔끔해진 대문을 볼 수 있다.

-깔끔-

 

초기화면에서는 추천 영상을 모두 안보이게 하고, 왼쪽의 drawer는 default로 안보이게 하고 햄버거 버튼을 클릭하면 나타나게 아예 없애지는 안았다. 중앙에 아무 quote를 띄웠고 사실 머리속에 구상하고 있는 최종 완성 형태는 구글의 첫 검색 화면처럼 큰 로고와 검색 input만 나오게 하는 디자인이다.

그 다음음 영상을 검색하는 화면은 이전과 같고 영상을 시청하려고 누르면 오른쪽의 추천 영상 목록들을 안보이게 처리했다. 댓글이나 영상 정보들은 그대로 남겨져있고 챕터보기도 기존처럼 볼 수 있다.

 

마무리

일단은 유튜브라는 초대기업의 코드들을 간접적으로 경험할 수 있는 기회였다. 물론 쌩으로 html코드를 만들진 않았겠지만 이게 좋은 개발자가 만든 코드라는 것을 크게 느낄 수 있다. 대부분 눈에 보이는 코드들은 유튜브만의 커스텀 태그("yt"으로 시작하는 태그)였지만 그럼에도 불구하고 한눈에 이해하기 쉽게 작성되있었고 나 또한 차근차근 하나씩 태그와 html구조를 보면서 크게 어렵지 않게 이해할 수 있었다. 나는 html 클래스이름을 정하는 것도 뒤죽박죽으로 정하고 있는데 유튜브에서의 커스텀 태그들을 보면서 나도 좀 보기 좋은 코드들을 만들어야 겠다는 생각을 했다.

 

일단은 개인적으로 사용할 프로그램이기에 여기서 멈추지만 나중에 디자인적으로 그리고 기능적으로도 더욱 보완해서 크롬 웹스토어에도 등록해봐야겠다.