React와 Node.js로 구현한 검색 및 페이징 기능
AI Store에서 AI코딩으로 만들어진 앱을 만나보세요!
지금 바로 방문하기

스마트 콘텐츠 관리: React와 Node.js를 활용한 검색, 필터, 페이징 구현

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

React 및 Node.js를 사용한 웹 애플리케이션 개발자. 중급 수준의 백엔드/프론트엔드 기술을 이해한 개발자.

핵심 요약

  • 백엔드(Node.js)에서 getPostsList 함수를 수정하여 page, rowsPerPage, status, language, startRangeFilter, endRangeFilter, search 등의 쿼리 파라미터를 처리하고, MongoDB의 $gte, $lte 연산자로 날짜 범위 필터링을 구현.
  • 프론트엔드(React)에서 URLSearchParams를 활용해 쿼리 파라미터를 생성하고, Redux를 통해 totalPostsCount, postsPage, postsPerPage, statusFilter 등의 상태를 저장 및 관리.
  • Promise.all()을 사용해 posts.find()posts.countDocuments()를 병렬 처리하여 성능 최적화.

섹션별 세부 요약

1. 백엔드 인프라 설정

  • getPostsList 함수에서 page, rowsPerPagelimit, skip으로 변환하여 페이징 구현.
  • status, language, startRangeFilter, endRangeFilter를 기반으로 MongoDB 쿼리 조건($gte, $lte) 설정.
  • search 문자열로 titlesubTitle에 대한 case-insensitive 검색(RegExp 객체 사용).
  • Promise.all()을 통해 posts.find()posts.countDocuments() 병렬 처리.

2. 프론트엔드 서비스 업데이트

  • posts.services.js에서 URLSearchParams를 사용해 page, rowsPerPage, status, search 등의 쿼리 파라미터를 동적으로 생성.
  • HTTP.get()을 통해 /posts?${queryString} 엔드포인트에 GET 요청 전송.

3. Redux 상태 관리 구현

  • totalPostsCount, postsPage, postsPerPage, statusFilter, languageFilter, startRangeFilter, endRangeFilter, searchFilter 등 새로운 상태 변수 추가.
  • POST_ACTION_TYPES.SET_* 액션 타입을 사용해 필터 및 페이징 상태를 업데이트.

결론

  • 백엔드와 프론트엔드에서 페이징, 검색, 필터 기능을 동기화해 사용자 경험 향상.
  • Redux를 활용한 상태 관리로 필터/페이징 데이터의 일관성 유지.
  • MongoDB의 $gte, $lte 연산자와 Promise.all() 사용으로 성능 최적화 달성.