ajax 요청을 최소화하자

Ajax는 Asynchronous JavaScript and XML의 약자로, 웹 페이지에서 서버와 비동기적으로 데이터를 교환하면서 웹 페이지를 동적으로 업데이트하는 기술이다.
Ajax를 사용하면 페이지 이동 없이도 필요한 부분만 업데이트할 수 있으므로 UX를 개선할 수 있다.

Dashboard를 만들 때 많은 데이터를 가지고 계산하고 출력해야 하므로 각각의 위치마다 같은 데이터를 사용하는 경우도 있고, 다른 데이터를 가져와야 하는 경우도 있었다.

Ajax에 대해 제대로 이해하지 못해서 같은 데이터를 사용하지만 위치가 다르다고는 이유로 계속해서 Ajax 요청을 하고 있었던 것이다.
(서버야 버텨줘..!!)

한 번에 가져오기 vs 나누어 가져오기

데이터를 가져올 때는 상황에 따라 적절한 방식을 선택하는 것이 중요하다.

내가 지금까지 짠 코드는 막 가져오기였다..
공부를 하면서 알게 된 내용을 간략하게 정리해 봤다.

전체 데이터를 가져와서 각 위치에 업데이트하는 방식

• 장점
  • 한 번의 요청으로 모든 데이터를 가져올 수 있어서 네트워크 부하를 줄일 수 있다.
  • 또한, 데이터가 모두 로드된 이후에는 사용자 경험을 향상시킬 수 있다.
• 단점
  • 모든 데이터를 가져오기 때문에 서버에 부담이 가거나, 클라이언트의 메모리를 많이 차지할 수 있다.
  • 또한, 데이터가 계속 업데이트되면 사용자는 일정한 주기로 새로고침을 해야 한다.

각 위치마다 필요한 데이터를 각각 가져와서 업데이트하는 방식

• 장점
  • 필요한 데이터만 가져오기 때문에 데이터를 가져오는 데 드는 시간이 줄어들어 성능이 향상될 수 있다.
  • 또한, 데이터가 자주 업데이트될 때 더 빠른 업데이트를 제공할 수 있다.
• 단점
  • 각 위치마다 데이터를 가져와야 하기 때문에 요청 수가 많아질 수 있다.
  • 이는 서버 부하와 네트워크 부하를 유발할 수 있습니다. 또한, 사용자 경험이 좋지 않을 수 있다.

전체 데이터가 크고 자주 업데이트되지 않는 경우에는 전체 데이터를 가져와서 업데이트하는 방식이 적절할 수 있고,
데이터가 작고 자주 업데이트되는 경우에는 각 위치마다 필요한 데이터를 가져와서 업데이트하는 방식이 적절할 수 있다.

이제는 잘할 수 있다

처음에는 무슨 차이가 있을까라는 생각이 들었지만 불필요한 코드를 최소할 수 있고, 서버에 주는 부담을 최소화할 수 있다는 것을 알았다.
단순하게 생각해봤을 때 Ajax 요청으로 필요한 데이터를 가져왔는데 왜 또 가져오려 했을까..??

또한 데이터의 한 가지 컬럼 값에 따라 나누어서 가져와야 하는 경우
(ex. 모든 데이터 값을 월별, 일별, 시간별로 나누어서 가져와야 할 때)

위와 같은 경우에도 계속해서 Ajax 요청을 했었는데 이제는 한번 요청할 때 각각 분리해서 가져오도록 코드를 수정했다.

정답이 정해져 있는 것은 아니기 때문에 적절한 상황에 맞춰 Ajax 요청을 최소화해야 한다는 것을 배웠다.

프로그래밍은 무조건 적인 해답이 정해져 있지 않고 상황에 따른 다양한 해결 방식들이 많기 때문에 전부 다 알지는 못해도 어느 정도 이해는 필요할 것 같다.