Vue.js와 Nuxt.js의 라우팅 이해: 정적 vs 동적 로딩과 디렉토리 기반 라우팅

 

---

Vue.js에서 component: TestView와 component: () => import()의 차이

Vue.js에서 vue-router를 사용할 때, 라우트에 컴포넌트를 연결하는 두 가지 주요 방식이 있습니다: component: TestView와 component: () => import('../views/TestView.vue'). 이 둘의 차이를 살펴보면:

• 정적 로딩 (component: TestView)
  • 설명: 컴포넌트를 파일 상단에서 import TestView from '../views/TestView.vue'로 정적으로 가져와 직접 참조합니다. 앱이 시작될 때 메인 번들(예: app.js)에 포함되어 즉시 로드됩니다.
  • 장점: 라우트 접근 시 추가 요청 없이 빠르게 렌더링됩니다.
  • 단점: 모든 컴포넌트가 초기 로드에 포함되므로 번들 크기가 커져 로딩 시간이 길어질 수 있습니다.
  • 사용 사례: 자주 사용되거나 작은 컴포넌트에 적합합니다.
  • 예시:

    import TestView from '../views/TestView.vue';
    const routes = [{ path: '/test', component: TestView }];

• 동적 로딩 (component: () => import())
  • 설명: import()를 사용해 컴포넌트를 지연 로딩(Lazy Loading) 방식으로 설정합니다. Webpack이 별도 청크(예: test.[hash].js)로 분리하며, 라우트 방문 시에만 로드됩니다.
  • 장점: 초기 번들 크기를 줄여 로딩 속도를 개선합니다.
  • 단점: 라우트 방문 시 네트워크 요청이 발생합니다.
  • 사용 사례: 크거나 드물게 방문되는 컴포넌트에 적합하며, 코드 분할(Code Splitting)로 성능을 최적화할 때 유용합니다.
  • 예시:

    const routes = [{ path: '/test', component: () => import('../views/TestView.vue') }];

• 코드 예시 비교:

  const routes = [
    { path: '/test', component: TestView }, // 정적 로딩
    { path: '/about', component: () => import('../views/AboutView.vue') }, // 동적 로딩
  ];

• 결론: 성능 최적화가 필요하면 동적 로딩을, 빠른 접근이 중요하면 정적 로딩을 선택하세요.

---

 

728x90

 

Nuxt.js의 디렉토리 기반 라우팅과 vue-router의 차이

 

Nuxt.js는 vue-router를 기반으로 하지만, 라우팅 설정 방식이 다릅니다. Nuxt는 pages/ 디렉토리의 파일 구조를 보고 라우트를 자동 생성합니다.

• Nuxt의 디렉토리 기반 라우팅
  • 설명: pages/ 안의 .vue 파일 이름과 디렉토리 구조가 라우트 경로가 됩니다. 예를 들어:
     

    pages/
    ├── index.vue  → /
    ├── about.vue  → /about
    └── test/
        └── index.vue  → /test

  • 특징:
    • 별도의 routes 배열 작성 불필요.
    • 모든 페이지는 기본적으로 지연 로딩(Lazy Loading)으로 청크 분리(예: about.[hash].js).
    • 정적 로딩(TestView)은 기본 지원되지 않음.
  • 장점: 설정이 간단하고 성능 최적화가 자동 적용됩니다.
• vue-router와의 차이
  • 수동 설정: vue-router는 routes 배열을 직접 작성하며, 정적/동적 로딩을 자유롭게 선택 가능.
  • Nuxt: 디렉토리 구조로 라우트를 정의하고, 기본적으로 () => import()와 유사한 동작 제공.
  • 예시 비교:
    • vue-router: { path: '/test', component: TestView }.
    • Nuxt: pages/test.vue → 자동으로 /test 라우트 생성.
• Nuxt에서 수동 설정
  • nuxt.config.js에서 router.extendRoutes로 추가 라우트를 정의할 수 있습니다:

    export default {
      router: {
        extendRoutes(routes, resolve) {
          routes.push({ path: '/test', component: resolve(__dirname, 'pages/test.vue') });
        },
      },
    };

• 이해 포인트:
  • Nuxt는 "파일만 놓으면 라우팅 완료"로 편리함과 성능(청크 분리)을 제공.
  • vue-router는 "직접 설정"으로 유연성을 제공.

---

결론

Vue.js의 vue-router는 정적(TestView)과 동적(() => import()) 로딩을 내가 선택할 수 있고, Nuxt는 디렉토리 기반으로 모든 페이지를 자동 지연 로딩합니다. 프로젝트 규모와 성능 요구에 따라 적합한 방식을 선택하세요!

 

 

728x90

 

---

어떻게 이해해야 하나?

Nuxt의 디렉토리 기반 라우팅과 vue-router의 차이를 이해하려면 이렇게 생각하면 좋아요:

• Nuxt:
  • "파일을 놓으면 끝!" → pages/에 .vue 파일을 넣으면 자동으로 라우트가 만들어지고, 기본적으로 지연 로딩 적용.
  • 개발 편의성과 성능 최적화(청크 분리)를 동시에 제공.
  • 예: pages/about.vue → 자동으로 /about 라우트, 청크로 분리됨.
• vue-router:
  • "내가 직접 설정해줄게!" → routes 배열에 경로와 컴포넌트를 수동으로 정의.
  • 정적 로딩(TestView)과 동적 로딩(() => import())을 자유롭게 선택 가능.
  • 예: { path: '/about', component: () => import('../views/AboutView.vue') }.

Nuxt에서 TestView vs () => import()

• Nuxt에서는 pages/test.vue를 만들면 자동으로 () => import()처럼 동작한다고 이해하면 됩니다.
• component: TestView처럼 정적으로 메인 번들에 포함시키는 건 Nuxt의 기본 방식과 맞지 않으니, 수동 설정(extendRoutes)에서만 의미가 있어요.

---

 

• Nuxt: 디렉토리 기반이라 pages/에 파일을 두면 끝. 모든 페이지는 기본적으로 지연 로딩(() => import()와 유사).
• vue-router: 수동으로 routes를 설정하며, 정적(TestView)과 동적(() => import())을 내가 선택.
• 이해 포인트: Nuxt는 편리함과 성능(지연 로딩)을 자동으로 제공하지만, 세부 조정이 필요하면 router.extendRoutes로 보완.

Nuxt 프로젝트라면 pages/에 test.vue를 추가하는 것만으로 /test 라우트가 만들어지고, 자동으로 청크 분리까지 되니 걱정 말고 디렉토리 구조를 활용하세요! 추가 질문 있으면 언제든 말씀해주세요.