Vue Router 에 사용 중단 경고 추가하기

소개

이 프로젝트에서는 vue-router-3.4.9 버전의 router.addRoutes() 메서드에 사용 중단 경고를 추가하는 방법을 배우게 됩니다. 이는 Vue Router v3.5.0 에서 router.addRoutes() 메서드가 사용 중단되었고 Vue Router 4 에서 제거되었기 때문에 중요한 작업입니다. 사용 중단 경고를 추가함으로써, 이전 버전의 Vue Router 를 사용하는 개발자들이 다가오는 변경 사항을 인지하고 새로운 router.addRoute() 메서드로 마이그레이션할 수 있도록 도울 수 있습니다.

👀 미리보기

🎯 작업

이 프로젝트에서는 다음을 배우게 됩니다:

• vue-router-3.4.9/src/index.js 파일에서 addRoutes 메서드 찾기
• addRoutes 메서드에 사용 중단 경고 추가
• 업데이트된 vue-router-3.4.9 패키지 재빌드 및 게시
• 애플리케이션 재시작 및 브라우저 콘솔에서 경고 메시지 확인

🏆 성과

이 프로젝트를 완료하면 다음을 수행할 수 있습니다:

• 라이브러리에서 사용 중단된 메서드 식별 및 수정
• 개발자가 최신 버전으로 전환하는 데 도움을 주기 위해 사용 중단 경고를 제공하는 것의 중요성 이해
• 업데이트된 라이브러리 버전 재빌드 및 게시 프로세스 학습
• 실행 중인 애플리케이션에서 변경 사항의 효과 관찰

router.addRoutes() 에 사용 중단 경고 추가

시작하려면, 다음과 같이 왼쪽에 있는 파일의 디렉토리 구조를 살펴보세요:

├── vue-router-3.4.9
├── vue.js
└── index.html

WebIDE 의 오른쪽 하단 모서리에 있는 Go Live 버튼을 클릭하여 프로젝트를 실행합니다.

다음으로, VM 상단의 "Web 8080"을 열고 수동으로 새로 고침하면 페이지가 표시됩니다.

브라우저 콘솔을 열고 출력을 확인합니다. 경고 메시지가 없는 다음과 같은 모습이어야 합니다.

이 단계에서는 vue-router-3.4.9 버전의 router.addRoutes() 메서드에 사용 중단 경고를 추가하는 방법을 배우게 됩니다.

1. vue-router-3.4.9/src/index.js 파일을 엽니다.

2. VueRouter 클래스의 addRoutes 메서드를 찾습니다.

3. 메서드에 다음 경고 메시지를 추가합니다:

   addRoutes(routes: Array<RouteConfig>) {
     console.warn("router.addRoutes() is deprecated and has been removed in Vue Router 4. Use router.addRoute() instead.");
     this.matcher.addRoutes(routes);
     if (this.history.current !== START) {
       this.history.transitionTo(this.history.getCurrentLocation());
     }
   }
   

   이렇게 하면 addRoutes() 메서드가 호출될 때 콘솔에 경고 메시지가 출력됩니다.

애플리케이션 재시작 후 경고 확인

이 단계에서는 애플리케이션을 재시작하고 브라우저 콘솔에서 경고 메시지를 관찰합니다.

1. 터미널에서 vue-router-3.4.9 디렉토리로 이동합니다.

2. npm install 명령을 실행하여 종속성을 설치합니다. 이 프로세스는 시간이 걸릴 수 있으니 잠시 기다려 주십시오. (오랫동안 멈춰 있으면 Ctrl+C를 눌러 프로세스를 종료한 다음 이 명령을 다시 실행하십시오.)

3. 모든 종속성이 성공적으로 설치되면 npm run build 명령을 실행하여 프로젝트를 다시 빌드하고 릴리스합니다.

4. 웹 페이지로 돌아가 페이지를 새로 고칩니다.

5. 브라우저 콘솔을 열고 출력을 관찰합니다. 콘솔에 다음 경고 메시지가 출력되어야 합니다:

   router.addRoutes() is deprecated and has been removed in Vue Router 4. Use router.addRoute() instead.
   

   이는 사용 중단 경고가 router.addRoutes() 메서드에 성공적으로 추가되었음을 확인합니다.

축하합니다! vue-router-3.4.9 버전의 router.addRoutes() 메서드에 사용 중단 경고를 추가하여 프로젝트를 완료했습니다.

요약

축하합니다! 이 프로젝트를 완료했습니다. LabEx 에서 더 많은 랩을 연습하여 기술을 향상시킬 수 있습니다.