Day 38 (12/10) – Spring 페이징 처리 및 동적 쿼리

🍃 Spring: 페이징 처리 및 동적 쿼리

데이터가 많아질수록 서버 부하를 줄이기 위해 데이터를 쪼개서 가져오는 페이징(Pagination)과 검색 조건에 따라 SQL이 변하는 동적 쿼리가 핵심

1. 페이징 처리 (Paging)

• Criteria: 페이지 번호(pageNum)와 한 페이지당 보여줄 개수(amount)를 전달하는 객체
• PageDTO: 화면에 페이지 번호(1~10)를 출력하기 위해 시작 번호, 끝 번호, 이전/다음 버튼 유무 등을 계산하는 객체

2. 주요 어노테이션 정리

어노테이션	용도	설명
@RequestMapping	클래스 레벨 매핑	컨트롤러 전체의 기본 URL 경로 설정
@PathVariable	경로 변수	/board/10 처럼 URL 경로에 포함된 값 추출
@RequestParam	쿼리 파라미터	?id=serena 처럼 쿼리 스트링 데이터 추출
@RequiredArgsConstructor	생성자 주입	final 필드에 대한 생성자를 자동 생성하여 의존성 주입(DI)을 간소화
RedirectAttributes	리다이렉트 데이터	리다이렉트 시 데이터를 일회성(addFlashAttribute)으로 전달

 

---

⚛️ React: 접근성(A11y) 및 데이터 정렬 (Frontend)

1. <div>를 버튼처럼 사용하기 (웹 접근성)

단순히 onClick만 넣는 것이 아니라, 키보드 사용자를 배포하는 속성이 필요

<div
  role="button"        // 스크린 리더가 이 요소를 버튼으로 인식함
  tabIndex={0}         // Tab 키를 눌렀을 때 포커스가 이동함
  onClick={handleClick}
  onKeyDown={(e) => e.key === 'Enter' && handleClick()} // 엔터키로 실행 가능
>
  클릭하세요
</div>

2. 배열 정렬 콜백 (Array Sort)

데이터를 조건에 따라 정렬하는 로직

• 문자열 오름차순: (a, b) => (a.title > b.title ? 1 : -1)
• 가격 낮은순 (오름차순): (a, b) => a.price - b.price
• 가격 높은순 (내림차순): (b, a) => b.price - a.price

---

✏️ 실습 메모 및 진행 상황

• Spring: sp1 프로젝트에서 페이징 처리(p.230)와 검색 기능을 포함한 동적 쿼리 구현 완료
• React: 과일농장 쇼핑몰 프로젝트에서 상품 상세 페이지 네비게이션 연결 및 정렬 필터 기능 구현 중
• Git: 기능 단위로 커밋(페이징 처리, 동적 쿼리 구현)하며 형상 관리 수행