92. 자바스크립트 코딩 표준 (Coding Standards)

코딩 표준 (Coding Standards)

웹 개발에서 코딩 표준은 일관성 있는 코드 작성 방식을 의미한다. 이는 코드의 가독성을 높이고, 유지보수를 용이하게 하며, 팀 내 협업을 원활하게 하는 데 큰 도움이 된다. 이번에는 코딩 표준의 중요성과 이를 실천하기 위한 구체적인 방법, 그리고 자바스크립트를 활용한 예제를 통해 코딩 표준을 자세히 알아보자.

코딩 표준을 잘 지키면 코드의 품질이 향상되고, 버그를 줄일 수 있다. 하나씩 알아보자.

코딩 표준의 중요성

코딩 표준은 단순히 코드를 예쁘게 만드는 것이 아니다. 일관된 코드 스타일은 다음과 같은 이점을 제공한다:

• 가독성 향상: 누구나 쉽게 코드를 이해할 수 있다.
• 유지보수 용이: 코드 수정과 디버깅이 간편해진다.
• 팀 협업 강화: 팀원 간의 코드 스타일 차이로 인한 혼란을 줄인다.
• 버그 감소: 일관된 방식으로 코드를 작성하면 실수를 줄일 수 있다.

이러한 이점은 특히 대규모 프로젝트나 장기간 유지보수가 필요한 프로젝트에서 더욱 두드러진다.

1. 명명 규칙 (Naming Conventions)

변수, 함수, 클래스 등의 이름을 일관되게 짓는 것은 코딩 표준의 기본이다. 적절한 명명 규칙은 코드의 의도를 명확히 전달한다.

예를 들어, 변수는 camelCase를 사용하고, 상수는 대문자와 언더스코어를 사용한다:

// 좋은 예
const userName = '홍길동';
const MAX_AGE = 100;

// 나쁜 예
const uname = '홍길동';
const maxage = 100;

좋은 예에서는 userName이 사용자의 이름을 나타내는 것을 명확히 알 수 있다. 반면, 나쁜 예의 uname은 의미가 모호하다. 상수인 MAX_AGE는 대문자로 작성해 상수임을 쉽게 인식할 수 있다.

함수명은 동사로 시작하는 것이 좋다:

// 좋은 예
function getUserData() {
    // ...
}

// 나쁜 예
function userData() {
    // ...
}

getUserData는 사용자 데이터를 가져오는 함수임을 명확히 나타낸다. 반면, userData는 동작을 나타내지 않아 혼란을 줄 수 있다.

2. 코드 포맷팅 (Code Formatting)

코드의 들여쓰기, 중괄호 위치, 공백 사용 등을 일관되게 유지하는 것이 중요하다. 이는 코드의 가독성을 크게 향상시킨다.

예를 들어, 들여쓰기는 2칸 또는 4칸으로 통일한다:

// 좋은 예 (4칸 들여쓰기)
if (condition) {
    doSomething();
}

// 나쁜 예 (혼합된 들여쓰기)
if (condition) {
  doSomething();
}

일관된 들여쓰기는 코드의 구조를 명확히 보여준다. 혼합된 들여쓰기는 코드의 흐름을 파악하기 어렵게 만든다.

중괄호는 같은 줄에 두거나, 새로운 줄에 두는 것을 팀 내에서 통일한다:

// 스타일 1
if (condition) {
    doSomething();
}

// 스타일 2
if (condition)
{
    doSomething();
}

어떤 스타일을 선택하든 팀 내에서 일관되게 사용하는 것이 중요하다.

공백 사용도 일관되게 한다. 예를 들어, 연산자 주위에 공백을 넣는다:

// 좋은 예
const sum = 1 + 2;

// 나쁜 예
const sum=1+2;

공백이 없으면 코드가 빽빽해 보이고 읽기 어려워진다.

3. 주석과 문서화 (Comments and Documentation)

주석은 코드의 의도를 설명하고, 복잡한 로직을 이해하는 데 도움을 준다. 하지만 과도한 주석은 오히려 가독성을 해칠 수 있다.

주석은 코드의 '왜'를 설명하는 데 집중한다:

// 나쁜 주석
// i를 1씩 증가시킨다
i++;

// 좋은 주석
// 다음 단계로 넘어가기 위해 인덱스를 증가시킨다
i++;

나쁜 주석은 코드가 하는 일을 그대로 설명하지만, 좋은 주석은 그 이유를 설명한다.

함수나 클래스에는 문서화 주석을 추가한다. JSDoc을 사용한 예제는 다음과 같다:

/**
 * 사용자의 나이를 계산한다.
 * @param {number} birthYear - 출생 연도
 * @param {number} currentYear - 현재 연도
 * @returns {number} 사용자의 나이
 */
function calculateAge(birthYear, currentYear) {
    return currentYear - birthYear;
}

이 주석은 함수의 목적, 매개변수, 반환값을 명확히 설명한다. 이렇게 하면 다른 개발자가 함수를 쉽게 이해하고 사용할 수 있다.

