ESLint를 사용하여 JavaScript 및 React 프로젝트에서 안전하지 않은 호출 방지

ESLint를 사용하여 JavaScript 및 React 프로젝트에서 안전하지 않은 호출 방지

?✨ 최신 JavaScript 및 React 애플리케이션에서는 정의되지 않은 값 또는 null 값에 대한 속성에 액세스하거나 정의되지 않은 배열 또는 객체에 대한 메서드를 호출하여 런타임 오류가 발생하는 것이 일반적입니다. 이러한 문제는 사용자 경험을 방해하고 디버깅을 악몽으로 만들 수 있습니다. 이 기사에서는 일반적인 문제를 식별하고 이를 효과적으로 완화할 수 있는 ESLint 구성을 제공합니다. ??

?✨ React나 React Native 프로젝트에서는 TypeScript를 사용하지 않기 때문에 안전한 코드 작성을 잊어버릴 때가 있습니다. 이러한 안전하지 않은 코드는 React Native 앱 충돌, 사용자 좌절, 유지 관리 복잡 등 생산 과정에서 많은 문제를 일으킬 수 있습니다. 이러한 일반적인 문제와 해결 방법을 살펴보겠습니다. ???

안전하지 않은 통화와 관련된 일반적인 문제

1. 정의되지 않음 또는 null의 속성에 액세스 ??✨

문제:

정의되지 않았거나 null인 개체의 속성에 액세스하면 런타임 오류가 발생합니다.

const user = undefined;
console.log(user.name); // ❌ Runtime Error: Cannot read property 'name' of undefined

해결책:

• 해결책 1: 선택적 연결(?.)을 사용하세요.

const name = user?.name;

• 해결책 2: 기본 대체를 사용합니다.

const name = user ? user.name : 'Default Name';

• 해결책 3: 액세스하기 전에 초기화를 확인하세요.

const user = { name: 'Default Name' };

2. 정의되지 않거나 null에 대한 메서드 호출 ✋??

문제:

정의되지 않은 배열에 대해 .map() 또는 .filter()와 같은 메서드를 호출하면 오류가 발생합니다.

const items = undefined;
items.map((item) => console.log(item)); // ❌ Runtime Error: Cannot read property 'map' of undefined

해결책:

• 해결책 1: 변수가 배열인지 확인하세요.

if (Array.isArray(items)) {
  items.map(item => console.log(item));
}

• 해결책 2: 기본 배열을 제공합니다.

const items = someValue || [];
items.map(item => console.log(item));

• 해결책 3: null 병합 연산자(??)를 사용합니다.

const items = possibleItems ?? [];

3. 정의되지 않은 함수 호출 ⚙️⚠️?

문제:

정의되지 않은 함수 호출 시도:

const handler = undefined;
handler(); // ❌ Runtime Error: handler is not a function

해결책:

• 해결책 1: 호출하기 전에 존재 여부를 확인하세요.

if (typeof handler === 'function') {
  handler();
}

• 해결책 2: 무작동 기본 기능을 할당합니다.

const handler = passedHandler || (() => {});

4. 정의되지 않았거나 Null 객체를 구조분해 ?❌?

문제:

정의되지 않은 객체의 속성을 파괴하면 오류가 발생합니다.

const user = undefined;
console.log(user.name); // ❌ Runtime Error: Cannot read property 'name' of undefined

해결책:

• 해결책 1: 기본값으로 선택적 연결을 사용하세요.

const name = user?.name;

• 해결책 2: 구조화 해제하기 전에 유효성을 검사하세요.

const name = user ? user.name : 'Default Name';

5. 존재하지 않는 배열 요소에 액세스 ???

문제:

정의되지 않은 배열의 요소에 액세스하면 오류가 발생합니다.

const user = { name: 'Default Name' };

해결책:

• 해결책 1: 기본 대체를 제공합니다.

const items = undefined;
items.map((item) => console.log(item)); // ❌ Runtime Error: Cannot read property 'map' of undefined

• 해결책 2: 어레이를 올바르게 초기화합니다.

if (Array.isArray(items)) {
  items.map(item => console.log(item));
}

6. 잘못된 배열/함수 사용 ??

문제:

