Javascript 로 Twitch API 접근하여 Stream 정보 얻기 - v3 과 v5 버전의 차이

이전에 [Javascript 로 Twitch API 접근하여 Stream 정보 얻기] 라는 글을 포스팅한 적이 있었는데 당시 Twitch API v3 을 이용하며 적은 것이었다.

최근 한 통의 메일을 받았는데, 이 메일에는 Twitch API 의 버전이 v3 에서 v5 로 변경되어서(사실 바뀐지는 꽤 되었다) 구버전인 v3 은 더 이상 지원하지 않을 예정이라 몇 가지를 수정해주어야 한다는 내용이 담겨있었다. 다음의 링크로 가면 이에 대한 내용을 볼 수 있다. [v3 to v5 Migration Guide - Twitch Developers]

Twitch API v5 의 변경점 - Login name 대신 User ID 를 사용해야 함

대표적인 변경점으로, v5 에서는 Live stream 의 정보를 가져올 때 더이상 {Login name} 을 사용할 수 없다. 대신 숫자 형태의 {User ID} 라는 것을 사용해야 한다.

참고로 Login name 이란 말 그대로 유저가 로그인 할 때 사용하는 이름을 말하며 채널 주소에서 twitch.tv/{login-name} 형태로 표시되는 것과 동일하다. 예를 들어, Login name이 twitchpresents 인 유저의 User ID 는 149747285 이다.

Login name 은 유저가 직접 변경이 가능하므로, Login name 을 바꾼 스트리머의 스트림 정보를 기존 Login name 을 이용해서 가져오려다 실패하는 경우가 간혹 있다. 이와 같은 이유로 바뀌지 않는 고유 값인 User ID 를 이용하려는 것 같은데, 왜 기존의 방식을 유지하지 않고 아예 없애버렸는지는 의문이다.

여하튼 기존처럼 Login name 을 이용해서 스트림 정보를 가져오려면 아래와 같은 흐름으로 해야한다.

1. Login name 을 이용, API 호출을 통해 User ID 를 가져오기
2. (옵션) {Login-name : User-ID} 등의 형태로 쿠키 등에 캐시해두기
3. (캐시된 or API 를 이용하여 가져온) User ID 를 이용, API 를 통해 스트림 정보를 가져오기
   

스트림 정보 가져오기 - v3 과 v5의 차이 예제

예전에 v3 을 사용할 때는 아래와 같이 하면 스트림 정보를 가져올 수 있었다.

$.ajax({
    url:"https://api.twitch.tv/kraken/streams?offset=0&limit=100&channel=twitchpresents,twitchrivals",
    type: "GET",
    dataType:"json",
    headers: {
        "Client-ID": "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"
    },
})
    .done(function(channel){
        console.log(channel);
    })
    .fail(function(error){
        console.log(error);
    });

이제는 v5 를 사용하므로 아래와 같이 해야 스트림 정보를 가져올 수 있다.

$.ajax({
    url:"https://api.twitch.tv/kraken/streams/?offset=0&limit=100&channel=149747285,197886470",
    type: "GET",
    dataType:"json",
    headers: {
        "Accept": "application/vnd.twitchtv.v5+json",
        "Client-ID": "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"
    },
})
    .done(function(channel){
        console.log(channel);
    })
    .fail(function(error){
        console.log(error);
    });

바뀐 부분은 channel 뒤에 Login name 을 적었던 것에서 이제는 User ID 를 적어야 한다는 것, 그리고 header 에 "Accept": "application/vnd.twitchtv.v5+json" 을 추가해야 한다는 것이다.

User ID 가져오기 예제

User ID 는 아래와 같은 방법으로 가져올 수 있다.

$.ajax({
        url:"https://api.twitch.tv/kraken/users?login=twitchpresents,twitchrivals",
        type: "GET",
        dataType:"json",
        headers: {
            "Accept": "application/vnd.twitchtv.v5+json",
            "Client-ID": "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"
        },
    })
    .done(function(channel){
        console.log(channel);
        var users = channel.users;
        if(users.length !== 0){
            for(var i=0; i<users.length; i++){
                console.log("users[name]", users[i].name, "users[i]._id", users[i]._id);
            }
        }
    })
    .fail(function(error){
        console.log(error);
    });

참고로 Login name 에 해당하는 유저가 존재하지 않는 경우, 해당 Login name 에 해당하는 User ID 를 아무 값으로도 응답하지 않는다. 예를 들어 10개 아이디를 콤마로 구분하여 API 를 호출하였더라도, 그 중 5개가 존재하지 않는 유저라면 users  배열의 사이즈는 5 이다.

그 외 - User ID를 캐시하는 경우 발생 가능한 문제점

Login name - User ID 를 캐시해두어 사용하면 API 호출을 줄일 수 있을거라는 생각이 들었다. Login name 이 바뀌는 경우가 간혹 존재하기는 하지만, 캐시된 Login name 으로 호출하더라도 어차피 User ID 는 동일하므로 결국 내가 정보를 가져오려고 의도한 스트리머의 스트림 정보를 가져오게 될 것이다.

그리고 정말 간혹 다른 예외들, 예를들면 A라는 유저가 사용하던 Login name 을 변경하고 B라는 유저가 A유저가 기존에 쓰던 Login name 을 다시 사용하는데, B유저의 스트림 정보를 이 Login name 을 이용해 가져오고 싶은 경우가 있을 수도 있겠지만 주기적으로 새롭게 캐시한다면 이러한 예외도 방지할 수 있을 것이다.

그리고 코드를 작성 후 실제 발생한 예외 중에는, 스트림 정보를 가져오기 전 Login name 에 해당하는 User ID 가 존재하지 않으면 API 를 통해 User ID 를 가져오도록 했는데 앞에서 설명한 것처럼 존재하지 않는 유저에 대한 User ID 정보는 아예 응답에 없으므로 캐시되지가 않아서, 매번 스트림 정보를 가져올 때마다 존재하지 않는 Login name 에 대한 User ID 를 가져오려는 시도를 하는 경우가 있었다. 따라서 응답에 존재하지 않는 Login name - User ID 가 있는지 다시 체크 후 필터링하여 해결했다.