[개발생각] 앱에서 한페이지에서 API를 많이 호출할때 튜닝

프로젝트의 막바지(?)에 프론트와 서버간의 API호출에 대한 튜닝을 한참했다. 여기서 아이디어가 하나 떠올랐다!

 

프론트와 서버간의 API호출을 튜닝을 진행할때 진행한 내용은 아래와 같다.

 

1) API를 중복하여 호출하는 부분은 줄인다.

2) A API와 B API의 응답이 포함관계에 있는지 확인하고,포함하는 API 하나만 호출하도록 줄인다.

3) A,B,C API를 하나의 묶음 API로 내려줄수있다면, 신규 API에  A,B,C 응답을 함께 내려주게하여, API호출을 줄인다.

4) 한화면에서 여러개의 무거운 API를 호출해야할때, API의 호출을 줄인다.

 

4번이 이번에 이야기할 내용이다.

1) 2) 3)번에 해당이 되지않고, 필연적으로 한화면에서 여러개의 API를 호출해야하는경우, 특히 차트나 그래프, 통계 데이터를 화면에 표현하기 위한 API이고, 해당 API가 무거운 API일때 (쿼리, 프로세스가 복잡한 경우)

 

어떻게 튜닝을 해야 할까? 라는 생각을 해봤다.

 

그때!! 떠오른 아이디어가 있다!

 

만약 차트,그래프등이 화면에 스크롤이 생기는 경우라고하면, 화면에 해당 영역이 보여질때, 해당 화면에 필요한 API를 호출하는 방법을 사용하면, 해당 화면에 들어왔을때, 스크롤 맨아래(유저가 보지않는 영역) 영역까지를 그리고 위해서 API를 모두 호출하지 않아도 되지 않을까?? 라는 생각이였다.

 

React보다 Vue를 개인적으로는 더 선호해서(개인적으로 쉽게쉽게 사용하기는 더 편하다ㅎ), 우선 화면에 영역이 그려지는 이벤트를 받을수있는 방법이 있는지를 찾아봤다.

 

특정 컴포넌트가 화면에 보일때, 이벤트를 받을수있는 IntersectionObserver라는 기능이 있었다.

(vue가 있으면 다른 프레임웤은 당연히 있겠지 ㅋ)

 

<template>
  <div ref="target">
    사용자 목록
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'

const target = ref(null)
let observer

const loadData = async () => {
  console.log("API 호출")
  // await axios.get(...)
}

onMounted(() => {
  observer = new IntersectionObserver(
    async ([entry]) => {
      if (entry.isIntersecting) {
        await loadData()

        // 한 번만 호출하려면
        observer.unobserve(target.value)
      }
    },
    {
      threshold: 0.1 // 10% 보이면 호출
    }
  )

  observer.observe(target.value)
})

onBeforeUnmount(() => {
  observer?.disconnect()
})
</script>

 

챗GPT에게 예제하나 만들어봐 해봤다!

 

이렇게 IntersectionObserver를 이용하면 화면에 컴포넌트가 어느정도(퍼센트) visible 될때를 이벤트로 받을수있고,

이때 해당 컴포넌트에 필요한 API를 호출하게하면, 초기부터 스크롤아래 보이지않는 컴포넌트를 위한 API들까지 초반에 호출하지 않아도 되어서, 성능상으로 이점을 얻을것같다.

 

우선, 해당 방법을 이미 앱개발, 프론트개발에서 적극적으로 서비스 프로덕트에 사용하지는 모르겠다.

그리고 여러 해결해야하는 이슈가 있는지도 모르지만, 

충분히 디벨럽해볼만한 생각이지 않을까?

생각이 든다.