대용량 데이터 서빙 속도 개선 방안

현재 만들고 있는 서비스의 목적은 보유 데이터를 유저에게 보여주는 것이다.

개발 초기에는 이렇게 데이터가 클지 모르고, 간단하게 만들어보고자 모든 데이터를 프론트단에 모두 두고 개발을 시작했다. (처음에는 100메가 정도였다...)

어느정도 만든 후, 새로운 데이터를 주시고 디벨롭했어야 했는데, 받아보니 거의 2.8기가였다는...ㅎㅎㅎㅎㅎ

당연히 속도는 느릴 수밖에 없는 엄청난 데이터였다..^^;; geoJSON은 겁나,,, 겁나 커,,,,,,,,,, 

이런 데이터를 처리해 본 적이 없으니 좀 당황스러워서 새로운 방안을 고민해보기 시작했다. 

 

---

1. 백앤드 도입

 

당연히 가장 처음 생각했던 것은 백앤드 도입이었다. 이미 기존 코드를 node.js로 만들었으니, 백앤드도 node.js로 만들면 얼마 안걸릴 것이라는 생각과, docker 환경을 이미 도입하면서 server.js를 구성해두었기에 어렵지 않게 구성할 수 있으리라 생각했다. 실제로 node로 백앤드 구성은 처음이었는데도 1시간 내로 완성했다.  아래는 server.js 내에 구성한 코드

app.get('/api/geojson', (req, res) => {
  const { scenario, hazardtype } = req.query;

  try {
    // 필터링 로직
    const filteredData = geoJsonData.features.filter(feature => {
      const matchesScenario = scenario ? feature.properties.scenario === scenario : true;
      const matchesHazardType = hazardtype ? feature.properties.hazard_type.toLowerCase() === hazardtype.toLowerCase() : true;
      return matchesScenario && matchesHazardType;
    });

    res.json({
      type: 'FeatureCollection',
      features: filteredData,
    });
  } catch (error) {
    console.error('Error filtering geoJSON data:', error);
    res.status(500).json({ message: 'Server error' });
  }
});

그러나 ...

이전과 다를 바 없는 처리 속도...!!! 거의 0.9초에서 1초 정도 걸리는데, 체감상 1분이었음. 왜냐면...ㅎㅎ

DB도입까지 할 만한 데이터는 또 아니라고 생각해서 DB를 구축하지 않았는데, (즉, 데이터는 프론트단에 있는거임)
사실상 그렇다면 크게 의미가 없다는 것이다. 

달라진 점은 라디오 버튼 클릭이 빠르다는 것? ㅎㅎ 프론트에서 필터링해서 가져올때는 데이터 처리가 완료된 이후에 라디오 버튼이 눌렸는데, 이제 데이터 처리 자체는 백앤드에서 담당하니, 라디오 버튼 처리 로직만 수행하는 프론트는 빠르게 이 과정을 수행할 수 있게 되었다.

 

ㅋㅋ.. 진짜 의미 없다는 말을 하는거임....................

 

그래서 고민하기 시작했다. 

하... DB를 진짜 해...? 

그러다 문득 네트워크 탭을 보다가 필터링 하는 로직을 반복적으로 하고 있다는 사실을 알게 되었다. 씁 그러면 필터링하는 걸 한 번만 하면 안되나? 그래서 바로 캐싱이 떠올라서 이를 먼저 해보고자 했다. 아주아주 빠른 속도까지 필요한 것은 아니고, MVP를 만드는게 목적이기 때문에.

 

2. 웹 워커와 캐싱

2.1 웹워커

먼저 웹 워커를 사용해서 데이터 필터링 작업을 메인 쓰레드에서 분리했다. 웹 워커는 메인 쓰레드와 별도로 백그라운드에서 실행되는 자바스크립트 코드로서, 복잡한 계산 및 데이터 처리 작업을 백그라운드에서 수행해준다. 이 코드를 사용함으로써 메인 스레드의 유저 인터페이스 및 상호작용에 영향을 줄인다. 그래서 불-편하게 느껴졌던 라디오 버튼 멈춤, 느린 응답 등이 개선될 수 있는 것이다. 

 

worker.js 코드를 다음과 같이 생성했다. 

onmessage = function(e) {
    const { data, scenario, hazardtype } = e.data;
    const filteredData = data.features.filter(feature => {
      const matchesScenario = scenario ? feature.properties.scenario === scenario : true;
      const matchesHazardType = hazardtype ? feature.properties.hazard_type.toLowerCase() === hazardtype.toLowerCase() : true;
      return matchesScenario && matchesHazardType;
    });
    postMessage({ type: 'FeatureCollection', features: filteredData });
  };

그럼 웹 브라우저는 어떤 쓰레드들로 구성되어 있을까? 웹 브라우저의 주요 쓰레드 구성은 다음과 같다.

 

