블로그 로직변경하기_ 버그발견... (스테픈 2km)

기존에 제작한 블로그의 로직 일부 수정하기

엄청 간단한데요

steemit api에 원래 원하는 값만큼 데이터를 보내주는데

임의의 값을 125라고 지정해둬서

데이터를 최근 기준 125개만 가져오게 되는데요

이렇게 만들면 문제가 예전 데이터는 받아 볼 수가 없다는 점입니다.

이부분을 수정해야겠네요

왜 이렇게 만들었냐라고 하자면

서버 상태관리를 next.js에 기본제공하는 Fecth 의 캐싱기능을 사용해서 처리했는데

next에서는 캐싱가능 용량이 최대 2mb여서

어쩔수없이 갯수를 제한했었습니다만..

이제 react-query를 사용해서 처리했기 때문에 이 문제가 해결되었으니 다시 갯수를 올려도 되겠네요

리엑트 쿼리는 조사결과 2mb같은 제한은 없는것으로 확인했는데요

아무튼 이부분 처리하고

커밋했습니다만..

이런 또다시 css를 네트워크 요청을 안하는 문제가 발생했네요

ㄷㄷㄷ

원인을 좀 알고싶은데

일단 몇번 수정해본 경험으로는

css 파일을 일부 수정해서 커밋하면

다시 정상동작합니다.

물론 근본적인 해결책이 아니라서

대체 무슨 이유인지를 찾고있는데요

발견하게되면 글로 남기려고 합니다.

몇번 재 배포하니 해결되었습니다

구글에서 css 관련 정보를 받아오는것인데

데이터 요청부터 안해서 발생하는 문제인듯한데요

@import 구문으로 작성한 제 css 모듈에서

문제가 발생한것으로 보입니다..

재배포를 몇번 하다보니 해결되긴 했는데

제가 생각하기에 확실한 해결방법은

해당 디자인파일을 전부 svg로 교체해서

css 파일 로딩이 안되어 깨지는 문제를 근본적으로 차단하느게 조금더 나을것 같습니다.

fetch데이터가 들어오기는 하는데 이상하게 들어오나보네요

로직을 조금 변경해야할듯 합니ㅏㄷ.

일단 상태를 보기위해 로직을 들어가보니

배열의 구조가 조금 변경된것 같네요

받아오는 데이터의 양이 많아져서 그런지

100개마다 배열로 쪼개져서 들어오는게 아닌가 싶습니다

flat()메서드를 사용해서 평탄화 작업을 한번 추가하도록 변경했는데요

로직변경후 잘 작동하는지 봐야겠습니다.

몇번 테스트 해본 결과

flat이 평탄화 문제가 아닌것 같군요

데이터가 200개 정도여도 잘 들어옵니다

화면에 표시도 잘 되구요

몇번 테스트 해본 결과

배열이 220개 까지는 잘 되는데

220개가 넘는 파일이 들어오면 화면에서 표시가 안되네요

225개를 받아오니 화면에 표시를 못하네요

음 저로서는 처음인 버그인데

원인을 유추하자면

한 번에 많은 양의 데이터를 메모리에 로드할 때,

데이터가 크거나 컴포넌트가 무거운 경우 메모리 문제로 인해 브라우저가 제대로 렌더링하지 못하는게 아닌가 싶습니다

왜냐하면 콘솔에 데이터가 들어오는건 확인이 되기 때문인데요

그리고 올만에 큰돌님의 영상보고 이력서좀 더 다듬어야겠네요

유익한 내용이군요

이력서는 매번 다듬어도 또 다듬어야 하는게.. 참..

스테픈 2km완료