Vue Router 라우트 명명: 규칙과 Enum

대규모 Vue 프로젝트에서 Vue Router 경로 이름 최적화 가이드

실제 Vue 애플리케이션에서 많은 화면과 팀 개발이 이루어질 때, Vue Router 문서의 간단한 예제들은 문제를 야기합니다. 문자열 경로에 의존하는 방식은 리팩토링을 복잡하게 만들고 버그를 발생시킵니다. 두 가지 핵심 규칙으로 라우팅을 견고하게 만들 수 있습니다: 모든 경로에 name 속성의 필수 사용과 이름들을 enum이나 상수 객체에 중앙 집중식으로 저장하기.

이렇게 하면 네비게이션 로직이 URL 구조와 분리되어 변경이 간소화되고 오류가 최소화됩니다.

name 속성 필수 사용: 경로와의 독립성

path를 통한 전환은 코드를 현재 URL 구조에 강하게 결합시킵니다. 문서의 예제:

const routes = [
  {
    path: '/user/:username',
    component: User,
  }
]

router.push('/user/basov')와 같은 네비게이션은 /profile/:username으로 변경되면 작동하지 않습니다. name을 사용하면 이 문제가 해결됩니다:

router.push({ name: 'profile', params: { username: 'john' } })

라우터 자체가 현재 경로를 대체해줍니다. 이는 <router-link>에서 특히 중요한데, name 없이는 리팩토링 시 전체 프로젝트를 수정해야 합니다.

이름들을 Enum이나 객체에 중앙 집중화

'profile'과 같은 문자열을 하드코딩하면 오타, 중복, 어려운 리팩토링 문제가 발생합니다. 이름들을 별도 모듈로 추출하세요.

TypeScript enum:

export enum RouteNames {
  Profile = 'profile',
  Dashboard = 'dashboard',
  Settings = 'settings',
}

JavaScript 객체:

export const RouteNames = {
  UserList: 'user-list',
  UserSettings: 'user-settings',
  UserProfile: 'user-profile',
} as const;

사용 예:

router.push({ name: RouteNames.Profile, params: { username: 'john' } });
<router-link :to="{ name: RouteNames.UserList }">사용자 목록</router-link>;

IDE는 자동 완성을 제공하고, TypeScript는 컴파일 타임에 타입 검사를 수행합니다.

예제를 통한 접근법 비교

규칙 없이:

// 컴포넌트 A
router.push('/user/list');

// 컴포넌트 B
<router-link to="/user/settings">설정</router-link>;

// 컴포넌트 C
if (route.path === '/user/profile') { /* ... */ }

/user/list를 /users/all로 변경하려면 전역 문자열 검색이 필요합니다. /User/List와 같은 오타는 런타임까지 발견되지 않습니다.

규칙 적용 시:

// routes/names.ts
export const RouteNames = {
  UserList: 'user-list',
  UserSettings: 'user-settings',
  UserProfile: 'user-profile',
} as const;

// routes/index.ts
{ path: '/users/all', name: RouteNames.UserList, component: UserList },

리팩토링: path만 변경하고 name은 그대로 유지합니다. 모든 전환이 작동하고 오타가 제거됩니다.

| 항목 | 규칙 없음 | 규칙 적용 |

|--------|------------|-------------|

| 이름 위치 | 프로젝트 전체에 흩어짐 | 중앙 집중화 |

| 경로 리팩토링 | 전역 문자열 검색 | 한 곳에서 변경 |

| 오타 | 런타임 발견 | 컴파일 시 발견 |

| 경로 개요 | 파악 어려움 | 즉시 확인 가능 |

실제 적용 이점

• 확장성: 50개 이상의 경로가 있는 프로젝트에서 중앙 집중화된 이름들은 신규 개발자 온보딩을 단순화합니다.
• 코드 리뷰: enum을 통한 네비게이션 검수가 용이합니다.
• 테스트: 경로가 아닌 이름으로 라우트를 모킹할 수 있습니다.

프로젝트 시작부터 규칙을 적용하세요:

• 모든 경로에 name을 할당하세요.
• 이름들을 enum/객체에 저장하세요.
• router.push와 <router-link>에서 오직 이름 기반 네비게이션만 사용하세요.

핵심 요약

• name은 URL 구조 리팩토링 시 작동 중단을 방지합니다.
• Enum/상수는 오타를 제거하고 자동 완성을 보장합니다.
• 중앙 집중화는 라우팅 감사와 유지보수를 단순화합니다.
• 이 접근법은 JS/TS에서 작동하며 Vue 3 Router와 호환됩니다.
• 대규모 팀에서 디버깅 시간을 절약합니다.

— Editorial Team