1. 기능의 동작 원리와 순서

페이지네이션

• 클라이언트 요청: 사용자가 제품 목록 페이지를 방문하면, 기본적으로 첫 번째 페이지의 제품이 표시됩니다. 사용자가 페이지 번호를 클릭할 때 새로운 페이지 요청이 발생합니다.
• 쿼리 파라미터 전송: 페이지 요청 시, 프론트엔드는 현재 페이지 번호를 쿼리 파라미터로 서버에 전송합니다. 예를 들어, ?page=2는 두 번째 페이지의 제품을 요청하는 것입니다.
• 서버 처리: 백엔드는 요청된 페이지 번호에 해당하는 제품 목록을 데이터베이스에서 검색합니다. 페이지네이션은 일반적으로 LIMIT과 OFFSET SQL 명령을 사용하여 구현됩니다.
• 응답 반환: 백엔드는 해당 페이지의 제품 목록과 총 제품 수, 총 페이지 수 등의 정보를 프론트엔드에 반환합니다.
• 클라이언트에서 데이터 표시: 프론트엔드는 받은 데이터를 이용하여 사용자에게 해당 페이지의 제품을 표시합니다. 페이지네이션 컨트롤은 사용자가 다른 페이지로 이동할 수 있도록 업데이트됩니다.

무한 스크롤 기능의 동작 원리 및 순서

• 초기 로딩: 사용자가 제품 목록 페이지를 방문할 때, 초기 제품 목록이 로드됩니다. 이 때 일정 수의 제품이 표시되며, 추가로 로드할 수 있는 상태가 준비됩니다.
• 스크롤 이벤트 감지: 사용자가 페이지를 아래로 스크롤하면, 프론트엔드는 사용자의 스크롤 위치를 감지합니다. 이를 위해Intersection Observer API를 사용합니다.
• 추가 데이터 요청: 사용자가 설정된 임계점(예: 페이지 하단)에 도달하면, 프론트엔드는 추가 제품 데이터를 로드하기 위해 백엔드에 요청을 보냅니다. 이 요청은 현재까지 표시된 제품의 수나 페이지 번호를 포함할 수 있습니다.
• 서버 처리 및 응답: 백엔드는 요청 받은 위치에서부터 다음 순서의 제품 데이터를 조회합니다. 이 과정에서 LIMIT과 OFFSET 또는 커서 기반 페이징을 사용하여 요청된 다음 부분의 데이터를 추출합니다.
• 데이터 로딩 및 표시: 백엔드로부터 응답 받은 추가 제품 데이터는 프론트엔드에 의해 현재 목록에 이어서 표시됩니다. 사용자는 페이지를 리로드하거나 추가 작업을 수행할 필요 없이 계속해서 아래로 스크롤하여 더 많은 제품을 볼 수 있습니다.
• 로딩 인디케이터: 추가 데이터 로딩 중에는 사용자에게 로딩 중임을 알리는 인디케이터가 표시됩니다. 이는 사용자에게 데이터가 로딩 중임을 알려주어 사용자 경험을 개선합니다.
• 마지막 데이터 도달 처리: 반환되는 제품 데이터 배열의 index를 통해, 가장 마지막 위치의 데이터를 식별합니다. 이 데이터가 렌더링 되는 부분에 ref를 달아 Intersection Observer API가 존재하지 않는 추가 데이터를 요청하는 일을 방지합니다.

필터링 및 정렬

• 사용자 입력: 사용자가 제품 목록을 필터링하거나 정렬하기 위해 옵션을 선택합니다. 예를 들어, 카테고리, 가격 범위를 선택하거나, 이름순, 가격순 등으로 정렬합니다.
• 쿼리 파라미터 전송: 프론트엔드는 사용자가 선택한 필터 및 정렬 옵션을 쿼리 파라미터로 서버에 전송합니다. 예: ?category=electronics&sort=price_asc.
• 서버 처리: 백엔드는 전달받은 쿼리 파라미터에 따라 필터링 및 정렬 로직을 적용하여 제품 목록을 조회합니다. 필터링은 주어진 조건에 맞는 데이터를 필터링하는 WHERE 조건을, 정렬은 ORDER BY 절을 사용하여 구현합니다.
• 응답 반환: 필터링 및 정렬된 제품 목록과 함께 필요한 추가 정보(총 제품 수, 총 페이지 수 등)가 프론트엔드로 반환됩니다.
• 클라이언트에서 데이터 표시: 프론트엔드는 반환된 데이터를 바탕으로 사용자에게 필터링 및 정렬된 제품 목록을 표시합니다.

2. 코드 파일의 구성

페이지네이션

• ProductListPage.tsx (프론트엔드):

  이 파일은 제품 목록 페이지의 전체 레이아웃과 UI를 관리합니다.
  페이지네이션 컴포넌트가 포함되어 있으며, 사용자의 페이지 번호 클릭 이벤트를 처리합니다.

• Pagination.tsx (프론트엔드):

  페이지 번호, '다음', '이전' 버튼 등을 표시하는 UI 컴포넌트입니다.
  사용자의 페이지 전환 요청을 ProductListPage.tsx로 전달합니다.

• productService.js (백엔드):

  서버 측에서 제품 목록 조회 요청을 처리하고, 페이지네이션을 위해 LIMIT과 OFFSET을 적용하는 로직을 포함합니다.

