한 번만 사용하면 되는 코드는 원하는 대로 작성할 수 있습니다. 그러나 대부분의 경우 모범 사례를 준수하고 깨끗한 코드를 유지하는 것이 필수적입니다.

귀하의 코드는 나중에 다른 개발자나 본인 자신이 읽을 수도 있다는 점을 기억하세요. 그 때가 오면 코드는 설명이 필요합니다. 모든 변수, 함수, 주석은 정확하고 깔끔하며 이해하기 쉬워야 합니다. 이 접근 방식은 유지 관리를 용이하게 할 뿐만 아니라 개발 팀 내에서 협업과 효율성을 촉진합니다.

따라서 누군가(또는 귀하)가 코드를 추가하거나 수정하기 위해 다시 방문할 때 각 코드 줄의 기능을 쉽게 이해할 수 있습니다. 그렇지 않으면 코드를 이해하는 데 대부분의 시간을 소비하게 됩니다. 코드베이스를 작업하는 새로운 개발자에게도 동일한 문제가 발생합니다. 코드가 깨끗하지 않으면 코드를 이해하지 못할 것입니다. 그러므로 깔끔한 코드를 작성하는 것이 매우 중요합니다.

클린코드란 무엇인가?

클린코드는 기본적으로

1. 이해하기 쉬운
2. 손쉬운 디버그
3. 유지 관리가 용이함
4. 댓글은 잘 작성되었으며 짧고 이해하기 쉽습니다.
5. 중복(중복) 코드가 없으며 KISS 규칙을 따릅니다. (단순하게 유지하세요, 멍청합니다!)

깨끗한 코드를 작성하려면 개발자는 코드의 일관성을 유지해야 하며 개발자는 특정 언어에 대한 모범 사례를 따라야 합니다.

클린 코드가 중요한 이유는 무엇입니까?

팀이 깔끔한 코드 원칙을 따르면 코드베이스를 더 쉽게 읽고 탐색할 수 있습니다. 이를 통해 개발자는 코드를 빠르게 이해하고 기여를 시작할 수 있습니다. 깨끗한 코드가 중요한 몇 가지 이유는 다음과 같습니다.

1. 가독성 및 유지 관리: 코드가 잘 작성되고, 좋은 설명이 있고, 모범 사례를 따르면 코드를 읽고 이해하기 쉽습니다. 문제나 버그가 발생하면 어디서 찾을 수 있는지 정확히 알 수 있습니다.

2. 디버깅: 클린 코드는 명확하고 단순하게 설계되어 코드베이스의 특정 섹션을 더 쉽게 찾고 이해할 수 있습니다. 명확한 구조, 의미 있는 변수 이름, 잘 정의된 함수를 사용하면 문제를 더 쉽게 식별하고 해결할 수 있습니다.

삼. 향상된 품질 및 안정성: 클린 코드는 특정 언어의 모범 사례를 따르고 잘 구조화된 코드의 우선 순위를 지정합니다. 품질을 높이고 신뢰성을 향상시킵니다. 따라서 버그가 있거나 구조화되지 않은 코드로 인해 발생할 수 있는 오류를 제거합니다.

이제 깨끗한 코드가 왜 중요한지 이해했으므로 깨끗한 코드를 작성하는 데 도움이 되는 몇 가지 모범 사례와 원칙을 살펴보겠습니다.

클린 코드의 원칙

훌륭한 코드를 만들려면 작고 잘 정의된 메소드를 사용하는 등 클린 코드의 원칙과 관행을 준수해야 합니다.

자세히 살펴보겠습니다.

1. 하드 코딩된 숫자 피하기

값을 직접 사용하는 대신 상수를 사용하여 해당 값을 할당할 수 있습니다. 따라서 나중에 해당 값을 업데이트해야 하는 경우 한 위치에서만 업데이트해야 합니다.

예

function getDate() {
  const date = new Date();
  return "Today's date: "   date;
}