4. 오류 처리 (Error Handling)

적절한 오류 처리는 애플리케이션의 안정성을 높인다. 예외가 발생했을 때 적절히 처리하지 않으면 애플리케이션이 중단되거나 예기치 않은 동작을 할 수 있다.

try-catch 문을 사용해 오류를 처리한다:

try {
    const result = someFunction();
    console.log(result);
} catch (error) {
    console.error('오류 발생: ', error);
}

이렇게 하면 someFunction에서 오류가 발생해도 애플리케이션이 중단되지 않고, 오류 메시지를 기록할 수 있다.

또한, 사용자에게 적절한 오류 메시지를 제공한다:

try {
    // 사용자 입력 처리
    if (!input) {
        throw new Error('입력값이 없습니다');
    }
} catch (error) {
    alert(error.message);
}

사용자에게 오류의 원인을 명확히 알리면, 문제를 해결하는 데 도움이 된다.

5. 모듈화와 재사용성 (Modularity and Reusability)

코드를 모듈화하면 재사용성이 높아지고, 유지보수가 쉬워진다. 함수나 클래스로 코드를 분리해 재사용 가능한 단위로 만든다.

예를 들어, 유틸리티 함수를 별도의 모듈로 분리한다:

// utils.js
export function formatDate(date) {
    return date.toISOString().split('T')[0];
}

// main.js
import { formatDate } from './utils.js';
const today = new Date();
console.log(formatDate(today));

formatDate 함수를 별도의 모듈로 분리해 여러 곳에서 재사용할 수 있다.

또한, 클래스를 사용해 관련된 데이터와 메서드를 묶는다:

class User {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }

    greet() {
        console.log(`안녕하세요, 저는 ${this.name}이고 ${this.age}살입니다.`);
    }
}

const user = new User('홍길동', 30);
user.greet();

User 클래스는 사용자 정보를 캡슐화하고, 관련 메서드를 제공한다.

6. 버전 관리와 코딩 표준

버전 관리 시스템(Git 등)을 사용할 때, 코딩 표준을 지키면 커밋 히스토리가 깔끔해지고, 코드 리뷰가 쉬워진다.

커밋 메시지는 명확하고 일관된 형식을 따른다:

# 좋은 예
git commit -m "feat: 사용자 인증 기능 추가"

# 나쁜 예
git commit -m "수정"

좋은 커밋 메시지는 변경 사항을 명확히 설명한다. Angular의 커밋 메시지 규칙을 참고할 수 있다.

또한, pre-commit 훅을 사용해 코딩 표준을 자동으로 검사할 수 있다. husky와 lint-staged를 사용한 예제는 다음과 같다:

// package.json
{
    "husky": {
        "hooks": {
            "pre-commit": "lint-staged"
        }
    },
    "lint-staged": {
        "*.js": ["eslint --fix", "git add"]
    }
}

이 설정은 커밋 전에 JavaScript 파일에 대해 ESLint를 실행하고, 자동으로 수정한다.

7. 도구를 활용한 코딩 표준 유지

코딩 표준을 유지하는 데 도움을 주는 도구들이 있다. 대표적으로 ESLint(린터)와 Prettier(포매터)를 사용한다.

ESLint는 코드의 잠재적인 오류를 찾아주고, 코딩 스타일을 강제한다:

// .eslintrc.json
{
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": "eslint:recommended",
    "rules": {
        "indent": ["error", 4],
        "quotes": ["error", "single"],
        "semi": ["error", "always"]
    }
}

이 설정은 4칸 들여쓰기, 작은따옴표 사용, 세미콜론 필수를 강제한다.

Prettier는 코드의 포맷을 자동으로 맞춰준다:

// .prettierrc
{
    "singleQuote": true,
    "trailingComma": "es5",
    "tabWidth": 4
}

이 설정은 작은따옴표 사용, ES5 스타일의 trailing comma, 4칸 탭을 지정한다.

이러한 도구를 사용하면 코딩 표준을 자동으로 유지할 수 있다.

8. 코딩 표준의 유연성

코딩 표준은 프로젝트의 특성에 따라 유연하게 조정되어야 한다. 모든 프로젝트에 동일한 표준을 적용하는 것은 비효율적일 수 있다.

예를 들어, 성능이 중요한 프로젝트에서는 가독성을 약간 희생하더라도 최적화된 코드를 작성할 수 있다. 또한, 팀의 선호도나 기존 코드베이스를 고려해 표준을 조정할 수 있다.

중요한 것은 팀 내에서 합의된 표준을 일관되게 따르는 것이다.

마무리

코딩 표준은 웹 개발에서 필수적인 요소이다. 명명 규칙, 코드 포맷팅, 주석과 문서화, 오류 처리, 모듈화, 버전 관리, 도구 활용 등을 통해 코드의 품질을 높일 수 있다. 일관된 코딩 표준은 팀 협업을 원활하게 하고, 유지보수를 용이하게 한다.