# 차트가 많아도 속도 빠르게 처리하는 방법

차트 데이터를 미리 가공하여 API 응답 속도 최적화

서버에서 데이터를 미리 가공 (Preprocessing)

✔ 차트에 필요한 데이터만 추출해서 API 응답을 최소화
✔ 복잡한 SQL 쿼리가 아니라, 사전 연산된 데이터를 캐싱(Cache) 또는 미리 저장

 

예시: 일반적인 방식 (비효율적인 방식)

SELECT * FROM climate_data WHERE year BETWEEN 1990 AND 2023;

 

• 요청이 들어올 때마다 데이터베이스에서 많은 데이터를 검색 → 속도 느림

최적화된 방식 (Preprocessing + 캐싱)

• 서버에서 미리 연산된 데이터를 JSON 형태로 저장하고 API 요청 시 빠르게 응답

{
  "year": [1990, 2000, 2010, 2020],
  "temperature": [15.2, 15.5, 15.8, 16.2]
}

 

즉, 데이터를 API 요청 시마다 처리하지 않고, 미리 가공한 데이터를 빠르게 제공! 

프론트엔드에서 비동기 데이터 로딩 (Lazy Loading)

차트 데이터를 비동기적으로 로드

✔ fetch() 또는 Axios를 이용해 API 데이터를 비동기 요청 (AJAX)으로 가져옴
✔ 페이지가 먼저 로드된 후, 차트 데이터는 비동기적으로 불러와서 표시

예시 코드 (JavaScript + Chart.js)

fetch("")
  .then(response => response.json())
  .then(data => {
      let ctx = document.getElementById("chart").getContext("2d");
      new Chart(ctx, {
          type: "line",
          data: {
              labels: data.year,
              datasets: [{
                  label: "Temperature",
                  data: data.temperature
              }]
          }
      });
  });

페이지 로딩을 막지 않고 데이터를 가져와 차트를 빠르게 렌더링!

3. 클라이언트에서 데이터를 캐싱하여 중복 요청 최소화

✔ 브라우저 localStorage 또는 sessionStorage를 활용하여 같은 데이터 요청을 방지
✔ IndexedDB 또는 Service Worker를 활용하여 차트 데이터 캐싱 가능

예시: 데이터 캐싱 활용 (localStorage)

let cachedData = localStorage.getItem("chartData");
if (cachedData) {
    renderChart(JSON.parse(cachedData));
} else {
    fetch("")
        .then(response => response.json())
        .then(data => {
            localStorage.setItem("chartData", JSON.stringify(data));
            renderChart(data);
        });
}

동일한 차트 데이터를 다시 요청하지 않고, 브라우저에서 캐싱하여 빠르게 렌더링!

4. 차트 라이브러리 최적화 (WebGL 기반)

Highcharts, Chart.js, D3.js 같은 최적화된 차트 라이브러리 사용

✔ WebGL을 활용하는 ECharts, Plotly.js 같은 고성능 차트 라이브러리를 사용하면 렌더링 속도가 향상됨
✔ requestAnimationFrame()을 활용해 부드러운 애니메이션 효과 적용

예시: ECharts (WebGL 기반으로 빠른 차트 렌더링 가능)

var chart = echarts.init(document.getElementById("chart"));
chart.setOption({
    xAxis: { type: "category", data: ["1990", "2000", "2010", "2020"] },
    yAxis: { type: "value" },
    series: [{ data: [15.2, 15.5, 15.8, 16.2], type: "line" }]
});

Canvas/WebGL을 활용하면 복잡한 SVG 기반 차트보다 훨씬 빠르게 렌더링 가능!

 

5. 서버 성능 최적화 (CDN 및 API 속도 개선)

✔ API 응답 속도를 빠르게 하기 위해 CDN(Content Delivery Network) 사용
✔ RESTful API 대신 GraphQL을 사용하여 필요한 데이터만 요청하여 트래픽 절감

예시: GraphQL API를 사용하여 필요한 데이터만 가져오기

query {
  climateData(years: [1990, 2000, 2010, 2020]) {
    year
    temperature
  }
}

필요 없는 데이터를 불러오지 않으므로 API 응답 속도 향상!

 

결론

최적화 기법	설명
미리 계산된 데이터 사용 (Preprocessing)	API 호출 속도를 빠르게 하기 위해 데이터를 미리 가공
비동기 데이터 로딩 (Lazy Loading)	차트 데이터를 비동기로 불러와 페이지 로딩 속도 최적화
브라우저 캐싱 (localStorage, IndexedDB)	동일한 데이터 요청을 방지하여 빠르게 표시
WebGL 기반 차트 (ECharts, Plotly.js)	빠른 렌더링을 위해 WebGL을 활용
CDN 및 API 최적화 (GraphQL, RESTful API 개선)	서버 부하를 줄이고 API 응답 속도를 향상

 

서버 & 프론트엔드 & 데이터 처리 최적화가 조합되어 빠른 속도를 유지하는 것