Vue Router 의 cleanPath 함수 수정

소개

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

👀 미리보기

🎯 과제

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

• 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

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

2. VM 상단의 "Web 8080"을 열고 수동으로 새로 고칩니다. 효과는 다음과 같아야 합니다:

   

3. 위의 이미지에 있는 주소를 복사하여 브라우저에서 새 창을 열고 "Go to Foo" 버튼을 클릭하면 페이지가 Google 페이지로 이동합니다.

   

cleanPath 함수 수정

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

2. cleanPath 함수를 찾습니다:

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

3. cleanPath 함수를 업데이트하여 여러 슬래시를 모두 단일 슬래시로 바꿉니다:

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

   /\/+/g 정규 표현식은 하나 이상의 연속된 슬래시를 일치시키고 이를 단일 슬래시로 바꿉니다.

프로젝트 재빌드 및 테스트

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

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

3. 모든 종속성이 성공적으로 설치된 후, npm run build 명령을 실행하여 업데이트된 cleanPath 함수로 프로젝트를 재빌드하고 릴리스합니다.

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

5. "Go to Foo" 버튼을 클릭하면 페이지가 더 이상 Google 페이지로 리디렉션되지 않고 로컬 애플리케이션에 유지되는 것을 확인할 수 있습니다.

   

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

요약

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