[Web]Over-Fetching과 Under-Fetching

Euiyeon Park·2024년 8월 17일

Fetch Over-Fetching REST API TIL Under-Fetching graphql web

Web

목록 보기

4/13

REST API와 GraphQL 포스트를 작성하며 Over-fetching과 Under-fetching도 기록하고자 한다.

🍀Fetch

웹 개발에서 Fetch란 클라이언트(웹 브라우저)가 서버로부터 데이터를 요청하고 받아오는 작업을 의미한다.

특히 JavaScript에서는 fetch() 함수를 사용해 HTTP요청을 보낼 수 있다.

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error fetching data:', error));

자스 까막눈도 fetch()는 종종 구경했다 ..

API 통신에서도 Fetch는 클라이언트가 서버로부터 데이터를 요청하고 가져오는 행위를 의미한다.
예를 들어, 웹 애플리케이션이 REST API나 GraphQL API를 이용해 데이터를 요청하고 응답을 받아오는 행위가 Fetch다.

Over-Fetching과 Under-Fetching은 API 설계와 데이터 요청/응답 처리와 관련된 개념으로 데이터 요청의 효율성 문제를 설명하는 개념이다.

🍀Over-Fetching

Over-Fetching은 클라이언트가 요청한 데이터보다 불필요한 데이터를 서버로부터 더 많이 받는 상황을 의미한다.

예를 들어, RESTful API에서 클라이언트가 GET /users 요청을 보내 users 목록을 받아올 때, 각 user에 대한 모든 정보(이름, 나이, 주소, 전화번호, 이메일)가 반환될 때 클라이언트는 user의 이름과 이메일만 필요할 수 있다.

이때 이름과 이메일을 제외한 나머지 정보는 불필요한 데이터로 간주되어 Over-Fetchig이 발생한 것이다.

Over-Fetching의 문제점

불필요한 데이터까지 전송되므로 네트워크 리소스가 낭비된다.
클라이언트 측에서 불필요한 데이터를 처리해야 하므로 성능 저하가 발생할 수 있다.

🍀Under-Fetching

Under-Fetching은 한 번의 요청으로 필요한 데이터를 충분히 얻지 못하는 상황을 의미한다.
이 경우 클라이언트는 필요한 모든 데이터를 얻기 위해 여러 번의 추가 요청을 보내야 한다.

예를 들어, REST API에서 GET /users 요청을 보내 사용자 목록을 가져오고, 각 사용자의 상세 정보를 얻기 위해 별도로 GET /users/{id}를 보내야 하는 상황이 발생할 수 있다.

이렇게 한 번의 요청으로 사용자 목록과 세부 정보를 모두 받아오지 못해 여러 번의 요청이 필요하다면,
Under-Fetching의 상황이다.

Under-Fetching의 문제점

클라이언트가 원하는 데이터를 얻기 위해 여러 번의 요청을 해야 하므로 응답 시간이 길어질 수 있다.
불필요하게 많은 API 호출이 발생하여 서버 및 네트워크 리소스에 부담을 줄 수 있다.

🍀REST API와 GraphQL

Over-Fetching과 Under-Fetching의 개념은 REST API에 기인한다.

REST API는 각 리소스마다 정해진 엔드포인트를 가지고,
이 엔드포인트에 요청을 보내면 미리 정해진 데이터 구조로 응답을 반환한다.
이때 클라이언트가 요청한 데이터보다 불필요한 데이터가 함께 반환되는 경우가 많다.(Over-Fetching)

또한 REST API는 리소스 기반으로, 복잡한 관계를 가진 데이터를
여러 개의 엔드 포인트에서 가져와야 하는 경우가 발생한다.(Under-Fetching)

그러나 GraphQL은 REST API와 달리 하나의 엔드포인트에서 모든 요청이 처리되고, 유연한 쿼리 작성을 통해 클라이언트는 한 번의 요청에서 여러 종류의 데이터를 받을 수 있고, 어떤 필드를 포함할지 세밀하게 조정하여 필요한 데이터만 요청할 수 있다.

따라서 Over-Fetching과 Under-Fetching 문제를 GraphQL로 해결할 수 있다.

그러나 REST API와 GraphQL의 선택은 사용 목적, 시스템의 복잡성, 성능 요구사항에 따라 다르고
각 방식의 장단점이 있기 때문에 상황에 맞는 적절한 선택이 중요하다.