스파르타코딩클럽 내일배움캠프 62일차
오늘 일과 간단 요약
- 프로젝트 (지도 예외처리, 이미지 url 수정)
- 무한스크롤 시도
프로젝트 : 지도 예외처리, 이미지 url 수정
우리가 받아오는 문화재청 api는 이미지가 있는 문화재도 있고 아닌 문화재도 있다.
또 지도 data를 받아올 수 있는 문화재가 있는 반면, 무형 문화재 같은 건 경도 위도가 없어서 지도 data가 전부 0으로 표시되어 카카오맵에 제대로 표시가 되지 않는 문제가 있었다.
그래서 그걸 삼항연산자를 사용해서 해줘야 했는데, 다른 분이 했음에도 불구하고
이미지 없을 때 나오는 default image가 나오지 않았고 지도가 없을 때도 카카오 맵이 나왔었다.
오전에 그래서 내가 이걸 맡아서 했는데 정말 어이없는 일이었다...ㅋㅋㅋㅋㅋ
이미지 src만 주고 require을 주지 않아서 생긴 오류였다.
그리고 위도, 경도가 영인 경우에 적었었는데 그것도 아주 사소한 오류였다.
{long !== '0' ? (
<div
id="map"
style={{ height: 400, width: '100%', borderRadius: '20px' }}
></div>
) : null}
이 부분이었는데 0이 number가 아닌 string이었던 것이다.
그래서 아무리 지도가 없어도 계속 카카오맵 api가 불러와졌던 것이었다..ㅋㅋㅋ
너무 허탈하지 않은가? 이런 사소한 걸 몇 시간이나 고민하다니니...ㅎ
아무튼 이 두가지를 해결했다.
그런데 오후에 메인 페이지에서 이미지 없을 때 default imag가 없을 때 생기는 오류를 해결해야 했는데,
그것 역시 손쉽게 해결되었다.
바로 src 폴더에 이미지를 넣는 것이 아닌 public 폴더에 넣는 것이었다.
어차피 리액트는 index.html 페이지 안에서 전부 해결되기 위해 쓰기 위함이었는데,
src 폴더에 있으니까 이미지를 찾지 못해서 불러와지지 못했던 것이다.
그래서 바로 public 폴더에 이미지 폴더를 이동하고 상대 경로를 변경하니까 메인페이지에서도 바로 적용이 되었다.
이런 걸 놓치다니...역시 꼼꼼하게 공부해야 하는게 맞았다.
폴더 이동에 따라 오전에 require로 이미지 받아왔던 것도 바꿨다.
무한 스크롤 구현
이미지를 한번에 받아오게 하면서 메인 페이지에 api 정보가 너무 많이 불러와져서 무한 스크롤 구현을 해야 했는데,
솔직히...쉬울 거라고 생각했는데 계속 하니까 하나도 쉽지 않았다(?)
정말 오늘 하루종일 걸렸다...그럼에도 아직 못해서 내일까지 해야 한다....
리액트 쿼리에 있는 useInfiniteQuery를 사용해서 무한 스크롤을 구현해야 했는데
원래 useQuery로 받아오는 걸 바꾸니까 flat을 사용할 수 없었고 또 그 이후에도 해결해야 할 것들이 많았다.
이런 저런 시도도 해보고 다른 시도도 해봤는데 아직 해결하지 못했다.
내일 오전까지 해보고 안되면 집단 지성 필요...아니면 튜터님한테 다시 질문하러 가기....
분명 다른 조원분이 쉽다고 했엇는데 나한테는 쉽지 않은가 보다..ㅎ
진짜...프로젝트 끝나면 프로젝트 하면서 적어두었던 키워드를 모두 공부해야겠다. 확실히 프로젝트 하면서 보게 되는 에러를 해결하고 또 쓰게 되는 여러 가지 기능들로 인해 배우는 게 많은 듯 하다.
이걸 다 소화하기에는 지금은 무리고 키워드만 적어두고 다시 공부하는 걸로...ㅠ
솔직히 이거 오늘 안에 해결하고 싶었는데 도저히 머리가 안돌아가서 오늘 안에는 실패...
내일 꼭 해야지...최소한 내일 오전 안에....ㅠ
짧은 일기
분명 개인 공부 시간도 가져야 한다고 생각했는데 사실 프로젝트 하면서 만나는 에러 공부하기도 바쁘다.
그리고 저 애증의 무한 스크롤.....뭔가 알 듯 말 듯 실행이 안되고 있어서 너무 답답하다.
내일 더 맑은 정신으로 보면 괜찮아지려나....ㅎ
뭔가 안 풀리고 있어서 좀 답답한 하루를 보냈다. 아직도 마찬가지고...
TIL도 역대급을 짧네...사실 오늘 배운 새로운 것들도 있어서 적으려고 했는데 그것도 보류.
일단 오늘은 좀 쉬어야겠다. 너무 무한스크롤에 매달려있었더니 도저히 지금은 생각나지 않는다...ㅠㅠ