LINK : https://94chl.github.io/01RK/

vanilla JS로 컴포넌트식 프로그래밍을 적용한 SPA
게임 내 필요한 데이터를 JSON파일로 정리하여, 웹 서비스를 위한 데이터로 활용
웹 방문 시, index.js->main.js를 통해 컴포넌트들이 렌더링
큰 분류에 따라 상위 컴포넌트를 구분(아이템, 헤더, 지도 등)
상위 컴포넌트 내부에서 해결할 수 없는 기능의 경우, 최상위 컴포넌트인 main.js로 데이터를 올려보내 필요한 처리를 하고 다시 하위 컴포넌트로 보내줌

1. 루트 추천

사용자가 원하는 아이템을 선택하면, DFS로 최단 추천루트들을 탐색

• 이슈 : 서비스 내 버그 발생률 최다
  • 탐색 시간 문제. DFS를 차용한 탓인지, 코드가 비효율적이라 그런지 추천루트가 6지역 이상의 길이를 가진 순간 웹사이트가 일시정지된다.
  • 미리 갈 루트를 선점할 수 있는데, 해당 기능이 선점한 지역이 많고 추천 루트가 복잡하면 정상 작동하지 않음
  • 아이템 정보가 직접 입력한 JSON데이터에 의존하는 탓에 입력 오류가 잦음. 개발사 오픈 API 키를 발급받기는 했지만, 그 전에 이미 기능이 완성되었고, API키를 일정 주기마다 갱신 받아야 되서 자체 정리 JSON을 사용

2. 가방

사용자가 원하는 아이템들을 직접 가방에 담아보면서 실제 게임에서 파밍하는 경험을 제공
루트 추천 기능의 단점을 보완하기 위해서 제작
(루트 추천 기능은 사용자의 인벤토리 여유 공간을 고려하지 않기 때문에, 실제 게임 플레이와 괴리가 발생할 수 있음)
또한, 필요한 아이템 외에도 여분의 아이템을 챙길 필요가 있을 때(팀원 지원, 상대 방해, 아이템 비축 등), 인벤토리 관리하는 법을 연습 가능

• 이슈 : 드래그&드랍 기능
  • 유저 경험적 측면에서 별로라고 판단. 아이템 조합법을 모르는 경우에는 드래그&드랍을 사용하기 어려움.
  • 대안: 가방 내에 조합가능한 아이템이 있다면 하단에 제시하고, 이를 클릭했을 때 자동으로 조합되게 구현