function getFormattedDate() {
  const date = new Date().toLocaleString();
  return "Today's date: "   date;
}

이 코드에는 어느 시점에서 "오늘 날짜:" 대신 "날짜: "가 필요한 변경 사항이 있습니다. 이는 해당 문자열을 하나의 변수에 할당하여 개선할 수 있습니다.

개선된 코드:

const todaysDateLabel = "Today's date: ";

function getDate() {
  const date = new Date();
  return todaysDateLabel   date;
}

function getFormattedDate() {
  const date = new Date().toLocaleString();
  return todaysDateLabel   date;
}

위 코드에서는 필요할 때 날짜 문자열을 변경하는 것이 쉬워졌습니다. 유지보수성이 향상됩니다.

2. 의미 있고 설명이 포함된 이름을 사용하세요.
어디에서나 공통 변수 이름을 사용하는 대신 설명이 필요 없는 좀 더 설명적인 이름을 사용할 수 있습니다. 변수 이름 자체가 그 용도를 정의해야 합니다.

이름 규칙

1. 설명적이고 명확한 이름을 선택하세요.
2. 의미 있게 구별하세요.
3. 발음 가능한 이름을 사용하세요.
4. 검색 가능한 이름을 사용하세요.
5. 매직 넘버를 명명된 상수로 바꿉니다.
6. 인코딩을 피하세요. 접두사를 추가하거나 정보를 입력하지 마세요.

예

// Calculate the area of a rectangle
function calc(w, h) {
    return w * h;
}

const w = 5;
const h = 10;
const a = calc(w, h);
console.log(`Area: ${a}`);

여기서 코드는 정확하지만 코드에 약간의 모호함이 있습니다. 설명적인 이름이 사용된 코드를 살펴보겠습니다.

개선된 코드

// Calculate the area of a rectangle
function calculateRectangleArea(width, height) {
    return width * height;
}

const rectangleWidth = 5;
const rectangleHeight = 10;
const area = calculateRectangleArea(rectangleWidth, rectangleHeight);
console.log(`Area of the rectangle: ${area}`);

여기서 모든 변수 이름은 설명이 필요하지 않습니다. 따라서 코드를 이해하기 쉽고 코드 품질도 향상됩니다.

삼. 필요한 경우에만 주석을 사용하세요.
모든 곳에 댓글을 작성할 필요는 없습니다. 꼭 필요한 곳에만 적고, 짧고 이해하기 쉽게 작성하세요. 주석이 너무 많으면 혼란이 생기고 코드베이스가 지저분해집니다.

댓글 규칙

1. 항상 코드로 자신을 설명하려고 노력하세요.
2. 중복되지 마십시오.
3. 눈에 띄는 노이즈를 추가하지 마세요.
4. 닫는 중괄호 주석을 사용하지 마세요.
5. 코드를 주석 처리하지 마세요. 그냥 제거하세요.
6. 의도에 대한 설명으로 사용하세요.
7. 코드를 명확히 하기 위해 사용합니다.
8. 결과에 대한 경고로 사용합니다.

예

// Function to get the square of a number
function square(n) {
    // Multiply the number by itself
    var result = n * n; // Calculate square
    // Return the result
    return result; // Done
}

var num = 4; // Number to square
var squared = square(num); // Call function

// Output the result
console.log(squared); // Print squared number

여기서 주석은 코드를 읽음으로써 쉽게 이해할 수 있는 단계를 정의하는 데 사용되는 것을 볼 수 있습니다. 이 주석은 불필요하며 코드를 복잡하게 만듭니다. 댓글의 올바른 사용법을 살펴보겠습니다.

개선된 코드

/**
 * Returns the square of a number.
 * @param {number} n - The number to be squared.
 * @return {number} The square of the input number.
 */
function square(n) {
    return n * n;
}

var num = 4;
var squared = square(num); // Get the square of num

console.log(squared); // Output the result

위의 예에서 주석은 필요한 경우에만 사용됩니다. 이는 코드를 깔끔하게 만드는 좋은 습관입니다.

