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

안녕하세요. 오늘은 웹서버 구현하다가 진빠진 이야기에 대해서 이야기를 정말 길게 길게 할듯하네요.

이번에 구현했던 것들

웹서버구현과 leagueId를 통한 리그명 받아 오기에 대해서 설명해보도록 하겠습니다.

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

일단 제일 간단한 leagueId를 통한 리그명 받아오기를 설명을 조금 해보자면, 현재는 노출되진 않지만, 자신이 속한 리그의 이름을 알려주는 기능입니다 .

뭐 아칼리의 정복자들이나, 라이즈의 수확자들이라던가.. 그런류의 리그명을 띄우는 것입니다. 

 

하는 방식은 간단합니다 .

/lol/league/v4/leagues/{leagueId}에서 leagueId의 값을 넣어주면 그에 맞는 리그명과 리그에 속한 인원들이 모두 나옵니다. 

어차피 거기서 제가 필요한 건 리그명이기때문에 get을 통해서 name을 통해 그 이름을 긁어서 가져오면됩니다.

 

밑에서 구현 결과값으로 보여드리도록 하겠습니다.

 

그리고 결과값의 레이아웃은 링크와 최대한 비슷한 모습으로 따라 해보고 싶긴한데 과연 가능 할지 좀 의문이긴합니다..

 

오오.. 아름다워..

https://www.youtube.com/watch?v=USdyp2ypRNI

이분은 C#으로 riot api를 가지고 구현하는 거였습니다. 디자인이 꽤 괜찮아 보여서 저는 이 디자인을 참고로 잡고 만들어 보려고 했습니다. 물론 결과물은 안 같을 수 있습니다 ㅎㅎ;; 디자인력이 예상 보다 떨어져서..;;

 

그리고 가장 대망의 웹서버 개설에 대해서 이야기를 해보도록 하겠습니다.. 

너무 고생했던 정말 오래걸려서 해결한 그런 이야기입니다.

 

현재 저는 KT 기가 wifi를 사용중이고 개발중인 노트북은 OSX를 사용중인 맥북입니다. 비슷한 증상이 있는 분들은 제 글이 어느정도 도움이 되었으면 좋겠네요. 

 

일단, 저는 이 프로젝트를 친구들한테 보여주고는 싶은데 막상 그 친구들에게 보여줄려면 예상보단 이걸 뭐 이클립스를 깔고 git을 한다음에 뭐어쩌구저쩌구... 이런 작업을 도저히 못시킬 것 같았습니다. 

 

(애들아 그냥 대충 이클립스도 깔고 톰켓도 깔고, 이 프로젝트를 봐주겠니...? 하지만 어림도 없지ㅠㅠㅠㅠ)

 

그래서 가장 좋은 방법은 그냥 제가 웹서버를 오픈하는 방법이 가장 좋다고 생각했습니다. 그 방법으로 "포트포워딩"을 이용해서 오픈하는 방식을 사용하면 제 서버를 덜컥하고 열수 있다고 들었습니다. 

 

아아 친구들아 드디어 보여줄수 있단다..(http://jjalbang.today/jj22b.jpg)

하지만 제 예상을 엄청 빗겨나가는 일이 생기는데... 포트 포워딩을 해줘도 포트가 열리지 않아서 웹서버를 들어갈 수 없는 상황이 생겨버립니다. 

 

https://www.yougetsignal.com/tools/open-ports/

Open Port Check Tool - Test Port Forwarding on Your Router

여기서 내 포트는 왜 열리지 않을까 고민을 엄청 했지만 뭐 딱히 해결되지는 않았습니다.

 

결국 뭐가문제인가 했더니 KT wifi의 LAN을 받아오는 다른 허브가 있다는게 가장 큰 문제였습니다.  즉, 공유기 - 허브 - 외부에서 Ip을 받아오는 방식인거였죠.  결국, 공유기가 외부에서 연결된 랜선으로 바로 연결되면 큰 상관은 없지만,  저처럼 공유기- 허브 - 외부 순이라면 제가 해결한 방식을 사용해보기를 추천드립니다. 

 

즉, 이미 허브에서 한번 포트가 꼬여있는 상태에서 공유기에서 포트 포워딩을 해줘도 사실상 안먹히는 거였습니다. 포트가 꼬여있다고 이야기하는 것보다는 그냥 외부에서 IP를 받고 허브에서 다시 IP를 섞어주고, 공유기에서도 DHCP를 통해서 그냥 랜덤으로 섞어서 IP를 하다보니까 아마 추측하건데.... port를 고정해줘도 ip값이 고정이 안되니까 정확하게 못찾는게 아닌가 싶긴한데 뇌피셜이니 그냥 흘려 보십쇼.

 

결과적으로는 이런 경우 kt-공유기를 브릿지 모드 선택해서 설정하니 해결은 됬습니다. 조금 아쉬운 점은 kt 공유기의 내부 설정을 조작을 못해서 좀 아쉬워서 방법을 알고는 있는데 그 방식으로는 해결이 잘안되서 일단은 해결하면 나중에 올려드리도록 하겠습니다. 

 

 그런 방식으로 웹서버를 열어서 제 핸드폰으로 연결이 되는 걸 확인했습니다. 

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

 

뭐 비슷하게 만들어보고 싶었는데... ㅠ 그렇게 잘 구현이 깔끔하게 잘 안되서 너무 아쉽네요... 레이아웃은 좀 더 많이 신경 써야겠습니다. 

 

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

아직은 잘 생각안나지만, layout에 신경을 좀 더 많이 쓸것 같습니다.