라우터 쿼리 값 변경

소개

이 프로젝트에서는 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

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

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

   

3. 위의 이미지에 있는 주소를 브라우저에 복사하여 새 창을 열고 주소 표시줄과 페이지의 모양을 확인합니다.

   

Vue-Router 3.4.0 에서 정의되지 않은 쿼리 값 문제 해결

이 단계에서는 vue-router v3.4.0 버전에서 라우터 쿼리의 정의되지 않은 (undefined) 값이 undefined 문자열로 변경되는 문제를 해결하는 방법을 배우게 됩니다.

1. vue-router-3.4.0/src/util/query.js 파일을 엽니다.
2. 파일에서 resolveQuery 함수를 찾습니다.
3. 쿼리에서 정의되지 않은 (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 문자열로 변환되지 않습니다.

수정 사항 테스트

1. 터미널에서 vue-router-3.4.0 디렉토리를 엽니다.

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

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

4. 초기 페이지를 표시하던 브라우저 창을 새로 고칩니다.

5. 페이지의 동작과 주소 표시줄의 URL 을 확인합니다. 쿼리의 정의되지 않은 (undefined) 값은 이제 올바르게 처리되어 빈 문자열로 표시되어야 합니다.

   

축하합니다! vue-router 3.4.0 버전에서 정의되지 않은 쿼리 값 문제를 성공적으로 해결했습니다.

요약

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