코드를 복사하여 붙여넣기만 하지 말고 재사용 가능하게 만드세요

배경

인터넷에서 코드를 복사하여 붙여넣는 것은 지극히 정상적인 일입니다. 실제로 버그, 스타일 문제, 일반 CSS의 세련된 페이지 로더 필요성 등 우리가 직면한 대부분의 코딩 문제는 온라인에서 해결 방법을 찾을 수 있는 경우가 많습니다. 우리는 답변을 검색하고 인터넷은 풍부한 코드 조각과 가이드를 제공합니다. 물론 이러한 솔루션이 우리의 요구 사항에 잘 맞는지 필터링하고 검증하는 것이 중요합니다.

코드를 작성할 때 코드를 복사하고 붙여넣는 편리함에 휩쓸리기 쉽습니다. 하지만 시간이 지나면서 코드가 지저분해지고 유지 관리가 어려워진다는 사실을 깨닫게 될 수도 있습니다. 패턴은 종종 다음과 같습니다:

1. 문제가 발생했습니다.
2. 온라인으로 솔루션을 검색해 보세요.
3. 찾은 코드를 복사하세요.
4. 코드베이스에 붙여넣으세요.
5. 계속하세요.

앞서 언급했듯이 결국 동일한 문제에 다시 직면하게 될 가능성이 높습니다. 이 주기는 반복되며 결국 솔루션을 진정으로 통합하거나 이해하지 못한 채 솔루션을 다시 방문하고 복사하게 됩니다(다른 사람들이 직면한 과제는 이제 우리 자신의 문제가 되었습니다 ?). 따라서 1단계: 문제 발생으로 돌아가서 순환이 계속됩니다.

해결책

이런 지옥을 피하려면 DRY 원칙이 해결책일 수도 있습니다. 'Don't Repeat Yourself'를 의미하는 DRY 원칙은 코드 중복과 반복적인 패턴을 줄이는 것을 목표로 하는 소프트웨어 개발 원칙입니다. 코드에 DRY 원칙을 적용하면 반복적인 코드와 논리가 모듈식 및 참조 가능한 코드로 대체됩니다. 또는 이 문서에서는 동일한 문제에 대해 5단계에서 1단계로 다시 돌아가는 것을 방지합니다.

다음 예를 살펴보겠습니다.

반복을 피하기 위해 함수 사용하기

반복되는 코드를 해결해주는 기능. 함수를 작성했지만 코드베이스에 여전히 반복적인 코드가 남아 있다면 그것은 확실히 잘못된 것입니다.

유사한 로직 블록이 반복되는 경우 이를 재사용 가능한 함수로 리팩터링하세요.

// Before

function calculateAreaRectangle(width: number, height: number): number {
    return width * height;
}

function calculateAreaTriangle(base: number, height: number): number {
    return 0.5 * base * height;
}

면적 계산을 위한 범용 함수를 만듭니다.

// after

function calculateArea(shape: "rectangle" | "triangle", dimension1: number, dimension2: number): number {
    if (shape === "rectangle") return dimension1 * dimension2;
    if (shape === "triangle") return 0.5 * dimension1 * dimension2;
    throw new Error("Invalid shape");
}

// Usage
const rectangleArea = calculateArea("rectangle", 5, 10);
const triangleArea = calculateArea("triangle", 5, 10);

유틸리티 기능 생성

아직도 함수에 대해 이야기하고 있습니다. 유틸리티 함수를 만드는 것은 깔끔한 코드를 얻는 방법 중 하나입니다. 예를 들어 코드의 여러 부분이 문자열을 제목 케이스로 변환하는 경우 이를 유틸리티 함수로 추출합니다.

// before

let title1 = "hello world".split(' ').map(word => word[0].toUpperCase() + word.slice(1)).join(' ');
let title2 = "good morning".split(' ').map(word => word[0].toUpperCase() + word.slice(1)).join(' ');

이 문제를 처리하는 함수를 만드는 것을 고려해 보세요.

// after
function toTitleCase(input: string): string {
    return input.split(' ').map(word => word[0].toUpperCase() + word.slice(1)).join(' ');
}

let title1 = toTitleCase("hello world");
let title2 = toTitleCase("good morning");

공통 값에 대한 상수

같은 엔드포인트를 가진 API를 몇 번이나 호출하시나요? 나는 그것이 두 번 이상이라고 믿습니다.

URL이나 구성 옵션과 같은 특정 값이 앱 전체에서 사용되는 경우 해당 값을 상수로 한 번 정의하세요.

// Before

function calculateAreaRectangle(width: number, height: number): number {
    return width * height;
}

function calculateAreaTriangle(base: number, height: number): number {
    return 0.5 * base * height;
}

백엔드가 URL을 변경하면 어떻게 되나요? 여전히 위의 예와 같이 이 코드를 작성한다면 URL이 포함된 모든 코드가 변경됩니다. 엔드포인트를 상수로 이동하면 한 번 변경할 수 있고 모든 API 호출은 사용자가 만든 상수를 따르기 때문에 계속 작동하는 것이 현명합니다.

// after

function calculateArea(shape: "rectangle" | "triangle", dimension1: number, dimension2: number): number {
    if (shape === "rectangle") return dimension1 * dimension2;
    if (shape === "triangle") return 0.5 * dimension1 * dimension2;
    throw new Error("Invalid shape");
}

// Usage
const rectangleArea = calculateArea("rectangle", 5, 10);
const triangleArea = calculateArea("triangle", 5, 10);

다른 아이디어가 있나요?

이러한 예는 코드를 정확하게 유지하고 반복적인 코드를 계속해서 유지하지 않는 것이 얼마나 중요한지 설명하기 위한 것입니다. 여러분의 생각을 아래 댓글창에 자유롭게 공유해주세요.

요약

DRY(Don't Repeat Yourself) 원칙은 개발자가 가능한 한 코드를 재사용하여 중복을 피하도록 권장하는 기본적인 코딩 방식입니다. DRY 원칙을 적용하면 업데이트가 필요할 때 변경해야 하는 위치 수를 최소화하므로 코드베이스 전반에 걸쳐 유지 관리성, 가독성 및 효율성을 크게 향상시킬 수 있습니다. DRY 원칙은 재사용 가능하고 유지 관리 가능한 코드를 만드는 것입니다. 함수, 제네릭, 인터페이스, 열거형과 같은 TypeScript의 기능을 활용하면 코드베이스를 깔끔하게 유지하고 중복성을 줄일 수 있습니다.

위 내용은 코드를 복사하여 붙여넣기만 하지 말고 재사용 가능하게 만드세요의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!