오늘도 디벨롭✨ 오늘도 디벨롭✨

✅ 오늘의 작업 내역 1. 정렬 메뉴 버튼 active 상태 변경(100%) 👾 (이슈 처리) 새로고침 후에 바로 로고를 클릭하여 "/" 경로로 이동하는 경우 변경된 active 상태가 반영되지 않는 이슈 👾 (이슈 처리) 모바일 뷰에서 sortPath가 없는 경우 셀렉트 박스 label값이 null이 되는 이슈 💡 구현 결과 1. 정렬 메뉴 버튼 active 상태 변경 기존 정렬 메뉴 버튼의 active 상태는 NavigationBar 컴포넌트 내의 상태값을 통해 관리되고 있었다. 이를 쿼리 스트링 값에 따라 actvie 값이 적용될 수 있도록 변경이 필요했다. 처음에는 active 상태를 관리할 상태값을 useSortFilter 커스텀 훅에 넣어야 하나 고민했다가 해당 커스텀 훅이 처리하는 기능의 경..

🙌 리팩토링을 통해 프론트엔드에서 처리되던 정렬 및 필터 기능을 API와 연결하는 작업을 진행했다. 렌더링 된 버튼의 값과 실제 API 요청을 위해 전달해 줘야 했던 Query String의 값이 달라 두 값을 처리해 줘야 했는데, 이 과정에서 많이 헤맸던 기억을 잊지 않고자 블로그에도 짧게 기록을 남겨본다. 📑 요구 사항 간단하게 어떤 기능을 구현해야 했는지 정리해 보자. 1) UI/UX 2) 기능 초기 렌더링시 정렬 '최신순' 버튼만 기본값으로 선택되어 있으며, 정렬 버튼은 단일 선택만 가능하다. 필터 버튼은 각 조건별로 단일 선택만 가능하지만, 세 옵션은 중복 조합이 가능하다. 정렬과 필터 버튼이 눌리면 API GET 요청을 통해 데이터를 받아온다. 3) API 정렬과 필터의 카테고리는 DB코드로 ..

🌱 API로 필터링된 데이터를 받아오는 기능을 구현 중에 쿼리 스트링값을 확인하는 과정에서 이중 배열(중첩 배열)을 마주하게 되었다. 1차원 배열로 어떻게 평탄화를 시킬 수 있을지 찾아보다가 flat()이라는 메서드를 알게 되었다. 덕분에 손쉽게 원하는 형식의 데이터를 얻을 수 있었다. 📑 Array.prototype.flat() ? Array 인스턴스의 flat() 메서드는 모든 하위 배열 요소가 지정된 깊이까지 재귀적으로 연결된 새 배열을 생성합니다. - MDN 사용 방법은 아래와 같은데, 옵션으로 depth를 넣어주면 원하는 깊이만큼 평탄화가 가능하다! flat() flat(depth) ⚠️ flat()은 ECMAScript 2019(ES10)에 새롭게 추가된 메서드로, 현재 Opera Mini와 ..