[Vue] 동적 라우트 정의로 코드 개선하기

라우트 정의 시 정적으로 import하는 방식에서 동적으로 import하는 방식으로 전환하게 되었습니다.

이를 위해 dynamicImportComponent라는 유틸리티 함수를 도입하여 동적으로 컴포넌트를 로드하고, 라우트 정의를 효율적으로 관리할 수 있게 되었습니다.

기존 정적 import 방식

기존에는 각 라우트 모듈을 개별적으로 import하여 사용했습니다. 

const testView1 = from "@/views/test/test1"
const testView2 = from "@/views/test/test2"
const testView3 = from "@/views/test/test3"

export default [
  {
    path: "testView1",
    children: testView1,
  },
  {
    path: "testView2",
    children: testView2,
  },
  {
    path: "testView3",
    children: testView3,
  }
];

이 방식은 직관적이지만, 다음과 같은 문제가 있었습니다

1. 유지보수의 어려움: 모듈 수가 많아질수록 관리가 복잡해짐
2. 불필요한 로드: 사용하지 않는 모듈도 초기 로딩 단계에서 모두 로드되어 성능 저하
3. 중복 코드: 비슷한 패턴의 import 코드가 반복적으로 작성됨

dynamicImportComponent를 활용한 동적 import

동적 import 방식으로 전환하면서 dynamicImportComponent 유틸리티 함수를 활용하여 컴포넌트를 동적으로 로드하도록 구현하였습니다. 

import ErrorView from "@/views/etc/ErrorView.vue";

const dynamicImportComponent = (importFunction) => async () => {
  try {
    const component = await importFunction();
    return component;
  } catch (error) {
    console.error(error);
    return ErrorView;
  }
};

export default dynamicImportComponent;

주요 기능

1. 동적 로드: importFunction을 통해 컴포넌트를 비동기로 로드
2. 에러 처리: 로드 중 에러가 발생하면 기본적으로 ErrorView를 반환하여 사용자 경험을 보장
3. 코드 간소화: 반복되는 동적 import 코드를 함수로 추상화하여 재사용 가능

유틸리티 함수 활용 예제: routes.js 구성

import dynamicImportComponent from "@/router/utils/dynamic-import-component";

const testView1 = dynamicImportComponent(() => import("@/views/test/test1"));
const testView2 = dynamicImportComponent(() => import("@/views/test/test2"));
const testView3 = dynamicImportComponent(() => import("@/views/test/test3"));

const paintCleaning = [
  {
    path: "test",
    children: [
      {
        path: "view",
        name: "testView1",
        component: testView1,
        props: ({ query }) => ({
          favoriteId: query.favoriteId,
          startDate: query.startDate,
          endDate: query.endDate,
          doneState: query.doneState,
          isFromOverview: Boolean(Number(query.isFromOverview)),
        }),
      },
      {
        path: "view2",
        name: "testView2",
        component: testView2,
      },
      {
        path: "view3",
        name: "testView3",
        component: testView3,
      },
    ],
  },
];

export default testView;

장점

1. 코드 재사용성: 유틸리티 함수로 중복된 동적 import 코드를 제거
2. 확장성: 새로운 컴포넌트를 추가할 때 동적 import만 작성하면 라우트에 쉽게 통합 가능
3. 성능 최적화: 초기 로딩 시점에 불필요한 컴포넌트 로드를 방지

동적 import 도입의 결과

dynamicImportComponent 유틸리티 함수를 활용하여 라우트를 구성한 결과

1. 코드 유지보수 용이성 증가: 모듈 수가 많아도 코드의 가독성과 유지보수성이 향상
2. 에러 대응력 강화: 에러가 발생해도 기본 컴포넌트를 반환하여 서비스 안정성 확보
3. 개발 생산성 향상: 새로운 모듈 추가 시 간단히 import와 설정만으로 확장 가능