0622

결국 노트북을 켜버린 www

ossca

posting page는 경로가 쿼리스트링(posting?tab=04, posting?tab=05)인데
feedback은 그냥 단일 경로(feedback/design, feedback/etc)라
useSearchParmas를 사용하면 하이드레이션 미스매치 오류가 발생함.

하이드레이션 미스매치 오류가 발생하는 이유는 Next.js App Router에서 useSearchParams를 사용할 때 서버 렌더링 시점에는 쿼리스트링 정보가 없는 상태로 렌더링되고, 클라이언트에서는 쿼리스트링이 포함된 상태로 렌더링되어 서버와 클라이언트 간 불일치가 생기기 때문임.

그래서 맨 처음엔 포스팅 페이지일때만 useSearchParmas를 사용해서 쿼리스트링을 인식하게 할까 했지만 리액트 훅은 조건부로 호출할 수 없음.

그래서 AppHeader 전체를 suspense로 감싸서
로딩 중일때는 드롭다운 버튼이 있는 posting과 feedback은 그냥 빈 껍데기만 반환하고 나머지 로고나 디벨로퍼는 정적 단일 경로 페이지니까 여기만 Link 컴포넌트로 감싸서 이동할 수 있게함.

으로 하려다가 이러면 사용자에게 일관된 경험을 제공할 수 없으니까 posting은 쿼리스트링으로 하니까 그냥 단일 posting 페이지 반환하게 하고 feedback은 feedback/design으로 이동할 수 있게 Link 컴포넌트로 다 감싸줌.

그냥 AppDropdownButton도 다 불러와졌을 때 렌더링을 할까 하다가 이러면 suspense를 사용한 의미가 무색해진다 생각돼서..

백준: 연길이의 이상형

그냥 문제 이름이 재밌어 보여서 고름
if문으로 하나하나 조건 걸어서 쓸 수도 있겠지만
해시맵 활용해서 key랑 value를 반대되는 쌍으로 만든 다음에 반복문 돌아서 key에 해당하는 value 출력해주면 됨
예를 들어 key가 E라면 딕셔너리에 I를 저장했으니 I를 출력 이런식으로.

맺음말

일단 지금 정신 없어서 오스카 관련은 다시 고민해봐야 될 것 같음
짐 다시 정리해야지... 내일부터 25일까진 til 포스팅을 잠시 멈춥니다.............
관련 글