Youtube 검색 API 개발

[pursue503]

👋 작업 내용

1. Youtube API 를 이용하여 유튜브 음악을 가져오는 API 를 개발합니다

⚙️ 진행 방식

프론트 검색 -> 서버 -> Youtube API -> 서버 -> 프론트 구조의 유튜브 API 검색 기능을 만듭니다.

🎇 기대 결과

클라와 웹프론트에서 유튜브 API 검색기능을 사용 할 수 있습니다.

[chaenabi]

기본적인 기능이 구현되었습니다.

미해결 버그: "아이유"로 검색했으나 관계가 없어보이는 결과가 반환되는 중

아래는 결과값 중 일부입니다.

 "items": [
    {
      "kind": "youtube#searchResult",
      "etag": "e_LKj16BzL1ckkiIP7yEcPdym-I",
      "id": {
        "kind": "youtube#video",
        "videoId": "uygat_FRXsA"
      },
      "snippet": {
        "publishedAt": "2020-06-22T13:30:08Z",
        "channelId": "UCblJz9-miMsPvy2WRrNvPpg",
        "title": "여름에 신기좋은 편한신발을 찾아서 ✨운동화, 샌들, 슬립온, 뮬 꼼꼼리뷰 및 추천 ・ 제일 편한 신발은 과연? 신발하울 FASHION HAUL",
        "description": "안녕하세요 여러분~! 드디어 기다리고 기다리시던 #신발하울 을 들고 왔습니다 제가 한 신발 한 신발 꼼꼼하게 신어보고 테스트해보느라 시간이 조금 오래 걸린 점 ...",
        "thumbnails": {
          "default": {
            "url": "https://i.ytimg.com/vi/uygat_FRXsA/default.jpg",
            "width": 120,
            "height": 90
          },
          "medium": {
            "url": "https://i.ytimg.com/vi/uygat_FRXsA/mqdefault.jpg",
            "width": 320,
            "height": 180
          },
          "high": {
            "url": "https://i.ytimg.com/vi/uygat_FRXsA/hqdefault.jpg",
            "width": 480,
            "height": 360
          }
        },
        "channelTitle": "spacegirl우주쏘녀",
        "liveBroadcastContent": "none",
        "publishTime": "2020-06-22T13:30:08Z"
      }
    },
        {
      "kind": "youtube#searchResult",
      "etag": "bLfXbhXChgs--9UOHcX2P6iw27U",
      "id": {
        "kind": "youtube#video",
        "videoId": "-D2yneCWtQ0"
      },
      "snippet": {
        "publishedAt": "2021-01-18T09:25:17Z",
        "channelId": "UC8lMONnuq-AtYgs2siqRm8w",
        "title": "흥이다 깨져버릴 때~쯤 들으세요!",
        "description": "패드종결자 #디오니소스 프로잭트 파일 다운 ...",
        "thumbnails": {
          "default": {
            "url": "https://i.ytimg.com/vi/-D2yneCWtQ0/default.jpg",
            "width": 120,
            "height": 90
          },
          "medium": {
            "url": "https://i.ytimg.com/vi/-D2yneCWtQ0/mqdefault.jpg",
            "width": 320,
            "height": 180
          },
          "high": {
            "url": "https://i.ytimg.com/vi/-D2yneCWtQ0/hqdefault.jpg",
            "width": 480,
            "height": 360
          }
        },
        "channelTitle": "패드종결자 Pad Terminator",
        "liveBroadcastContent": "none",
        "publishTime": "2021-01-18T09:25:17Z"
      }
    },

[chaenabi]

"아이유"에 대한 올바른 결과값은 다음과 같아야합니다.

"items": [
    {
      "kind": "youtube#searchResult",
      "etag": "vhMasPfem-zxhEhY3Alu5S73PCo",
      "id": {
        "kind": "youtube#video",
        "videoId": "hQrEGhOjgUg"
      },
      "snippet": {
        "publishedAt": "2021-03-25T22:00:13Z",
        "channelId": "UCvX0LQOt29-C1jTgVJnnW3w",
        "title": "[PLAYLIST] 아이유노래모음",
        "description": "[PLAYLIST] 아이유노래모음 저는 광고를 붙이지 않습니다. 유튜브 정책상 중간 광고가 나타날 수 있습니다. 모든 광고수익은 저작권자(해당가수)에게 돌아갑니다.",
        "thumbnails": {
          "default": {
            "url": "https://i.ytimg.com/vi/hQrEGhOjgUg/default.jpg",
            "width": 120,
            "height": 90
          },
          "medium": {
            "url": "https://i.ytimg.com/vi/hQrEGhOjgUg/mqdefault.jpg",
            "width": 320,
            "height": 180
          },
          "high": {
            "url": "https://i.ytimg.com/vi/hQrEGhOjgUg/hqdefault.jpg",
            "width": 480,
            "height": 360
          }
        },
        "channelTitle": "나 들으려고 올리는 채널",
        "liveBroadcastContent": "none",
        "publishTime": "2021-03-25T22:00:13Z"
      }
    },

[chaenabi]

UriUtils.encode(keyword, "UTF-8") 메서드는
javascript의 encodeURI와 같은 역할을 하지 못하는 것 같으므로
해당 부분을 다른 로직으로 변경함으로서 버그해결을 시도해야 할 것 같습니다.

[chaenabi]

private String encodeURIComponent(String keyword) {
    return URLEncoder.encode(keyword, StandardCharsets.UTF_8)
            .replaceAll("\\+", "%20")
            .replaceAll("\\%21", "!")
            .replaceAll("\\%27", "'")
            .replaceAll("\\%28", "(")
            .replaceAll("\\%29", ")")
            .replaceAll("\\%7E", "~");
 }

변경 후에도 같은 증상이 발생되는 것으로 보아
UriUtils.encode 메서드와 같은 역할을 함을 유추가능, 버그는 여전히 고쳐지지 않았음

[chaenabi]

버그 수정완료.
인코딩하지 않는 것이 해결책이었습니다.

[pursue503]

Youtube 이슈 해결완료. 최적화 시작