[FIFA Online TMI] 유저 최고 등급 가져오기

🙉 유저 최고 등급 가져오기

유저 닉네임을 입력하면 정보를 가져오고 출력 하는 것 까지 앞서 완성했다.

이제 구단주 고유 식별 ID 를 가지고 다른 정보를 가져와야 한다.

최고 등급, 매치 기록, 거래 기록 중 먼저 최고 기록 정보를 가져오려고 한다.

최고 등급은 매치 종류 별 최고 등급과 등급을 달성했던 날짜를 반환 해준다.

이 정보는 DB 에 굳이 저장 할 필요는 없었기 때문에 프론트단에서 바로 받아와 뿌려주는 형식으로 구성했다.

프론트단에서 바로 OPEN API 를 찌르는 경우 키가 노출 될 위험이 있어 우선 키를 프로퍼티를 이용해 숨겼다.

[FIFA Online TMI] Properties 를 통해 API KEY 숨기고 가져오기

구단주 고유 식별 ID 를 통해 정보를 가져와야하는데 그렇게 되면

프론트단에서 보여지는 URL 이 ~/구단주 고유 식별 ID형식이라 약간 지저분해 보였다.

URL 을 ~/닉네임 으로 맞추기 위해 구단주 고유 식별 ID 를 넣으면 DB 에서 검색 후 닉네임을 반환 해주는 API 도 생성했다.

@GetMapping("/api/v1/user/accessId/{nickname}")
public String requestUserAccessID(@PathVariable String nickname) {
    UserInfoResponseDto userInfoResponseDto = userService.findById(nickname);
    return userInfoResponseDto.getAccessId();
}

resources/static/js/app/user-division.js

var main = {
    init: function () {
        const url = window.location.pathname.split('/');
        const nickname = decodeURIComponent(url[url.length - 1]);

        fetch("/api/v1/key")
            .then(res => res.text())
            .then(key => {
                fetch(`/api/v1/user/accessId/${nickname}`)
                    .then(res => res.text())
                    .then(accessId => {
                        fetch(`https://api.nexon.co.kr/fifaonline4/v1.0/users/${accessId}/maxdivision`, {
                            headers: {
                                Authorization: key
                            }
                        })
                            .then(res => {
                                return res.json();
                            })
                            .then(json => {
                                const firstMatchType = json[0].matchType;
                                const firstDivision = json[0].division;
                                const firstDivisionDate = json[0].achievementDate.split('T')[0];

                                const secondMatchType = json[1].matchType;
                                const secondDivision = json[1].division;
                                const secondDivisionDate = json[1].achievementDate.split('T')[0];
                            })
                    })
            })
    }
}

main.init();

API 키와 구단주 고유 ID 를 통해 닉네임을 가져 온 뒤 두 가지 정보를 가지고 유저 최고 등급 정보를 가져온다.

🐳 메타 데이터

위 사진과 같이 정보를 모두 숫자로 보내준다.

넥슨에서 메타 데이터를 제공하는데 이 데이터를 가지고 매치 종류와 최고 등급을 매핑하면 된다.

그런데 메타 데이터를 요청하니 CORS 에러가 발생한다.

CORS 는 origin 이 다른 곳에서 요청하는 경우 발생하는 에러로 알고있다.

CORS 에러를 해결하는 방법은 서버에서 origin 이 다른 경우에도 정보를 요청할 수 있게 하거나

프록시를 이용해 우회하는 방법이 있다.

help_developers@naver.com 에 문의를 했더니..

풀어주셨다 !

그런데 생각을 해보니 프로그램이 처음 시작 될 때 DB 에 저장하고 불러오는게 더 나을 것 같다는 생각이 들었다..😅

그렇다면 서버단에서 불러와야 한다는 의미인데.. 서버단에서 요청하면 CORS 에러가 발생하지 않는다는 것인가 ?

내일 확인 해봐야겠다..

📬 정리

메타 데이터를 서버단에서 받아오는 방법을 공부하고, DB 에 저장 한 뒤 불러오는 방식으로 개선 해야겠다.

매번 느끼지만 알고나면 금방 할 수 있는 일인데 왜 이렇게 오래걸리나 싶다..

메타 데이터 처리를 해주고 나면 유저 매치 기록, 거래 기록 정보도 가져오게 하면 된다.

Github