• 메인 쓰레드 (Main Thread)
  • 역할: 자바스크립트 실행, DOM 조작, 스타일 계산, 렌더 트리 생성 및 레이아웃 계산, 페인팅 등
  • 특징: 브라우저의 UI 업데이트 및 사용자 상호작용 처리를 담당합니다. 단일 쓰레드로 작동하며, 이로 인해 블로킹 작업이 발생할 수 있습니다.
• 렌더러 프로세스 (Renderer Process)
  • 역할: 웹 페이지의 모든 콘텐츠를 렌더링합니다. HTML, CSS 파싱, 자바스크립트 실행, 레이아웃 계산, 페인팅 등을 포함합니다.
  • 특징: 일반적으로 각 탭마다 하나의 렌더러 프로세스를 가집니다. 메인 쓰레드와 협력하여 작업을 수행합니다.
• 컴포지터 쓰레드 (Compositor Thread)
  • 역할: 레이어를 병합하고 GPU에 전달하여 최종 화면을 렌더링합니다.
  • 특징: 페이지의 스크롤링 및 애니메이션을 부드럽게 처리합니다.
• 웹 워커 쓰레드 (Web Worker Thread)
  • 역할: 백그라운드 작업을 수행합니다. 복잡한 계산이나 데이터 처리 작업을 메인 쓰레드와 분리하여 실행합니다.
  • 특징: 메인 쓰레드와 독립적으로 동작하며, 메시지를 통해 데이터를 주고받습니다.
• 네트워크 쓰레드 (Network Thread)
  • 역할: 네트워크 요청을 처리합니다. HTTP 요청, 웹소켓 연결 등을 담당합니다.
  • 특징: 비동기적으로 네트워크 작업을 수행하여 메인 쓰레드를 차단하지 않습니다.
• 파일 IO 쓰레드 (File IO Thread)
  • 역할: 파일 시스템 접근을 처리합니다. 파일 읽기, 쓰기 등을 담당합니다.
  • 특징: 비동기적으로 파일 작업을 수행하여 메인 쓰레드를 차단하지 않습니다.

 

이제 데이터 처리는 끝났으니, 이렇게 데이터 처리과정을 반복하지 않도록 해서 로딩 속도를 높여보자.

2.2 캐싱

다음과 같이 cache.js를 구성한다. 캐시를 사용하면 이러한 필터링 작업은 각 시나리오별로 한 번씩만 수행하면 이후에는 다시 수행하지 않아도 되는 것이다. 

const cache = new Map();

export function getCachedData(key) {
  return cache.get(key);
}

export function setCachedData(key, data) {
  cache.set(key, data);
}

 

2.3 프론트에서 적용

 

캐시와 웹 워커를 프론트에서 적용한다. 만약 캐싱된 데이터가 없으면 백앤드에서 필터링 후 클라이언트로 전송하고, 이를 웹워커가 받아 필터링 등 추가적인 작업을 수행한다. 이런 데이터를 캐싱하여 동일한 요청 시에 빠르게 응답하게 해준다.

 

사실 여기서 백앤드에서 읽어오는게 현재 상황에서는 굳이 필요하지 않을 수 있지만, 확장성을 위해 그냥 남겨뒀다.

import { getCachedData, setCachedData } from './cache.js'

const worker = new Worker('worker.js');

        const cacheKey = `${scenario}:${selectedHazardType.toLowerCase()}`;
        const cachedData = getCachedData(cacheKey);

        if (cachedData) {
            console.log('Using cached data');
            processFilteredData(cachedData)
        }else{
            fetch(`http://localhost:5001/api/geojson?scenario=${encodeURIComponent(scenario)}&hazardtype=${encodeURIComponent(selectedHazardType.toLowerCase())}`)
                .then(response => {
                    if (!response.ok) {
                        console.error('Error fetching filtered geoJSON data:', response.statusText);
                        return;
                    }
                    return response.json();
                })
                .then(geoJsonData => {
                    console.log('Filtered Data:', geoJsonData);

                    if (geoJsonData.features.length === 0) {
                        console.log('No features found for scenario:', scenario, 'and hazard type:', selectedHazardType);
                        return;
                    }

                    worker.postMessage({ data: geoJsonData, scenario, hazardtype: selectedHazardType.toLowerCase() });
                    worker.onmessage = function(e) {
                    setCachedData(cacheKey, e.data);
                    processFilteredData(e.data); };

                    worker.onerror = function(e) {
                        console.error('Error processing data in worker:', e);
                    };
                });
        }
    }

 

... 사실 프론트는 거의 모르는 상태로 개발을 시작했는데, 고려할 부분이 정말 많다는 걸 느끼고 있다... 역시 하면서 배우니까 잼따 ㅎㅎㅎ