Spring으로 OP.GG 클론 코딩해보기 -2

안녕하세요. 오늘 이 프로젝트 진행사항을 모두 다 적는걸 목표로 하겠습니다. ㅋㅋ

 

이번에 구현했던 것들

• 랭크정보, 랭크 승패, 랭크와 티어 표시.
• 랭크문양은 url로 따올수없어서 img파일 추가
• logger 한글 파일 오류때문에 안된거 maven dependency로 추가함.

어떤 식으로 개발했는지에 대해서...

처음에는 loggger 한글 파일 오류 때문에 안되는 것에 대해서 설명해보자면, 처음에는 logger.info가 콘솔창에 아무짓도 안하길래. 나는 이게 큰 문제가 없다고 생각했는데

 

원래는 이렇게 떠야지 정상이었던 것.

 

이게 원래는 안고쳐도 잘 작동 되었지만, 무슨 오류였는지 logger에 파싱을 못해주는 것 때문에 앱실행 자체가 안되버려서 해결 방안을 찾으려 노력했습니다.

 

<dependency>
		    <groupId>xerces</groupId>
		    <artifactId>xercesImpl</artifactId>
		    <version>2.9.1</version>
</dependency>		

 

Maven에 이 xerces를 넣어주면 logger.Info가 안나오는 문제를 해결해줍니다. 특히, 안나오는 이유가 뭐였냐면 상위 폴더중에 한글이 섞인 폴더가 하나라도 있으면 무조건 파싱오류로 info가 나오지 않는 문제가 생깁니다. 그때 이것을 통해서 해결하면 뚝딱스

 

두번째  랭크문양 업데이트

8년 넘게 롤 했지만 저의 티어는.. 읍읍..

랭크 문양은 데이터 드래곤에서 받아와서 해결을 못해서 이 파일을 직접 받아서 하는 방식을 택했습니다.

 

이때 발생한 문제들이 상당히 많습니다.. Spring은 리소스 파일을 정확하게 어디에 저장해야할지 몰라서 그걸 저장할 위치를 찾아서 넣는 게 어려웠는데

 

webapp폴더에 img폴더를 만들고  엠블럼폴더를 다 때려 넣었는데, 문제는 img태그에서는 이 폴더를 못찾아서 자꾸 alt값을 뱉는게 문제 였습니다.

 

https://12soso12.tistory.com/14

Spring MVC image 경로 설정

이걸 통해서 해결했는데, 대략적으로 요약하자면, Spring MVC는 Resource를 지정경로로 찾아주는 방식을 택하는데, servelt-context.xml에서 엄한 곳으로 자꾸 폴더 위치를 잡아주니까 그 엄한폴더 위치에서는 못찾아서 alt값을 내뱉는 식으로 한다는 것입니다.

 

물론, 이게 완벽한 해법은 아닌것 같기도 합니다. 왜냐면 이 방법으로 했을때 바로 안되는 경우도 있었거든요. 근데 한 10번정도 다른 방법 찾고 다시 해보니까 된건 함정. 왜 이런지 원..;; (웹프로그래밍 특: 처음에 한 방법이 안되서 다른 방법찾다가 다시 와서 해보면 됨.)

 

3번째는 랭크정보, 랭크 승패, 랭크와 티어 표시.

 

아래 코드는 추가 된 부분만 가져왔습니다. 랭크정보를 가져오는 부분을 절사했습니다.

try{            
			String urlstr = "https://kr.api.riotgames.com/lol/league/v4/entries/by-summoner/"+
					temp.getId()		+"?api_key="+API_KEY;
			URL url = new URL(urlstr);
			HttpURLConnection urlconnection = (HttpURLConnection) url.openConnection();
			urlconnection.setRequestMethod("GET");
			br = new BufferedReader(new InputStreamReader(urlconnection.getInputStream(),"UTF-8")); // 여기에 문자열을 받아와라.
			String result = "";
			String line;
			while((line = br.readLine()) != null) { // 그 받아온 문자열을 계속 br에서 줄단위로 받고 출력하겠다.
				result = result + line;
			}
			JsonParser jsonParser = new JsonParser();
			JsonArray arr = (JsonArray) jsonParser.parse(result);
			JsonObject k =  (JsonObject) arr.get(0);
			int wins = k.get("wins").getAsInt();
			int losses = k.get("losses").getAsInt();
			String rank = k.get("rank").getAsString();
			String tier = k.get("tier").getAsString();
			String queueType = k.get("queueType").getAsString();
			int leaguePoints = k.get("leaguePoints").getAsInt();
			String leagueId = k.get("leagueId").getAsString();
			leagueInfo = new LeagueEntrydto(queueType, wins, losses, leagueId, rank,tier, leaguePoints);
		}catch(Exception e){
			System.out.println(e.getMessage());
		}
		model.addAttribute("summoner", temp);			model.addAttribute("summoner", temp);
		model.addAttribute("imgURL", "http://ddragon.leagueoflegends.com/cdn/9.16.1/img/profileicon/"+temp.getProfileIconId()+".png");			model.addAttribute("profileImgURL", "http://ddragon.leagueoflegends.com/cdn/9.16.1/img/profileicon/"+temp.getProfileIconId()+".png");
		model.addAttribute("startTime", longTimeparse);
		model.addAttribute("leagueInfo", leagueInfo);
		model.addAttribute("tierImgURL", "img/emblems/Emblem_"+leagueInfo.getTier()+".png");
		return "result";			return "result";
	}		}

 

이 기능을 추가하기위해서는 league.v4의 API를 사용해야하므로, 그 특정 URL을 통해서 정보를 가져오는 방식을 취해야합니다. 

/lol/league/v4/entries/by-summoner/{encryptedSummonerId} 를 통해서 값을 가져오면 되서 그 값을 가져왔습니다.

 

문제는 2번의 랭크 문양에서 또 터지게 되는데요. 왜 또 이럴까? ㅎㅎ;

랭크 문양의 파일명은 Emblem_Bronze.png였는데 API에서 가져오는 랭크 정보는 BRONZE로 받아 왔던 것. 즉, 파일명을 바꾸든 가져온 BRONZE를 앞글자만 빼고 다 소문자로 바꾸든 둘중하나를 택해야했는데, 귀찮아서 모든 파일을 대문자로 바꿔줍니다.

 

물론 이정보도 객체화해서 보내줘야지 여러정보를 일일히 넣어줄필요가 없으므로, leagueInfo의 DTO를 만들어주고 객체를 만들어서 model에 태워서 보내줍니다.

 

이런 구현은 어떤 결과값을 내보여줄까?

이런 방식으로 구현됩니다. 

 

추가적으로 뭘 더 구현할 생각인지?

부스트스트랩이용해서 CSS 개선 그래도 웹사이트를 만들었을때는 적어도 볼만하게는 만들어야할겁니당.