프내기

상황 특정 페이지에서 새로고침을 하니 처음보는 에러가 떴다. 두 에러메시지를 직역해보면 "서버에서 렌더링하는 html과 text content가 매치되지 않는다" "hydrating을 하는 중에 에러가 있습니다. 결정이 되지않는 범위 바깥에서 일어났기 떄문에 전체 루트가 클라이언트 렌더링으로 전환됩니다." 이다. text content와 hydrating, entire root라는 단어가 어떤 의미인지 먼저 알아야 할 것 같다. 에러를 구글링했더니 친절하게도 next.js 공식문서에서 이 에러를 다루고 있었다. 분석 쉽게 말하면 서버로부터 pre-rendered되는 리액트 트리와 브라우저에서 first-render 중에 렌더링되는 리액트 트리 사이에 차이가 있어서 해당 에러가 발생했다. 내가 궁금했던 h..

마감된 데이터를 db에서 잘 받아왔는데 화면에서는 내 예상과는 다르게 보여준다 좀더 자세히 써보자면 마감된 게시물 + 필터링을 하게되면 조건에 따라 필터링된 마감된 게시물들이 화면에 정렬되기를 원했다. 그런데 화면에는 작성한 날짜, 글은 제대로 정렬이 되는데 좋아요수와 댓글수는 처음 최신 순서(default 필터링) 그대로 고정되는 것이다. 더 의아한건 진행중인 게시물(마감된 게시물 반대)은 필터링이 잘 된다는것. 차근차근 콘솔을 찍어보며 시작해보자. 1. 콘솔찍어보기 마감 + 최신순 text가 "aaaa", "bbb", "cccc" 게시물인 순서로 작성을 하였고 최신순으로 나열했으니 index 0 - "cccc", index 1 - "bbbb", index 2 - "aaaa" 로 잘 정렬되어있다. 즉,..

filter를 이용해 최신순, 오래된순, 좋아요순으로 불러온 게시물들을 filtering 하는 기능을 구현하다가 위와 같은 에러를 보았다. 확인해보니 오래된순으로 filtering하기 위해 원본데이터.reverse()를 한 부분에서 났다고 한다. 해석해보면 "read only 데이터에 할당할 수 없다."이다. mdn에서 array.reverse() 에 대해서 찾아보았다. reverse() 메소드는 원본배열을 destructing한다. 즉 원본을 바꿔버리는 것이다. 그러니 원본 배열을 mutating 하지않고 reverse시키는 방법을 찾으면 될 것 같다. 깊은복사하는 방법으로 에러를 해결해보자. 해결1 깊은복사 export const filteredPostListState = selector({ key:..