Null 값 처리 제대로 하기

소개

이 프로젝트에서는 query 매개변수에서 null 값을 처리하는 것과 관련된 vue-router-2.7.0 라이브러리의 버그를 수정하는 방법을 배우게 됩니다.

👀 미리보기

🎯 작업

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

• vue-router-2.7.0/src/util/route.js 파일에서 isObjectEqual 함수를 찾아 이해하는 방법.
• null 값을 올바르게 처리하도록 isObjectEqual 함수를 수정하는 방법.
• 수정된 함수로 vue-router-2.7.0 프로젝트를 다시 빌드하고 릴리스하는 방법.
• 이전 오류 메시지가 브라우저 콘솔에 없는지 확인하여 수정 사항을 테스트하는 방법.

🏆 성과

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

• 타사 라이브러리의 버그를 식별하고 수정합니다.
• vue-router-2.7.0 라이브러리를 사용하고 내부 함수를 이해합니다.
• 코드 변경 후 프로젝트를 다시 빌드하고 릴리스합니다.
• 오류 메시지가 브라우저 콘솔에 있는지 확인하여 수정 사항을 테스트합니다.

isObjectEqual 함수 수정

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

├── vue-router-2.7.0
├── vue.min.js
└── index.html

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

다음으로, VM 상단의 "Web 8080"을 열고 수동으로 새로 고친 다음 "test"를 클릭하고 브라우저 콘솔에서 Console 옵션을 엽니다. TypeError: Cannot convert undefined or null to object 및 Uncaught TypeError: Cannot convert undefined or null to object의 두 가지 오류 메시지가 표시됩니다.

이 단계에서는 null 값을 올바르게 처리하도록 vue-router-2.7.0/src/util/route.js 파일의 isObjectEqual 함수를 수정하는 방법을 배우게 됩니다.

1. vue-router-2.7.0/src/util/route.js 파일을 엽니다.
2. isObjectEqual 함수를 찾습니다:

function isObjectEqual(a = {}, b = {}): boolean {
  const aKeys = Object.keys(a);
  const bKeys = Object.keys(b);
  if (aKeys.length !== bKeys.length) {
    return false;
  }
  return aKeys.every((key) => {
    const aVal = a[key];
    const bVal = b[key];
    // check nested equality
    if (typeof aVal === "object" && typeof bVal === "object") {
      return isObjectEqual(aVal, bVal);
    }
    return String(aVal) === String(bVal);
  });
}

3. null 값을 올바르게 처리하도록 함수를 업데이트합니다:

function isObjectEqual(a = {}, b = {}): boolean {
  if (!a || !b) return a === b;
  const aKeys = Object.keys(a);
  const bKeys = Object.keys(b);
  if (aKeys.length !== bKeys.length) {
    return false;
  }
  return aKeys.every((key) => {
    const aVal = a[key];
    const bVal = b[key];
    // check nested equality
    if (typeof aVal === "object" && typeof bVal === "object") {
      return isObjectEqual(aVal, bVal);
    }
    return String(aVal) === String(bVal);
  });
}

변경 사항은 다음과 같습니다:

• a 또는 b가 null 또는 undefined인지 확인하는 조건을 추가했습니다. 둘 중 하나가 null 또는 undefined인 경우 함수는 a === b를 반환합니다.
• 이렇게 하면 함수가 query 매개변수에서 null 값을 올바르게 처리합니다.

프로젝트 재빌드 및 테스트

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

1. 터미널에서 vue-router-2.7.0 디렉토리로 이동합니다.
2. 종속성을 설치하기 위해 npm install 명령을 실행합니다. 이 프로세스는 시간이 걸릴 수 있으므로 잠시 기다려 주십시오. (오랫동안 멈춰 있으면 Ctrl+C를 눌러 프로세스를 종료한 다음 이 명령을 다시 실행하십시오.)
3. 설치가 완료되면 npm run build 명령을 실행하여 프로젝트를 다시 빌드하고 릴리스합니다. 이렇게 하면 수정된 isObjectEqual 함수가 포함된 업데이트된 vue-router-2.7.0 라이브러리가 생성됩니다.
4. 웹 페이지로 돌아가 페이지를 새로 고칩니다.
5. "test"를 클릭하고 Console 탭에서 콘솔을 열어 확인합니다. 위의 오류 메시지가 더 이상 표시되지 않습니다.

오류 메시지가 사라지면 수정이 성공한 것입니다. 프로젝트를 완료했습니다!

요약

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