🎉롤 전적검색 사이트 만들기(3) - 페이지에 데이터를 띄우면서 생긴 문제점

• ✔ Riot API를 인증
• ✔XMLHttpRequest을 이용해서 Riot API 데이터 파싱
• 📝Express를 이용해서 Front에 데이터 넘기기
• 뉴모피즘을 이용하여 사이트 꾸미기

화면에 정보 띄우기

롤 전적검색 사이트 만들기(2)에서 정한 데이터를 테이블로 간략하게 띄우기로 하였다.

1. 소환사 이름 입력하기
2. 소환사 최근전적 테이블로 띄우기

다음 사진은 소환사이름을 GET으로 받아와 정보를 띄운것이다.

문제점

api데이터를 파싱하는 부분에서 데이터를 요청할때마다 한번에 많은 데이터가 전송되어 사이트가 매우매우 느려졌다..
느린이유가 api를 호출할때 한번에 방대한데이터(게임한판에 대한 모든 데이터가) 넘어오기때문이다.
따라서 매번 검색할때마다 api를 호출하는것은 비효율적이라는 것을 알게되었다.

문제가 있는 코드

 Object.keys(Match_keyObject).forEach(e=>{
                let matchDetail2 = httpGet("https://asia.api.riotgames.com/lol/match/v5/matches/"
                                           +Match_keyObject[e]
                                           +"?api_key=RGAPI-5993ad76-dc10-4e28-9773-297194216021");//너무느려

해결방안

DB를 만들어 소환사의 정보를 집어넣어 DB에서 데이터를 긁어오는 방향으로 해결하기로 하였다.

전체적인 로직은 이러하다

1.DB에 암호화된 계정이 존재하는가?
2.존재하지 않는다면 RIOT API로부터 가져와서 저장하기
3.만약 계정 닉네임이 변경되어서 정상적으로 검색이 안될경우, 저장된 암호화된 계정 ID(PK)를 통해서 변경된 닉네임을 파악하여 DB에 update 시키기

추가로 생긴 문제점

언제 DB에 데이터를 받아오는가? 에 대한 이슈가 생겼다,

1.주기적으로 크론탭으로 업데이트를 한다? 

2.매번 검색할때마다 누락된 데이터만 긁어온다? 

1번은 롤 전적은 실시간으로 업데이트가 되기때문에 이상적인 방법이 아니다.

2번 말고는 좋은방안이 생각나지 않지만이것도 검색텀이 길면 길어질수록 긁어올 데이터의 양이 늘어나 검색이 느려지는 이슈가 있어서 탐탁치가 않다.

나는 2번방법을 채택하여 문제를 해결하기로 하였다.

혹시나 좋은 방법이 있으면 댓글로 의견을써주길..🙏(꾸벅)