모든 운동이 10개만 표시되는 오류

Juyeon Lee·2024년 11월 17일
0

REACT 리액트

목록 보기
65/65

1. 문제 상황

운동 검색 기능을 구현하던 중, 모든 운동을 보여주는 'all' 섹션과 특정 신체 부위별 운동 섹션 모두가 단 10개의 운동만 표시되는 현상을 발견했습니다.

2. 문제 분석

콘솔 로그를 통해 API 응답이 항상 10개로 제한되어 있다는 것을 확인했습니다.

console.log('All exercises count:', exercisesData.length); // 결과: 10
console.log('Filtered exercises count:', exercisesData.length); // 결과: 10

3. 원인 파악

API 요청 URL을 자세히 살펴보니, 기본 요청 URL에 limit 파라미터가 10으로 설정되어 있었습니다:

// 기존 URL
'https://exercisedb.p.rapidapi.com/exercises?limit=10&offset=0'

4. 해결 방법

API URL에 limit 파라미터를 수정하여 더 많은 운동 데이터를 가져오도록 변경했습니다:
(basic plan을 쓰고 있기 때문에 일단 30으로 제한함)

// 수정된 URL
'https://exercisedb.p.rapidapi.com/exercises?limit=30'

5. 결과

  • 모든 운동을 보여주는 'all' 섹션에서 30개 운동이 표시됨
  • 신체 부위별 운동 섹션에서도 해당 부위의 모든 운동이 표시됨
  • 페이지네이션이 정상적으로 작동하여 사용자가 모든 운동을 탐색할 수 있게 됨

🌟 배운 점

  1. API 요청 시 기본 파라미터 값을 항상 확인해야 함
  2. 데이터가 예상과 다르게 제한되어 있을 때, API 문서와 요청 URL의 파라미터를 꼼꼼히 체크해야 함
  3. 문제 해결을 위해 단계적으로 접근하고 콘솔 로그를 활용하여 디버깅하는 것의 중요성

💡 Tip

RapidAPI를 사용할 때는 API 엔드포인트의 기본 파라미터 값을 항상 확인하고, 필요한 경우 limit와 같은 파라미터를 적절히 조정하여 원하는 데이터를 모두 가져올 수 있도록 해야 합니다.

0개의 댓글