4. 한 가지 작업만 수행하는 함수 작성
함수를 작성할 때 함수에 너무 많은 책임을 추가하지 마세요. 단일 책임 원칙(SRP)을 따르세요. 이렇게 하면 함수를 더 쉽게 이해하고 단위 테스트 작성을 단순화할 수 있습니다.

함수 규칙

1. 작게 유지하세요.
2. 한 가지만 하세요.
3. 설명적인 이름을 사용하세요.
4. 더 적은 수의 인수를 선호합니다.
5. 클라이언트에서 호출할 수 있는 여러 개의 독립적인 메서드로 메서드를 분할합니다.

예

async function fetchDataAndProcess(url) {
    // Fetches data from an API and processes it in the same function
    try {
        const response = await fetch(url);
        const data = await response.json();

        // Process data (e.g., filter items with value greater than 10)
        const processedData = data.filter(item => item.value > 10);

        console.log(processedData);
    } catch (error) {
        console.error('Error:', error);
    }
}

// Usage
const apiUrl = 'https://api.example.com/data';
fetchDataAndProcess(apiUrl);

위 예시에서는 API를 이용해 데이터를 가져와서 처리하는 함수를 볼 수 있습니다. 이는 다른 기능으로 수행할 수 있습니다. 현재 데이터 처리 기능은 매우 작지만 생산 수준 프로젝트에서는 데이터 처리가 매우 복잡할 수 있습니다. 이때 이를 동일한 기능으로 유지하는 것은 좋은 습관이 아닙니다. 이렇게 하면 코드가 복잡해지고 한 번에 이해하기 어려워집니다.
이것의 깨끗한 버전을 봅시다.

개선된 코드

async function fetchData(url) {
    // Fetches data from an API
    try {
        const response = await fetch(url);
        return await response.json();
    } catch (error) {
        console.error('Error:', error);
        throw error;
    }
}

function processData(data) {
    // Processes the fetched data (e.g., filter items with value greater than 10)
    return data.filter(item => item.value > 10);
}

// Usage
const apiUrl = 'https://api.example.com/data';

fetchData(apiUrl)
    .then(data => {
        const processedData = processData(data);
        console.log(processedData);
    })
    .catch(error => {
        console.error('Error:', error);
    });

이 예에서는 책임이 분리되어 있습니다. fetchData 함수는 API 호출을 처리하고 processData 함수는 데이터 처리를 처리합니다. 이렇게 하면 코드를 더 쉽게 이해하고 유지 관리하고 테스트할 수 있습니다.

5. 코드 중복 방지(DRY 원칙 준수 - 반복하지 않음)

코드 유지 관리성과 청결성을 높이려면 가능하면 재사용 가능한 함수를 만들거나 기존 코드를 재사용하도록 노력하세요. 예를 들어 페이지에 표시하기 위해 API에서 데이터를 가져오는 경우 데이터를 검색하고 UI 표시를 위해 렌더러에 전달하는 함수를 작성합니다. 동일한 데이터를 다른 페이지에 표시해야 하는 경우 동일한 함수를 다시 작성하는 대신 함수를 유틸리티 파일로 이동해야 합니다. 이를 통해 두 인스턴스 모두에서 함수를 가져오고 사용할 수 있으므로 코드베이스 전체에서 재사용성과 일관성이 향상됩니다.

클린 코드 작성을 위한 기타 일반 규칙

• 표준 규칙을 따릅니다(JavaScript Camel Case의 경우).
• 간단하게 하세요. 단순한 것이 항상 더 좋습니다. 복잡성을 최대한 줄이세요.
• 보이스카우트 규칙. 처음보다 깨끗해진 캠핑장을 떠나세요.
• 항상 근본 원인을 찾으세요. 항상 문제의 근본 원인을 찾으십시오.
• 이해하기 쉬운 코드를 작성하세요.

Clean Code를 작성하려면 오늘부터 이 실천사항과 원칙을 구현하세요.