dev_in 개발 블로그

1. 문제 상황검색 기능 리팩토링 이후, 개발 환경에서 다음과 같은 에러가 발생했습니다.Hydration failed because the server rendered HTML didn't match the client Next.js에서는 이를 Recoverable Error로 표시하며, 클라이언트에서 다시 렌더링을 시도하고 있었습니다. 2. 에러의 의미구글링 및 AI와 상의 결과, 이 에러는 단순한 렌더링 문제가 아니었습니다.서버가 만든 HTML과 클라이언트가 처음 렌더링한 결과가 다르다는 의미였습니다. 3. 실제 발생 상황로그를 보면 다음과 같은 차이가 있었습니다.+ - 즉 서버는 를 렌더하고 클라이언트는 를 렌더하는 상황입니다. 동일한 컴포넌트인데 결과가 달라진 것입니다. 4. 원인 분석핵심 원..

1. 리팩토링의 필요성 기존 검색 기능은 다음과 같은 UX를 보였습니다. 검색 후 결과 페이지 이동 -> 정상상세 페이지 -> 뒤로가기 -> 검색 결과 유지 ✅하지만 새로고침 시-> 다시 검색이 실행되면서 마치 다시 검색하는 것 같은 UI가 먼저 보이는 문제 발생사용자 입장에서 생각해본다면,"방금 본 검색 결과인데 왜 다시 검색하지??"분명 이런 생각이 들 것 같았습니다. 이는 분명 사용감의 저하로 이어질 것 같았고 리팩토링이 필요하다고 생각했습니다. 2. 추정되는 문제점 처음에는 페이지 구조 문제를 의심했습니다.현재 검색 결과 페이지가 별도로 존재하는 것은 아니기에 검색 결과를 별도 페이지로 분리해야 하는가?메인 페이지에서 상태로 관리하는 구조가 문제인가? 문제가 없는 뒤로가기는 문제가 없기 때문에 ..