[이것저것] 토이프로젝트 유튜브 API 적용기 (검색 기능 구현)

현재 My SQL과 Next.js를 활용한 웹사이트를 제작하고 있다

 

회원가입, 로그인, 게시판 기능에 그치기 아쉬워서

컨셉을 만들고 글쓰기 기능에 영상 검색하고 추가할 수 있는

기능을 구현하기로 결심했다

 

음악 관련 웹사이트라 spotify API를 사용하려 하다가

google 로그인 구현하기 위해 프로젝트를 생성해둔 겸

youtube API를 사용하기로 했다

(추후 음악 재생 앱을 만들게 된다면 spotify API를 사용하는 걸로..!)

 

새로운 것을 사용하려면 공식문서와 친해져야 하기에

열심히 읽고 postman 날려보며 적용했다

 

 

1. 프로젝트 생성하기

 

https://developers.google.com/youtube/v3/getting-started?hl=ko

YouTube Data API 개요  |  Google for Developers

 

위 공식문서의 절차에 따라 프로젝트를 생성하고 API키를 발급받는다

 

 

2. 검색 데이터 가져오기

 

참조 링크

https://developers.google.com/youtube/v3/docs/search/list?hl=ko

Search: list  |  YouTube Data API  |  Google for Developers

 

우측 창 아래에 Show Code 클릭하면 아래 창이 뜬다

 

https://youtube.googleapis.com/youtube/v3/search?part=snippet&maxResults="출력할 최대 개수"&q="검색할데이터"&key=[발급받은 API키]

위 주소를 사용하면 되고 기타 필요한 옵션은 추가하면 된다

 

 

Postman으로 데이터를 확인해보니 정상적으로 동작되는 걸 확인하였다

사심 가득 담은 데이터

 

확인은 했으니 본격적으로 출력하기 위해 axios를 활용하여 데이터를 불러왔다

 

검색 데이터를 입력하는 값에 useState 변수를 담아줘서 검색할 수 있도록 만들었다

콘솔로 확인하니 데이터가 정상적으로 출력되었다

최대 개수를 25개로 해놔서 25개의 데이터가 출력되었다

 

💡 마주했던 문제들과 배운 것

 

1. env 키 에러

next.js에서 .env 파일에서 환경 변수를 사용할 시

해당 환경 변수를 클라이언트 측에서 접근할 수 있게 하려면

변수 이름 앞에 NEXT_PUBLIC_ 을 붙여야 하는데 

그냥 YOUTUBE_APIKEY로 작성해서 키를 읽지 못했다

 

next.config.js 파일에서

env 파일에 사용한 변수명을 넣어주니 간단하게 해결되었다

 

/** @type {import('next').NextConfig} */

const nextConfig = {

env:{

 

YOUTUBE_APIKEY: process.env.YOUTUBE_APIKEY,

},

 

}

module.exports = nextConfig

 

 

2. HTML 문자열 파싱

검색한 데이터를 변수로 담아 데이터 출력에 성공했지만 문제가 생겼다

바로 아래 사진과 같이 중간 중간에 ' 등 HTML 엔터티 코드들이 섞여있는 채로 

데이터가 출력되었다

 

 

 

아래 사진처럼 콘솔창에도 에러가 떴다

 

다행히 검색 기능을 구현하며 디코딩했던 경험이 있어 

간단히 해결할 수 있었다

const Data = new DOMParser().parseFromString(e.snippet.title, 'text/html').body.textContent;

 

 

위 코드로 HTML 문자열을 파싱하여 제목 데이터를 출력하니 깔끔하게 출력되었다

 

3. 타입 지정

문제는 아니었지만  이전에는 타입스크립트가 아직 미숙한 편이라

타입 지정하면서 일일이 지정해주었다

이번에 API데이터의 구조가 좀 복잡해서 일일이 지정하주는 게 비효율적이라는 생각이 들었다

좀 더 효율적인 방법이 있을까 하다 Record 타입을 처음 적용해보았다

 

여러 특정한 속성을 가진 객체를 정의하는 데 편리하게 사용할 수 있을 것 같다!

 

 

결과물

짠!

 

꾸미니 그럴 듯 해진 모습이다

이 출력된 데이터 정보를 My SQL 필드에 추가하고 글 상세페이지에 추가하면 될 것 같다

 

기능적인 부분은 거의 할 것이 없지만

상세페이지에 출력할 때 UI가 가장 고민이다🧐

 

열심히 고민해봐야겠다

 

 

 

끝!