pathMatch 로 생성된 경고 제거

소개

이 프로젝트에서는 vue-router 3.1.3 라이브러리에서 경고 문제를 해결하는 방법을 배우게 됩니다. vue-router 는 Vue.js 애플리케이션을 위한 인기 있는 라우팅 라이브러리이며, 3.1.3 버전에는 pathMatch 매개변수가 빈 값일 때 경고를 생성하는 버그가 있었습니다. 단계별 가이드를 따르면 문제를 찾아 코드를 수정하고 라이브러리를 다시 빌드하여 경고를 해결할 수 있습니다.

🎯 작업

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

• vue-router 3.1.3 라이브러리의 params.js 파일에서 문제를 식별하는 방법
• 경고를 제거하기 위해 코드를 수정하는 방법
• 수정 사항을 적용하여 vue-router 3.1.3 라이브러리를 다시 빌드하는 방법
• 수정된 버전을 테스트하여 경고가 더 이상 표시되지 않는지 확인하는 방법

🏆 성과

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

• 타사 라이브러리의 문제를 해결하고 수정할 수 있습니다.
• 종속성을 최신 상태로 유지하고 알려진 버그를 수정하는 것의 중요성을 이해할 수 있습니다.
• 코드 변경 후 라이브러리를 다시 빌드하는 프로세스를 시연할 수 있습니다.
• 라이브러리의 기능이 예상대로 작동하는지 테스트할 수 있습니다.

Vue-Router 3.1.3 경고 수정

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

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

프로젝트를 실행하려면 WebIDE 의 오른쪽 하단 모서리에 있는 Go Live 버튼을 클릭하십시오.

다음으로, VM 상단의 "Web 8080"을 열고 수동으로 새로 고친 다음 "/nope/"를 클릭하고 "test"를 클릭한 후 브라우저 콘솔에서 Console 옵션을 엽니다. 다음 메시지가 표시됩니다.

[vue-router] missing param for named route "NotFound": Expected "0" to be defined

이 단계에서는 vue-router 3.1.3 코드의 pathMatch 문제로 인해 생성된 경고를 수정하는 방법을 배우게 됩니다.

1. vue-router-3.1.3/src/util/params.js 파일을 엽니다.
2. 경고를 발생시키는 28 번째 줄의 코드를 찾습니다.

if (process.env.NODE_ENV !== "production") {
  warn(false, `missing param for ${routeMsg}: ${e.message}`);
}

3. 경고를 제거하기 위해 warn 함수 호출을 주석 처리합니다.

if (process.env.NODE_ENV !== "production") {
  // warn(false, `missing param for ${routeMsg}: ${e.message}`)
}

이렇게 하면 콘솔에 경고가 표시되지 않습니다.

Vue-Router 3.1.3 프로젝트 재빌드 및 테스트

이 단계에서는 경고를 수정한 후 vue-router 3.1.3 프로젝트를 재빌드하고 테스트합니다.

1. 터미널을 열고 vue-router-3.1.3 디렉토리로 이동합니다.
2. npm install 명령을 실행하여 종속성을 설치합니다. 이 프로세스는 시간이 걸릴 수 있으므로 잠시 기다려 주십시오. (오랫동안 멈춰 있으면 Ctrl+C를 눌러 프로세스를 종료한 다음 이 명령을 다시 실행하십시오.)
3. 모든 종속성이 성공적으로 설치된 후 npm run build 명령을 실행하여 프로젝트를 재빌드하고 릴리스합니다. 이렇게 하면 경고 수정 사항이 포함된 vue-router 3.1.3 라이브러리의 새로운 빌드가 생성됩니다.
4. 브라우저에서 Web 8080 페이지를 엽니다.
5. "/nope/" 링크를 클릭한 다음 "test" 링크를 클릭합니다.
6. 브라우저 콘솔을 열고 경고 메시지가 더 이상 표시되지 않는지 확인합니다.

축하합니다! vue-router 3.1.3 라이브러리에서 경고 문제를 성공적으로 해결했습니다.

요약

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