이번 포스팅에서는 OP.GG 클론 프로젝트의 웹서버 구현과 leagueId를 통한 리그명 가져오기 기능에 대해 설명하겠습니다. 이 기능은 사용자가 속한 리그의 이름을 확인할 수 있도록 도와줍니다.
H2 리그명 가져오기 기능 구현
H3 leagueId를 통한 리그명 조회
리그명을 가져오는 과정은 매우 간단합니다. Riot API에서 제공하는 /lol/league/v4/leagues/{leagueId} 경로를 사용하여 해당 리그의 정보를 요청하면 됩니다. 이때, 필요한 정보는 리그명뿐입니다. API 호출에서 리그명은 name 필드를 통해 가져올 수 있습니다.
H3 결과값 레이아웃
결과값의 레이아웃은 OP.GG와 유사하게 디자인하고자 했습니다. C#으로 Riot API를 사용하는 다른 개발자의 디자인을 참고하여 구현할 예정입니다. 그러나 디자인 실력이 부족해 원하는 만큼의 결과물을 얻지 못할까 걱정입니다.
H2 웹서버 개설 과정
H3 포트 포워딩으로 웹서버 오픈
프로젝트를 친구들에게 보여주기 위해 웹서버를 개설하기로 결정했습니다. 포트 포워딩을 활용하여 서버를 오픈하는 방법을 선택했습니다. 이를 통해 외부에서 접속할 수 있도록 설정할 수 있습니다.
H3 문제 해결 과정
포트 포워딩을 설정했음에도 불구하고 웹서버에 접근할 수 없는 문제가 발생했습니다. 이 문제의 원인은 KT 기가 WiFi와 연결된 허브에 있었습니다. 공유기와 허브를 통해 IP가 변형되어 포트 포워딩이 작동하지 않았던 것입니다. 결국 브릿지 모드를 설정하여 문제를 해결하였습니다.
| 단계 | 설명 |
|---|---|
| 1. 포트 포워딩 설정 | 공유기에서 포트 포워딩을 설정합니다. |
| 2. 허브 구조 확인 | 공유기와 허브의 연결 구조를 점검합니다. |
| 3. 브릿지 모드 설정 | KT 공유기를 브릿지 모드로 설정합니다. |
| 4. 서버 확인 | 핸드폰으로 웹서버에 접속하여 정상 작동을 확인합니다. |
H2 향후 계획
H3 추가 구현 사항
현재로서는 레이아웃 개선에 주력할 예정입니다. 디자인을 좀 더 신경 써서 결과물을 더욱 매력적으로 만들고자 합니다. 이후에는 기능을 확장할 방법에 대해 고민할 계획입니다.
자주 묻는 질문
질문1: 리그명을 어떻게 가져오나요?
리그명은 Riot API의 특정 엔드포인트를 호출하여 leagueId를 통해 가져올 수 있습니다.
질문2: 웹서버를 어떻게 열 수 있나요?
웹서버는 포트 포워딩을 통해 외부에서 접근 가능하도록 설정할 수 있습니다.
질문3: 포트가 열리지 않는 문제는 어떻게 해결하나요?
KT 기가 WiFi와 같은 환경에서 허브와 공유기 설정을 확인하고, 브릿지 모드를 통해 문제를 해결할 수 있습니다.
질문4: 디자인을 어떻게 개선할 계획인가요?
디자인은 참조한 사례를 바탕으로 개선할 예정이며, 사용자 경험을 고려하여 최적화할 계획입니다.
질문5: 추가 기능은 무엇인가요?
현재는 레이아웃 개선에 집중하고 있으며, 추후 기능 추가를 고려하고 있습니다.
이전 글: 이지웰 복지몰 주소 총정리