프로젝트 제작중 생긴 문제점, 고민거리
문제 1. 데이터를 어떻게 가져올까? (해결)
해결방안 : 인벤, 해외 옛날메이플 사이트에서 정보를 크롤링한다 (python)
메이플랜드에 존재하는 몬스터가 100종 아래라, 있는 몬스터의 한해 직접 데이터를 넣고, 그 몬스터의 정보만 크롤링 하고, 그 몬스터들이 주는 아이템만을 크롤링한다.
문제 2. 정렬을 해도 화면이 변하지 않는다. (해결)
해결방안 바보같이 props에 import해온 데이터를 넣어서 변하지 않는것이였다. state변수로 바꿔주니 바로 해결되었다.
문제 3. 1000가지가 넘는 아이템들을 모두 가져오려니 로딩시간에 무리를준다. (반쯤 해결?)
우선은 img에 loading lazy를 뒀다.
추후에 스크롤에따른 로딩을 생각중에 있다.
문제 4. 검색기능 구현 (해결)
search 페이지를 만들고, 검색어를 useParam을 이용해 param으로 받고 filter로 해당 글자를 포함한 몬스터와, 아이템을 표시해준다.
문제 5. object Array의 한글 정렬문제 (해결)
https://velog.io/@geun99/localeCompare-%EB%AC%B8%EB%B2%95 참고
문제 6. 정렬후 클릭한 링크가 잘못된 아이템, 몬스터의 링크로 연결됨 (해결)
이동할 URL을 props의 index 값이 아닌, item.id, monster.id로 변경해주니 해당 아이템, 몬스터의 상세 페이지로 잘 넘어감
문제 7. 몬스터의 드랍아이템에서 아이템으로 가는 링크를 만들고싶다.
let itemFound = item.find((item) => item.name === itemName);우선 전체 아이템리스트에서, 몬스터가 드랍하는 아이템만을 가져온후, 그 아이템의 id를 이용한 링크를 해당 드랍아이템 박스에 줬다.
