스마트 콘텐츠 관리: 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
,rowsPerPage
를limit
,skip
으로 변환하여 페이징 구현.status
,language
,startRangeFilter
,endRangeFilter
를 기반으로 MongoDB 쿼리 조건($gte
,$lte
) 설정.search
문자열로title
및subTitle
에 대한 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()
사용으로 성능 최적화 달성.