무한 스크롤

• ProductListPage.tsx (프론트엔드):

  사용자가 스크롤을 아래로 내리면 추가 제품을 로드하는 로직을 포함합니다.
  페이지 번호 대신 스크롤 위치에 따라 서버에 추가 데이터를 요청합니다.

• useInfiniteScroll.ts (프론트엔드):

  무한 스크롤의 상태 관리 및 스크롤 이벤트 처리를 담당하는 커스텀 훅입니다.
  스크롤 위치에 따라 데이터 로딩 요청을 트리거합니다.

필터링 및 정렬

• FilterSection.tsx (프론트엔드):

  사용자가 필터링 옵션(예: 카테고리, 가격 범위)을 선택할 수 있는 UI 컴포넌트입니다.
  선택된 필터 옵션을 ProductListPage.tsx에 전달합니다.

• SortingBar.tsx (프론트엔드):

  정렬 옵션(예: 가격순, 인기순)을 선택할 수 있는 UI 컴포넌트입니다.
  선택된 정렬 기준을 ProductListPage.tsx에 전달합니다.

• productService.js (백엔드):

  필터링 및 정렬 기준에 따라 데이터베이스에서 제품을 조회하는 로직을 포함합니다.
  사용자의 선택에 따라 WHERE 조건과 ORDER BY 절을 동적으로 조정합니다.

3-1. 페이지네이션, 무한 스크롤, 필터링 및 정렬 기능 기능의 특징 - 프론트엔드

성능 최적화 (무한 스크롤):

무한 스크롤 구현 시, 성능 최적화에 주의해야 합니다. 불필요한 요청이 발생하지 않도록 전체 데이터의 길이를 식별하여 자원의 낭비를 방지하였습니다. 또한 메모리 누수가 없도록 컴포넌트의 마운트 및 언마운트를 적절히 처리하였습니다.

사용자 경험 (페이지네이션 및 무한 스크롤):

페이지네이션과 무한 스크롤 각각의 장단점을 고려하여, 사용자 경험에 가장 적합한 방법을 선택해야 합니다. 예를 들어, 무한 스크롤은 연속적인 콘텐츠 탐색에 유리하지만, 특정 페이지로의 직접 이동에는 적합하지 않습니다. 페이지네이션은 무한 스크롤과 반대되는 특징을 가지고 있어 서로 적합한 환경에서 사용한다면 최적의 사용자 경험을 제공할 수 있습니다.

3-2. 페이지네이션, 무한 스크롤, 필터링 및 정렬 기능 기능의 특징 - 백엔드

쿼리 효율성 (동적 쿼리):

데이터베이스 쿼리는 성능에 큰 영향을 미칩니다. 제품의 필터링 및 정렬 조회는 백엔드 코드의 비효율적인 구현을 야기할 수 있습니다. 이를 방지하기 위해 동적으로 쿼리를 생성하는 로직을 구현하여 백엔드 코드를 최적화 하였습니다.

보안 고려 (필터링 및 정렬):

사용자 입력을 기반으로 쿼리를 생성할 때는 SQL 인젝션과 같은 보안 취약점에 주의해야 합니다. 입력값 검증, Prepared Statements과 Parameterized Queries 기법의 사용으로 SQL 인젝션을 방지하였습니다.

4. 취약점과 개선 사항

프론트엔드

• 리소스 관리 (무한 스크롤):

무한 스크롤은 많은 양의 데이터를 로드하게 되면 성능 문제를 일으킬 수 있습니다. 데이터를 로드할 때 메모리 관리에 주의하고, 불필요한 데이터는 적절히 해제하는 방법을 고려해야 합니다.

• 사용자 인터페이스 개선 (페이지네이션, 필터링, 정렬):

사용자가 현재 위치, 선택한 필터 옵션, 정렬 상태를 쉽게 인식할 수 있도록 UI를 개선할 필요가 있습니다. 예를 들어, 현재 페이지 번호를 강조 표시하거나, 활성화된 필터 옵션을 더 명확하게 보여주는 것이 좋습니다.

• 에러 핸들링 및 사용자 피드백 (모든 기능):

서버 요청 실패나 오류 발생 시, 사용자에게 적절한 피드백을 제공해야 합니다. 네트워크 오류 또는 데이터 로드 실패에 대한 명확한 메시지를 표시하고, 재시도 옵션을 제공하는 것이 좋습니다.

백엔드

• 쿼리 최적화 (모든 기능):

페이지네이션, 필터링 및 정렬 쿼리는 성능에 큰 영향을 미치므로, 이들을 최적화해야 합니다. 데이터베이스 인덱스 활용, 비용이 높은 조건문 최적화 등을 고려해야 합니다.

• 보안 강화 (필터링 및 정렬):

사용자 입력을 기반으로 데이터베이스 쿼리를 생성할 때 SQL 인젝션과 같은 보안 위험을 고려해야 합니다. 사용자 입력은 항상 검증하고, 적절한 쿼리 파라미터화를 사용해야 합니다.

• 스케일링 및 리소스 관리 (무한 스크롤):

무한 스크롤을 사용할 때 데이터 로드가 증가하므로 서버의 부하를 관리해야 합니다. 효율적인 데이터 로딩 방법, 캐싱 전략 등을 통해 서버 부하를 줄이고 응답 시간을 단축시킬 필요가 있습니다.