포락갤 음방 주소: https://plug.dj/postrock-gall

지금 음방에서 유튜브 검색이 안되는건 해본 사람은 알겠지만 사이트 자체에서 검색키가 막힌거라 바로 해결할 수 있는 방법은 없음. 다만 키가 막혔다는 사실 외에는 이상이 없는 상태이기 때문에 구글에서 각자 유튜브 API 키를 받아서 사이트에 적용시키면 문제는 바로 해결 됨

이 글에서 소개할건 구글 API 키를 받는 방법과 얻어낸 API 키를 크롬 개발자도구를 이용하여 반영구적으로 사이트에 적용시키는 방법임. 다만 방법이 좀 번거로울 수 있기 때문에 감안해야함. 우선 구글 계정이랑 구글 크롬이 필요함

1. 구글에서 유튜브 API 받기

https://console.developers.google.com/apis?supportedpurview=project

- 구글 로그인하고 위의 사이트에 들어가서 우상단의 '프로젝트 만들기' 클릭

- 이름이랑 그룹은 아무렇게나 하고 '만들기'

- 팝업 된 'API 라이브러리로 이동' 혹은 상단의 '+ API 및 서비스 사용 설정' 클릭

- 밑으로 내리면 'Youtube Data API V3' 클릭

- '사용자 인증 정보 만들기' 클릭

- 생기는 항목에 각각 'Youtube Data API V3', '웹브라우저(자바스크립트)', '공개 데이터' 토글하고 '어떤 사용자 정보가 필요한가요?' 클릭

이러면 'AIzaSyBv~' 이런 식으로 API 키가 나오는데 이 키는 복사해서 저장해두셈

2. plug.dj 사이트에 API 키 적용시키기

사이트에 들어가기 앞서 컴퓨터 아무 위치에 폴더를 하나 만들어두셈, 이후에 로컬폴더로 사용 될 것임

- 크롬 브라우저로 https://plug.dj/postrock-gall 에 들어가서 F12를 누르면 개발자 도구가 나옴

- 개발자 도구 최상단의 'Sources' 탭 클릭

- 밑에 새로 생긴 탭에 보면 'Page' 라고 적힌 탭이 있는데 오른쪽에 '>>' 누르고 'Overrides' 클릭

- 밑에 있는 '+ Select folder for overrides' 누르고 아까 만들어놨던 폴더 선택, 크롬 위에 뜨는 경고창에서 '허용' 클릭

- 탭 밑의 'Enable local overrides' 체크

- 다시 'Page' 탭 누르고 밑에 있는 항목들 중에 'cdn-prod.plug.dj' - '_/static' - 'js' 폴더 하위에 있는 'app.xxxxxxxx.js' 항목을 우클릭하고 'Save for overrides' 클릭

- 'Overrides' 탭으로 돌아가서 '(미리 만들어둔 폴더명)' 밑에 생성된 'cdn-prod.plug.dj/_/static/js' 폴더 내의 'app.xxxxxxxx.js' 를 클릭해서 불러옴

- 중앙에 표시된 소스에디터의 좌하단을 보면 '{}' 이렇게 생긴게 있는데 이걸 클릭

- 에디터를 쭉 내려서 줄 7613에 있는 'gapi && gapi.client ? (gapi.client.setApiKey("AIza~")' 를 찾으셈

- ' ~(gapi.client.setApiKey(" ") ' 저 사이 칸에 원래 있던 키를 지우고 아까 복사해둔 API 키를 붙여넣기

- 에디터 위에 있는 app.xxxxxxxx.js 항목을 우클릭한 후 'Save as...' 클릭

- 저장은 안해도 상관없고 취소 누른 뒤 개발자 도구 끄지 않은 상태에서 F5

이제 모든 과정이 완료되었고 바로 유튜브 검색을 사용할 수 있음. 앞으로 plug.dj 페이지를 불러올때마다 F12를 누르고 F5로 새로고침 하면 유튜브 검색이 정상적으로 되는 것을 확인할 수 있음

끝!

+추가) 가끔씩 자바스크립트 api 주소가 바뀌는 현상이 있기 때문에 갑자기 검색이 안될 시 이름이 바뀐 페이지를 찾아서 동일한 키와 동일한 방법으로 반복하면 됨.. 이것까지 해결할 다른 방법이 있는진 모르겠음