좋은 코드란 무엇일까, 클린코드에 대하여

 

가독성 좋고 읽기 쉬운 코드란 무엇일까?

좋은 코드에 알아보기 위해 피해야 할 '나쁜 코드'에 대해 먼저 알아보자

나쁜 코드

간단히 말하면 이 코드를 읽고 해석하면서 고칠 바에는 내가 처음부터 다시 짜는게 더 나은 상태를 말한다.

 

1. 너무 긴 코드

하나의 함수 또는 클래스에 너무 많은 기능이 들어가 코드가 너무 길어지면 어떤 기능을 하는지 파악하기 어려워 혼동을 준다.

2. 너무 많은 if절 

3개만 써도 흐름을 파악하기 어렵다

function complexFunction(value1, value2, value3) {
    if (value1) {
        if (value2) {
            if (value3) {
                // 중첩된 조건이 충족되었을 때 수행하는 코드
                console.log('All conditions are met!');
            } else {
                console.log('Third condition is not met.');
            }
        } else {
            console.log('Second condition is not met.');
        }
    } else {
        console.log('First condition is not met.');
    }
}

개선된 코드. 기존 코드보다 가독성이 좋으며 어떤 상태일때 어떤 출력값을 갖는지 파악하기 쉽다.

function improvedFunction(value1, value2, value3) {
    if (!value1) {
        console.log('First condition is not met.');
        return;
    }

    if (!value2) {
        console.log('Second condition is not met.');
        return;
    }

    if (!value3) {
        console.log('Third condition is not met.');
        return;
    }

    // 조건이 모두 충족되었을 때 수행하는 코드
    console.log('All conditions are met!');
}

3. 중복된 기능

같은 기능을 하는 함수를 여러개 만들게 되면 메모리 부족 +  수정시 모든 함수를 다 뜯어고쳐하는 번거로움이 생긴다.

function greetUserEnglish(name) {
    return 'Hello, ' + name + '!';
}

function greetCustomerEnglish(name) {
    return 'Hello, dear ' + name + '!';
}

function greetUserSpanish(name) {
    return '¡Hola, ' + name + '!';
}

function greetCustomerSpanish(name) {
    return '¡Hola, querido ' + name + '!';
}

// 각 함수를 호출하여 결과 출력
console.log(greetUserEnglish('John'));
console.log(greetCustomerEnglish('Alice'));
console.log(greetUserSpanish('Maria'));
console.log(greetCustomerSpanish('Carlos'));

 

중복된 기능을 한다면? 따로 뽑아서 공통로직으로 사용하자

function greetPerson(type, name) {
    switch (type) {
        case 'user':
            return greetUser(name);
        case 'customer':
            return greetCustomer(name);
        default:
            throw new Error('Unsupported type');
    }
}

function greetUser(name) {
    return 'Hello, ' + name + '!';
}

function greetCustomer(name) {
    return 'Hello, dear ' + name + '!';
}

// 개선된 코드를 활용하여 결과 출력
console.log(greetPerson('user', 'John'));
console.log(greetPerson('customer', 'Alice'));
console.log(greetPerson('user', 'Maria'));
console.log(greetPerson('customer', 'Carlos'));

 

4. 변수 및 함수명을 난해하게 작성한 경우

한 눈에 보고 어떤 기능을 하는지 알기 어려울 뿐만 아니라 함수를 호출할때도 헷갈리게 된다. 

function a(x, y) {
    let z = x * y;
    return z + 10;
}

let b = function(c, d) {
    let e = c * d;
    return e + 10;
};

let f = (g, h) => {
    let i = g * h;
    return i + 10;
};

정확한 변수명/함수명을 사용해 어떤 의도를 갖고 있는지 분명하게 표시하자

function calculateAreaRectangle(length, width) {
    let area = length * width;
    return area + 10;
}

let calculateArea = function(length, width) {
    let area = length * width;
    return area + 10;
};

 

클린 코드의 주요 원칙

논리가 간단하고 가독성이 좋아 모든 팀원들이 이해하기 쉽게 작성된 코드

 

잘 짜인 코드가 있다면 문제가 발생했을때 그 흐름을 따라가기 쉽고 빠른 속도로 대응할 수 있다. 

 

1. 코딩의 표준, 아키텍처 표준 및 설계 가이드를 준수하라.

2. 단순한 것이 효율적인 것이다. 복잡한 것은 멀리하라.

3. 참조되거나 수정된 코드는 원래 코드보다 깔끔해야 한다(보이스카우트 룰 : 머문 자리를 떠날때는 더 깨끗하게)

4. 항상 근본적인 원인을 찾아라. 그렇지 않으면 문제는 반복된다.

5. 하나의 파일은 하나의 언어로 작성한다.

 

1. 명확한 변수명 사용

setInterval = (코딩하기, 86400); // 보다는

const SecondInADay = 86400
setInterval = (코딩하기, SecondInADay); //하루가 86400초라는 것을 더 이해하기 쉬움!

 

2. 함수의 이름은 가급적 동사로 짓기, 하나의 함수는 하나의 기능만

개인적인 생각으로는 간단한 함수의 경우에는 하나의 기능만 하도록 하는게 좋지만

함수를 분리해서 가독성이 떨어진다면 합쳐도 될거같다.

//함수 이름은 가급적 동사로 짓기
const userData = () => {}
const loadUserData = () => {}

//이름만 보고 어떤 기능을 하는지 유추할 수 있도록
//하나의 함수는 하나의 기능만 !!

 

3. 매개변수는 너무 많이 쓰지 말것. 많다면 묶어서 전달하기

//3개 이하로 사용하는 것을 추천

function makePayment(price, productId, size, quantity, userId) {
  //너무 많은 매개변수
}

//만약 너무 많다면 내용 파악이 쉽도록 묶어서 전달.
function makePayment({ price, productId, size, quantity, userId }) {
  //내용
}

makePayment({
  price: 1000,
  productId: 2,
  size: "XL",
  quantity: 34,
  userId: "nemo",
});