Vue Router 버그 수정 | 프로그래밍 튜토리얼

소개

이 프로젝트에서는 cleanPath 함수를 수정하여 vue-router 라이브러리의 버그를 수정하는 방법을 배우게 됩니다. vue-router 라이브러리는 Vue.js 애플리케이션을 위한 인기 있는 라우팅 솔루션이며, 특히 여러 슬래시로 시작하는 경로와 같은 엣지 케이스 (edge cases) 에 대해 올바르게 작동하는지 확인하는 것이 중요합니다.

👀 미리보기

vue router bug fix demo

🎯 과제

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

vue-router 라이브러리의 cleanPath 함수와 관련된 문제 이해
프로젝트에 필요한 종속성 (dependencies) 설치
문제를 해결하기 위해 cleanPath 함수를 찾아 수정
업데이트된 cleanPath 함수로 프로젝트를 다시 빌드
수정 사항을 테스트하여 문제가 해결되었는지 확인

🏆 성과

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

타사 라이브러리의 문제를 식별하고 진단
버그를 수정하기 위해 타사 라이브러리의 코드를 수정하고 업데이트
업데이트된 코드로 프로젝트를 다시 빌드하고 릴리스
수정 사항을 테스트하여 문제가 해결되었는지 확인

프로젝트 구조 설정

이 단계에서는 프로젝트 구조를 설정하고 vue-router 라이브러리의 문제와 이를 해결하는 방법에 대해 배우게 됩니다.

vue-router 라이브러리 버전 3.5.2 에는 여러 슬래시 (///) 로 시작하는 경로가 실제로 다른 도메인으로 리디렉션될 수 있는 버그가 있습니다. 이는 라이브러리의 cleanPath 함수가 여러 슬래시를 모두 바꾸는 대신 두 개의 슬래시만 바꾸기 때문입니다.

이 문제를 해결하려면 vue-router-3.5.2/src/util/path.js 파일에서 cleanPath 함수를 수정해야 합니다.

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

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

WebIDE 의 오른쪽 하단 모서리에 있는 Go Live 버튼을 클릭하여 프로젝트를 실행합니다.
VM 상단의 "Web 8080"을 열고 수동으로 새로 고칩니다. 효과는 다음과 같아야 합니다:
위의 이미지에 있는 주소를 복사하여 브라우저에서 새 창을 열고 "Go to Foo" 버튼을 클릭하면 페이지가 Google 페이지로 이동합니다.

cleanPath 함수 수정

vue-router-3.5.2/src/util/path.js 파일을 엽니다.

cleanPath 함수를 찾습니다:

export function cleanPath(path: string): string {
  return path.replace(/\/\//g, "/");
}

cleanPath 함수를 업데이트하여 여러 슬래시를 모두 단일 슬래시로 바꿉니다:
```
export function cleanPath(path: string): string {
  return path.replace(/\/+/g, '/');
}
```
/\/+/g 정규 표현식은 하나 이상의 연속된 슬래시를 일치시키고 이를 단일 슬래시로 바꿉니다.

프로젝트 재빌드 및 테스트

터미널에서 vue-router-3.5.2 디렉토리로 이동합니다.
npm install 명령을 실행하여 종속성을 설치합니다. 이 과정은 시간이 걸릴 수 있으니 잠시 기다려 주십시오. (오랫동안 멈춰 있으면 Ctrl+C를 눌러 프로세스를 종료한 다음 이 명령을 다시 실행하십시오.)
모든 종속성이 성공적으로 설치된 후, npm run build 명령을 실행하여 업데이트된 cleanPath 함수로 프로젝트를 재빌드하고 릴리스합니다.
웹 페이지로 돌아가 페이지를 새로 고칩니다.
"Go to Foo" 버튼을 클릭하면 페이지가 더 이상 Google 페이지로 리디렉션되지 않고 로컬 애플리케이션에 유지되는 것을 확인할 수 있습니다.

축하합니다! cleanPath 함수를 업데이트하여 vue-router 라이브러리의 문제를 성공적으로 해결했습니다.

요약

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

Vue Router 의 cleanPath 함수 수정

소개