내 블로그

2025-05-16

6 min read

LRIM 리뉴얼 전체 지원자 관리 페이지 최적화

100개의 테이블

데이터 형태

// 이런 데이터가 100개
{
	data: {
	    "id": "682681dad12a496ef8ebab14",
	    "name": "조훈",
	    "email": "hunchokr@naver.com",
	    "phone": "010-8998-2730",
	    "experienceType": "경력",
	    "experienceYears": 21,
	    "createdAt": "2025-05-16T00:07:54.686Z",
	    "updatedAt": "2025-05-16T00:07:54.686Z",
	    "document": {
	        "_id": "682681dad12a496ef8ebab23",
	        "applicantId": "682681dad12a496ef8ebab14",
	        "recruitmentId": "66f0e31e54528140cb4d760f",
	        "positionTitle": "인공위성기업 [루미르] 기구 설계 개발 채용",
	        "isDeleted": false,
	        "isRejected": false,
	        "isHired": false,
	        "previousStage": {
	            "id": "682230792338ffd827900b6e"
	        },
	        "currentStage": {
	            "id": "682230792338ffd827900b6e",
	            "name": "서류 지원",
	            "categoryId": "682230792338ffd827900b6a",
	            "categoryName": "Opened"
	        },
	        "createdAt": "2025-05-16T00:07:54.868Z",
	        "updatedAt": "2025-05-16T00:07:54.868Z",
	        "__v": 0
	    },
	    "viewInfo": {
	        "hasViewed": false
	},
	page: 1,
	limit: 100,
	total: 935,
	totalPages: 11
}

테이블 가상화 적용 전

테이블 가상화 적용 후

감소된 시간: 224ms - 152ms = 72ms 향상 비율: (72ms / 224ms) x 100% = 약 32%

조건부 데이터 호출 로직 적용 (지원자 상세 패널)

감소된 시간: (160ms - 136ms) = 24ms 향상 비율: (24ms / 160ms) x 100% = 약 15%

LRIM 리뉴얼 지원자 관리 페이지 최적화 기술 레포트

개요

LRIM 리뉴얼 프로젝트의 지원자 관리 페이지에서 대용량 데이터(100개 테이블, 총 935명의 지원자 데이터) 처리 시 발생하는 성능 문제를 해결하기 위해 두 가지 최적화 기법을 적용했습니다. 본 레포트는 적용된 최적화 기법과 그 결과를 분석합니다.

성능 최적화 전략

1. 테이블 가상화(Table Virtualization) 적용

문제점

  • 100개의 지원자 테이블을 동시에 렌더링하여 초기 로딩 시간이 과도하게 소요
  • DOM 노드 수 증가로 인한 메모리 사용량 증가 및 스크롤 성능 저하

해결 방안

테이블 가상화 기법을 적용하여 화면에 보이는 영역의 테이블만 렌더링하고, 스크롤 시 동적으로 테이블을 생성/제거하는 방식으로 구현

데이터 구조

각 지원자 데이터는 다음과 같은 구조로 구성됩니다:

json

{
  "data": {
    "id": "682681dad12a496ef8ebab14",
    "name": "조훈",
    "email": "hunchokr@naver.com",
    "phone": "010-8998-2730",
    "experienceType": "경력",
    "experienceYears": 21,
    "createdAt": "2025-05-16T00:07:54.686Z",
    "updatedAt": "2025-05-16T00:07:54.686Z",
    "document": {
      "_id": "682681dad12a496ef8ebab23",
      "applicantId": "682681dad12a496ef8ebab14",
      "recruitmentId": "66f0e31e54528140cb4d760f",
      "positionTitle": "인공위성기업 [루미르] 기구 설계 개발 채용",
      "currentStage": {
        "id": "682230792338ffd827900b6e",
        "name": "서류 지원",
        "categoryId": "682230792338ffd827900b6a",
        "categoryName": "Opened"
      }
    },
    "viewInfo": {
      "hasViewed": false
    }
  },
  "page": 1,
  "limit": 100,
  "total": 935,
  "totalPages": 11
}

성능 개선 결과

  • 적용 전: 224ms
  • 적용 후: 152ms
  • 개선 효과: 72ms 단축 (약 32% 성능 향상)

2. 조건부 데이터 호출 로직 적용

문제점

  • 지원자 상세 패널을 열 때마다 불필요한 데이터 호출 발생
  • 이미 로드된 데이터를 중복으로 요청하여 네트워크 비용 및 응답 시간 증가

해결 방안

지원자 상세 정보 조회 시 다음과 같은 조건부 로직을 적용:

  • 지원자 행 클릭 시 상세 정보를 각 탭을 클릭했을 때 조회하도록 로직 개선

성능 개선 결과

  • 적용 전: 160ms
  • 적용 후: 136ms
  • 개선 효과: 24ms 단축 (약 15% 성능 향상)

전체 성능 개선 효과

누적 성능 향상

두 가지 최적화 기법을 통해 달성한 전체 성능 개선:

구분적용 전적용 후개선 효과
테이블 렌더링224ms152ms72ms (32% 향상)
상세 패널 로딩160ms136ms24ms (15% 향상)
총 개선 효과384ms288ms96ms (25% 향상)

사용자 경험 개선

  • 초기 로딩 시간 단축: 페이지 진입 시 체감 속도 32% 개선
  • 인터랙션 응답성 향상: 지원자 상세 정보 조회 시 15% 빠른 응답
  • 메모리 사용량 최적화: DOM 노드 수 감소로 브라우저 메모리 효율성 증대

기술적 고려사항

구현 복잡도

  • 테이블 가상화: 스크롤 이벤트 처리 및 동적 렌더링 로직의 복잡성 증가
  • 조건부 데이터 호출: 캐시 무효화 전략 및 데이터 일관성 관리 필요

확장성

  • 현재 935명의 지원자 데이터를 기준으로 최적화되었으나, 더 많은 데이터에 대해서도 확장 가능한 구조
  • 페이지네이션과 결합하여 추가적인 성능 개선 여지 존재

결론 및 향후 계획

LRIM 리뉴얼 프로젝트에서 적용한 두 가지 최적화 기법을 통해 전체적으로 25%의 성능 향상을 달성했습니다. 특히 테이블 가상화를 통한 32%의 초기 로딩 시간 단축은 사용자 경험에 직접적인 개선 효과를 제공합니다.

그래프 뷰