깔끔하고 세련된 디자인을 위한 코드 리팩토링 필수 가이드

빠르게 변화하는 소프트웨어 개발 세계에서는 깔끔하고 유지 관리가 가능한 코드를 작성하는 것이 필수적입니다. Bob 삼촌의 "Clean Code"에서 영감을 받아 코드베이스를 향상시키는 5가지 중요한 리팩토링 원칙을 살펴보겠습니다. 각 원칙에는 이러한 개선 사항을 구현하는 방법을 보여주는 TypeScript 코드 예제가 함께 제공됩니다. 함께 코드를 개선해 봅시다!

1️⃣ 큰 기능은 거부하세요

설명: Bob 삼촌은 기능을 간결하게 유지하라고 조언합니다. 이상적으로는 20줄 미만입니다. 대규모 기능은 이해, 테스트, 유지 관리가 어려울 수 있습니다. 기능을 더 작고 관리하기 쉬운 부분으로 나누면 가독성이 향상되고 복잡성이 줄어듭니다.

리팩토링 전:

import fs from 'fs';

function processData(data: string[]): void {
    // Step 1: Validate data
    if (!Array.isArray(data)) {
        throw new Error("Input must be an array");
    }

    // Step 2: Clean data
    const cleanedData = data.map(item => item.trim()).filter(item => item !== '');

    // Step 3: Process data
    const result: string[] = [];
    for (const item of cleanedData) {
        if (item.length > 5) {
            result.push(item.toUpperCase());
        } else {
            result.push(item.toLowerCase());
        }
    }

    // Step 4: Save results
    fs.writeFileSync('results.txt', result.join('\n'));
}

리팩토링 후:

import fs from 'fs';

function validateData(data: any): void {
    if (!Array.isArray(data)) {
        throw new Error("Input must be an array");
    }
}

function cleanData(data: string[]): string[] {
    return data.map(item => item.trim()).filter(item => item !== '');
}

function processItem(item: string): string {
    return item.length > 5 ? item.toUpperCase() : item.toLowerCase();
}

function saveResults(results: string[], filename: string = 'results.txt'): void {
    fs.writeFileSync(filename, results.join('\n'));
}

function processData(data: string[]): void {
    validateData(data);
    const cleanedData = cleanData(data);
    const results = cleanedData.map(processItem);
    saveResults(results);
}

2️⃣ 단일 책임을 받아들인다

설명: 각 클래스나 메서드에는 단일 책임이 있어야 합니다. 이는 각 클래스나 메서드가 한 가지 일을 잘 수행해야 한다는 의미입니다. 이 원칙을 준수하면 코드가 더욱 모듈화되고 테스트가 쉬워지며 변경이 더욱 유연해집니다.

리팩토링 전:

class User {
    constructor(public username: string, public email: string) {}

    sendEmail(message: string): void {
        // Code to send an email
        console.log(`Sending email to ${this.email}: ${message}`);
    }

    saveToDatabase(): void {
        // Code to save user to the database
        console.log(`Saving ${this.username} to the database`);
    }
}

리팩토링 후:

class User {
    constructor(public username: string, public email: string) {}
}

class EmailService {
    sendEmail(email: string, message: string): void {
        // Code to send an email
        console.log(`Sending email to ${email}: ${message}`);
    }
}

class UserRepository {
    save(user: User): void {
        // Code to save user to the database
        console.log(`Saving ${user.username} to the database`);
    }
}

3️⃣ 매개변수 전달 단순화

설명: 함수가 허용하는 매개변수 수를 제한하면 이해하고 사용하기가 더 쉬워집니다. 매개변수가 많은 복잡한 함수는 혼란스럽고 오류가 발생하기 쉽습니다. 객체나 데이터 구조를 사용하여 관련 매개변수를 그룹화할 수 있습니다.

리팩토링 전:

function createUser(username: string, email: string, password: string, age: number, address: string): void {
    // Code to create a user
    console.log(`Creating user: ${username}, ${email}, ${password}, ${age}, ${address}`);
}

리팩토링 후:

interface User {
    username: string;
    email: string;
    password: string;
    age: number;
    address: string;
}

function createUser(user: User): void {
    // Code to create a user
    console.log(`Creating user: ${user.username}, ${user.email}, ${user.password}, ${user.age}, ${user.address}`);
}

4️⃣ 매직넘버를 피하세요

설명: 매직넘버는 설명 없이 코드에서 직접 사용되는 리터럴 숫자입니다. 코드를 이해하고 유지 관리하기가 더 어려워질 수 있습니다. 매직 넘버를 명명된 상수로 바꾸면 가독성이 향상되고 향후 변경이 더 쉬워집니다.

리팩토링 전:

function calculateDiscountedPrice(price: number): number {
    // Apply a discount of 15%
    return price * 0.85;
}

function calculateShippingCost(weight: number): number {
    // Shipping cost per kilogram
    return weight * 5;
}

리팩토링 후:

const DISCOUNT_RATE = 0.15;
const SHIPPING_COST_PER_KG = 5;

function calculateDiscountedPrice(price: number): number {
    // Apply a discount
    return price * (1 - DISCOUNT_RATE);
}

function calculateShippingCost(weight: number): number {
    // Shipping cost per kilogram
    return weight * SHIPPING_COST_PER_KG;
}

5️⃣ 의미가 있는 변수 이름 지정

설명: 의미 있는 변수 이름을 사용하면 코드가 자체적으로 문서화되고 이해하기 쉬워집니다. 한 글자로 된 이름이나 비밀스러운 이름은 피하세요. 대신 변수의 목적과 사용법을 명확하게 전달하는 이름을 선택하세요.

리팩토링 전:

function calculate(u: number, v: number): number {
    const r = u + v;
    const p = r * 2;
    return p;
}

리팩토링 후:

function calculateTotalCost(baseCost: number, additionalFees: number): number {
    const totalCost = baseCost + additionalFees;
    return totalCost;
}

결론

이러한 리팩토링 원칙을 TypeScript 코드에 적용하면 코드의 명확성, 유지 관리 용이성 및 전반적인 품질이 크게 향상됩니다. 클린 코드 관행은 효과적인 개발과 협업을 위해 필수적입니다.

어떤 리팩토링 전략이 가장 효과가 있었나요? 아래에서 귀하의 경험이나 직면했던 어려움을 공유해 주세요! ?

위 내용은 깔끔하고 세련된 디자인을 위한 코드 리팩토링 필수 가이드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!