6,800건 이상의 대용량 실적 데이터 처리 성능 및 검색 UX 최적화 #12

New Issue

Hyein · 2026-03-24T13:25:27+09:00

Hyein commented

2026-03-24 13:25:27 +09:00

1. 발생 배경 및 문제점

데이터 건수가 6,800건(약 2023년부터 현재까지의 전표)을 넘어가면서 두 가지 기술적 병목 현상이 발생했습니다.

DB 조회 지연: 인덱스가 없어 특정 프로젝트나 업체 검색 시 전체 테이블을 처음부터 끝까지 훑어야(Full Scan) 했습니다.
UI 프리징(Freezing): 검색창에 한 글자 입력할 때마다 즉시 API 요청이 발생하고, React가 복잡한 테이블을 다시 렌더링하면서 화면이 일시적으로 멈추는 현상이 생겼습니다.

2. 해결 방법 및 작업 내용

이 성능 문제를 해결하기 위해 백엔드의 인덱싱과 프론트엔드의 비동기 처리를 동시에 적용했습니다.

DB 인덱스 설계: init_db 함수 내에서 project_code, transaction_date, vendor_name, account_code_final 등 핵심 조회 필드에 대해 8개의 SQLite 인덱스를 자동으로 생성하도록 구현함.
검색 디바운싱(Debouncing) 적용: React의 useDeferredValue를 사용하여 검색 입력 시 비필수적인 렌더링의 우선순위를 낮추고, useDebouncedValue를 통해 입력이 멈춘 후 250ms가 지난 시점에만 API를 호출하도록 최적화함.
Batching 최적화: 프로젝트 목록을 불러올 때 매번 마스터 정보를 따로 조회하던 방식에서, 필요한 정보를 미리 일괄적으로 가져와 메모리에서 매핑하는 방식으로 쿼리 횟수를 획기적으로 줄임.

3. 도입 결과

검색 반응 속도가 즉각적으로 개선되었으며, 프로젝트 리스트의 로딩 시간이 약 0.5초에서 0.1초 내외로 단축되었습니다.
대용량 데이터 환경에서도 사용자에게 끊김 없는 분석 경험을 제공할 수 있게 되었습니다.

### 1. 발생 배경 및 문제점 데이터 건수가 6,800건(약 2023년부터 현재까지의 전표)을 넘어가면서 두 가지 기술적 병목 현상이 발생했습니다. - **DB 조회 지연**: 인덱스가 없어 특정 프로젝트나 업체 검색 시 전체 테이블을 처음부터 끝까지 훑어야(Full Scan) 했습니다. - **UI 프리징(Freezing)**: 검색창에 한 글자 입력할 때마다 즉시 API 요청이 발생하고, React가 복잡한 테이블을 다시 렌더링하면서 화면이 일시적으로 멈추는 현상이 생겼습니다. ### 2. 해결 방법 및 작업 내용 이 성능 문제를 해결하기 위해 **백엔드의 인덱싱**과 **프론트엔드의 비동기 처리**를 동시에 적용했습니다. - **DB 인덱스 설계**: `init_db` 함수 내에서 `project_code`, `transaction_date`, `vendor_name`, `account_code_final` 등 핵심 조회 필드에 대해 8개의 SQLite 인덱스를 자동으로 생성하도록 구현함. - **검색 디바운싱(Debouncing) 적용**: React의 `useDeferredValue`를 사용하여 검색 입력 시 비필수적인 렌더링의 우선순위를 낮추고, `useDebouncedValue`를 통해 입력이 멈춘 후 250ms가 지난 시점에만 API를 호출하도록 최적화함. - **Batching 최적화**: 프로젝트 목록을 불러올 때 매번 마스터 정보를 따로 조회하던 방식에서, 필요한 정보를 미리 일괄적으로 가져와 메모리에서 매핑하는 방식으로 쿼리 횟수를 획기적으로 줄임. ### 3. 도입 결과 - 검색 반응 속도가 즉각적으로 개선되었으며, 프로젝트 리스트의 로딩 시간이 약 0.5초에서 0.1초 내외로 단축되었습니다. - 대용량 데이터 환경에서도 사용자에게 끊김 없는 분석 경험을 제공할 수 있게 되었습니다.

Hyein added the ptc 실행분석 label 2026-03-24 13:25:27 +09:00

Hyein changed title from ~~DB 성능 최적화 및 검색 경험(UX) 고도화~~ to [Perf] 대용량 거래 데이터(6k+) 실시간 조회를 위한 DB 인덱싱 및 UX 최적화

2026-03-24 13:27:26 +09:00

Hyein changed title from ~~[Perf] 대용량 거래 데이터(6k+) 실시간 조회를 위한 DB 인덱싱 및 UX 최적화~~ to [Perf] 6,800건 이상의 대용량 실적 데이터 처리 성능 및 검색 UX 최적화

2026-03-24 13:28:51 +09:00

Hyein changed title from ~~[Perf] 6,800건 이상의 대용량 실적 데이터 처리 성능 및 검색 UX 최적화~~ to 6,800건 이상의 대용량 실적 데이터 처리 성능 및 검색 UX 최적화

2026-03-24 13:30:35 +09:00

Hyein closed this issue

2026-03-24 16:53:39 +09:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: Hyein/PTC#12