정의되지 않은 값이나 객체에 .map() 또는 .filter()와 같은 배열 메서드 사용:

const items = someValue || [];
items.map(item => console.log(item));

해결책:

• 해결책 1: 배열 함수에 대한 입력을 항상 검증하세요.

const items = possibleItems ?? [];

• 해결책 2: 입력이 유효하지 않으면 안전한 결과를 반환합니다.

const handler = undefined;
handler(); // ❌ Runtime Error: handler is not a function

7. 조건부 확인이 부족합니까 ??

문제:

조건을 엄격하게 검증하지 못하면 잘못된 값에 의존하는 등의 버그가 발생할 수 있습니다. 예를 들어 부울을 기대하는 조건이 정의되지 않음 또는 0:
과 같은 다른 유형을 잘못 평가할 수 있는 경우

if (typeof handler === 'function') {
  handler();
}

해결책:

• 해결책 1: 엄격한 동등 비교를 사용합니다.

const handler = passedHandler || (() => {});

• 해결책 2: 의도한 동작에 대해 명시적으로 값을 강제합니다.

const obj = undefined;
const { name } = obj; // ❌ Runtime Error: Cannot destructure property 'name' of undefined

• 해결책 3: 코드에서 명시적 조건을 정의합니다.

const { name = 'Default Name' } = user || {};

안전하지 않은 호출을 피하기 위해 ESLint를 사용 ??✅

개발 중에 이러한 문제를 파악하기 위해 특정 규칙으로 ESLint를 활용할 수 있습니다. 다음은 안전하지 않은 호출에 플래그를 지정하고 수정 사항을 제안하는 ESLint 구성입니다. ?️??

ESLint 구성 ???️

.eslintrc.js 또는 ESLint 구성 파일에 다음 규칙을 추가하세요.

const user = undefined;
console.log(user.name); // ❌ Runtime Error: Cannot read property 'name' of undefined

규칙 설명 ?⚙️?

1. @typescript-eslint/no-unnecessary-condition: 불필요한 조건이나 처리되지 않은 잠재적인 정의되지 않은 값 또는 null 값을 플래그 지정합니다. ⚠️
2. no-unused-expressions: 명시적으로 필요하지 않는 한 someObject && someObject.doSomething과 같은 단락 논리를 방지합니다. ?
3. @typescript-eslint/no-unsafe-call: 비함수에 대한 안전하지 않은 함수 호출을 방지합니다. ❌
4. @typescript-eslint/no-unsafe-member-access: 플래그는 잠재적으로 정의되지 않은 값의 속성에 액세스하려고 시도합니다. ✋
5. 일관된 반환: 유효하지 않거나 정의되지 않은 값이 반환되는 것을 방지하기 위해 함수에 일관된 반환 유형을 적용합니다. ?
6. @typescript-eslint/strict-boolean-expressions: 암시적 강제를 방지하여 조건식을 강화합니다. ?
7. @typescript-eslint/no-non-null-assertion: 안전하지 않은 ! null/정의되지 않은 검사를 우회하는 데 사용되는 연산자입니다. ?

필수 종속성 설치 ???

이러한 규칙을 활성화하려면 필요한 ESLint 플러그인과 파서가 설치되어 있는지 확인하세요.

const name = user?.name;

VSCode와 ESLint 통합 ?️??

1. ESLint 확장 설치:

• VSCode 마켓플레이스에서 "ESLint"를 검색하여 설치하세요. ✨

2. 자동 수정 활성화:

settings.json에 다음을 추가하세요.

const name = user ? user.name : 'Default Name';

3. ESLint 실행:

ESLint를 실행하려면 npm 스크립트를 추가하세요.

const user = { name: 'Default Name' };

그런 다음 npm run lint를 실행하여 문제를 파악하세요. ?

결론 ???

위의 ESLint 규칙과 관행을 구현하면 런타임 오류가 발생하기 전에 안전하지 않은 호출을 포착하고 수정할 수 있습니다. ?? 이 접근 방식은 JavaScript 및 React 프로젝트의 안정성과 유지 관리성을 향상시킵니다. ?⚙️✨

위 내용은 ESLint를 사용하여 JavaScript 및 React 프로젝트에서 안전하지 않은 호출 방지의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!