개발냥발/TS (Trouble Shooting)⚡ 2

비제어 컴포넌트에서 검색어 상태 관리하기

[ 문제 발생 배경 ]프로젝트에서 글로벌 내비게이션 바(GnB)의 검색 기능을 구현하던 중, 페이지를 이동해도 검색바에 입력된 검색어가 유지되는 문제가 발생했다. 이는 사용자 경험 측면에서 바람직하지 않았기 때문에, 페이지 이동 시 검색어를 초기화하여 사용자에게 일관된 검색 환경을 제공하고자 했다.GnB에서의 검색바 컴포넌트에서는 react-hook-form을 사용하여 폼 상태를 관리하고 있었다. 때문에 GnB의 검색바인 GnbSearch 컴포넌트는 비제어 컴포넌트로 구현되어 있었고, 그래서 페이지 이동 후에도 입력된 검색어가 유지되는 문제가 발생했다.  [ 해결 과정 ] 문제를 해결하기 위해 멘토님께 조언을 구한 결과, 상태 관리 로직을 개선하기로 결정했다. 우선 검색어 상태를 zustand로 관리하여..

어댑터(Adapter) 패턴 적용하여 백엔드 데이터 프론트에서 조정하기~

최근에 고급 프로젝트를 진행하면서, 백엔드 응답 데이터를 내가 만든 컴포넌트에 맞춰서 변경해야하는 순간이 찾아왔다...!!해당 순간이 찾아온 계기는.,,,.,,.프로젝트의 홈 화면에서 사용자 리뷰어 랭킹을 보여주는 기능을 구현하던 중, 몇 가지 최적화 문제와 코드 중복 문제를 발견하게 되면서부터이다.  [ 문제 발생 배경 ]이 문제는 다음과 같은 배경에서 발생했다.1. 백엔드 응답 데이터 형식과 컴포넌트 데이터 형식의 불일치 :    - 현재 백엔드에서 전달되는 랭킹 데이터는 아래와 같이 특정한 형식으로 제공된다. [ { "id": 120, "nickname": "kuromiiiiiiiiiiiiiiii", "descri..