소개
이 프로젝트에서는 vue-router v3.4.0 버전에서 라우터 쿼리의 정의되지 않은 (undefined) 값이 undefined 문자열로 변경되는 문제를 해결하는 방법을 배우게 됩니다. vue-router 라이브러리의 query.js 파일에 있는 resolveQuery 함수를 수정하여 이 문제를 해결할 것입니다.
👀 미리보기
🎯 작업
이 프로젝트에서 다음을 배우게 됩니다:
query.js파일에서resolveQuery함수를 찾아 이해합니다.- 쿼리에서 정의되지 않은 (undefined) 값을 올바르게 처리하도록
resolveQuery함수를 수정합니다. - 수정 사항을 적용하여 vue-router 3.4.0 프로젝트를 다시 빌드합니다.
- 쿼리에서 정의되지 않은 (undefined) 값이 이제 빈 문자열로 올바르게 표시되는지 확인하기 위해 수정 사항을 테스트합니다.
🏆 성과
이 프로젝트를 완료하면 다음을 수행할 수 있습니다:
- 타사 라이브러리의 문제를 식별하고 수정합니다.
- 수정 사항을 적용하기 위해 프로젝트를 수정하고 다시 빌드하는 기술을 적용합니다.
- 원하는 동작이 달성되었는지 확인하기 위해 변경 사항을 철저히 테스트하는 것의 중요성을 이해합니다.
프로젝트 구조 설정
시작하려면 다음과 같이 왼쪽에 있는 파일의 디렉토리 구조를 살펴보세요.
├── vue-router-3.4.0
├── vue.js
└── index.html
WebIDE 의 오른쪽 하단 모서리에 있는 Go Live 버튼을 클릭하여 프로젝트를 실행합니다.
VM 상단에서 "Web 8080"을 열고 수동으로 새로 고칩니다. 결과는 다음과 같아야 합니다.
위의 이미지에 있는 주소를 브라우저에 복사하여 새 창을 열고 주소 표시줄과 페이지의 모양을 확인합니다.
Vue-Router 3.4.0 에서 정의되지 않은 쿼리 값 문제 해결
이 단계에서는 vue-router v3.4.0 버전에서 라우터 쿼리의 정의되지 않은 (undefined) 값이 undefined 문자열로 변경되는 문제를 해결하는 방법을 배우게 됩니다.
vue-router-3.4.0/src/util/query.js파일을 엽니다.- 파일에서
resolveQuery함수를 찾습니다. - 쿼리에서 정의되지 않은 (undefined) 값을 처리하도록
resolveQuery함수를 업데이트합니다. 코드를 다음과 같이 수정합니다.
export function resolveQuery(
query: ?string,
extraQuery: Dictionary<string> = {},
_parseQuery: ?Function
): Dictionary<string> {
// ...
// TODO
for (const key in extraQuery) {
const value = extraQuery[key];
parsedQuery[key] = Array.isArray(value)
? value.map((v) => (!v ? v : "" + v))
: !value
? value
: "" + value;
}
return parsedQuery;
}
주요 변경 사항은 다음과 같습니다.
parsedQuery[key] = ...할당에서value가undefined인지 확인합니다. 그렇다면undefined값 대신 빈 문자열''을 할당합니다.- 배열 값의 경우 개별 요소가
undefined인지 확인하고 빈 문자열로 바꿉니다.
이렇게 하면 쿼리에서 정의되지 않은 (undefined) 값이 제대로 처리되고 undefined 문자열로 변환되지 않습니다.
수정 사항 테스트
터미널에서
vue-router-3.4.0디렉토리를 엽니다.npm install명령을 실행하여 종속성을 설치합니다. 이 과정은 시간이 걸릴 수 있으니 잠시 기다려 주십시오. (오랫동안 멈춰 있으면Ctrl+C를 눌러 프로세스를 종료한 다음 이 명령을 다시 실행하십시오.)모든 종속성이 성공적으로 설치되면
npm run build명령을 실행하여 프로젝트를 다시 빌드하고 릴리스합니다.초기 페이지를 표시하던 브라우저 창을 새로 고칩니다.
페이지의 동작과 주소 표시줄의 URL 을 확인합니다. 쿼리의 정의되지 않은 (undefined) 값은 이제 올바르게 처리되어 빈 문자열로 표시되어야 합니다.
축하합니다! vue-router 3.4.0 버전에서 정의되지 않은 쿼리 값 문제를 성공적으로 해결했습니다.
요약
축하합니다! 이 프로젝트를 완료했습니다. LabEx 에서 더 많은 랩을 연습하여 기술을 향상시킬 수 있습니다.
