이름 짓기는 깨끗하고 유지 관리가 용이하며 확장 가능한 코드를 작성하는 데 있어 가장 중요하고 도전적인 부분 중 하나입니다. 예를 들어, 잘 생각한 변수 이름은 자기 문서화된 코드 역할을 하여 논리를 이해하는 데 시간과 노력을 절약할 수 있습니다. 그러나 잘못 선택된 이름은 혼란과 버그를 초래할 수 있습니다.

이 기사는 클래스 이름, 변수 및 함수에 대한 의미 있는 이름을 생각해내는 방법에 대한 포괄적인 가이드 역할을 하며, 예시와 모범 사례를 제공합니다.

이름이 중요한 이유는 무엇인가요?

  • 가독성: 좋은 이름은 코드를 직관적으로 만들고 다른 사람들이 배우는 데 걸리는 시간을 줄여줍니다.

  • 유지 관리성: 잘 이름 지어진 코드는 리팩토링하거나 디버깅하기가 더 쉽습니다.

  • 협업: 명확한 이름은 팀 간 의사소통과 생산성을 향상시킵니다.

  • 확장성: 의미 있는 이름은 대규모 프로젝트를 관리 가능하게 유지하는 데 도움을 줍니다.

다양한 이름 규칙 스타일

다양한 이름 규칙 스타일은 여러 프로그래밍 언어에서 코드의 가독성과 유지 관리성을 향상시키는 데 중요합니다.

camelCase, PascalCase, snake_case 및 kebab-case와 같은 스타일은 특정 맥락과 관행에 맞게 설계되었습니다.

camelCase는 변수와 함수에 널리 사용되며, PascalCase는 클래스에 선호됩니다. snake_case는 명확성으로 인해 Python에서 인기가 있고, kebab-case는 HTML 요소 스타일링을 위해 CSS에서 주도적으로 사용됩니다.

각 스타일은 일관성을 보장하여 팀과 향후 개발자들에게 직관적인 코드를 제공합니다. 다음은 인기있는 명명 규칙과 사용 사례 및 예제를 요약한 빠른 표입니다:

스타일 예시 일반적인 사용법
camelCase userName 변수, 함수, 객체 속성
PascalCase UserName 클래스, 컴포넌트, 생성자
kebab-case primary-button CSS 클래스, HTML ID, 파일 이름
snake_case user_name Python의 변수, 함수 이름
SCREAMING_SNAKE_CASE MAX_CONNECTIONS 상수
dot.case config.file.path 구성, 키
Train-Case Primary-Button 제목은 거의 사용되지 않음
헝가리 표기법 bIsActive 레거시 코드
공백이 있는 대문자 사용자 계정 세부정보 드물게, 주로 구식 문서화에 사용됨
플랫케이스 사용자 이름 미니멀리스트, 파일 이름, 식별자

올바른 스타일 선택 방법

  1. 언어별: 프로그래밍 언어나 프레임워크의 규칙을 따르세요. 예를 들어:

    • JavaScript: camelCase는 변수와 함수에 사용하고, PascalCase는 컴포넌트에 사용합니다.

    • Python: snake_case는 변수와 함수에 사용합니다.

    • CSS/HTML: kebab-case는 클래스 이름과 ID에 사용합니다.

  2. 팀 또는 프로젝트 표준: 일관성이 중요합니다. 팀/프로젝트에 합의된 스타일을 사용하세요.

  3. 목적에 맞게: Entity를 가장 잘 표현하는 네이밍 스타일을 사용하세요 (예: 상수는 SCREAMING_SNAKE_CASE 형식으로).

일반적인 네이밍 가이드라인

클래스 이름, 변수 및 함수에 대한 구체적인 네이밍 규칙에 대해 알아보기 전에, 일부 범용 원칙을 살펴보겠습니다:

  1. 설명적이고 간결하게: 이름은 변수/함수 등의 목적 또는 역할을 전달해야 합니다:

     // 나쁨
 let x = 10;

 // 좋음
 let maxUsersAllowed = 10;

  2. 다른 개발자들이 이해하기 어려운 (심지어 미래의 자신도) 암호 같은 약어는 피하세요:

     // 나쁜 예
 let usrNm = "John";

 // 좋은 예
 let userName = "John";

  3. 일관된 명명 규칙을 사용하세요: 명명 스타일(카멜 케이스, 파스칼 케이스, 케밥 케이스, 스네이크 케이스)을 선택하고 프로젝트 전반에 걸쳐 일관되게 사용하세요.

  4. 예약어나 혼동스러운 이름을 피하십시오:

     // 나쁨
 let let = 5;

 // 좋음
 let variableName = 5;

기본적인 내용을 다룬 이제, 몇 가지 유용한 명명 규칙에 대해 더 깊이 파고들어보겠습니다.

좋은 클래스 이름 만드는 방법

클래스 이름은 애플리케이션의 요소의 시각적 또는 구조적 동작을 정의합니다. 명확한 클래스 이름을 작성하면 HTML 및 CSS를 이해하고 유지하기 쉬워집니다.

1. 기술적인 이름 사용

클래스 이름은 요소의 목적을 나타내어야 하며, 외관을 나타내어서는 안됩니다.

<!-- 나쁨 -->
<div class="red-button"></div>

<!-- 좋음 -->
<div class="primary-button"></div>

2. BEM (Block-Element-Modifier) 방법론 따르기

BEM은 확장 가능하고 유지보수 가능한 CSS를 작성하기 위한 인기 있는 규칙입니다. 구성 요소를 분리하여:

  • 블록: 컴포넌트를 나타냅니다 (예: card).

  • 요소: 블록의 하위 요소를 나타냅니다 (예: card__title).

  • 수식어: 블록 또는 요소의 변형을 나타냅니다 (예: card__title--highlighted).

예시:

<div class="card">
  <h1 class="card__title card__title--highlighted">Welcome</h1>
  <p class="card__description">This is a card component.</p>
</div>

3. 케밥 케이스 사용하기

CSS 클래스 이름은 일반적으로 가독성을 높이기 위해 케밥 케이스로 작성됩니다.

<!-- 나쁨 -->
<div class="primaryButton"></div>

<!-- 좋음 -->
<div class="primary-button"></div>

좋은 변수 이름 만들기

변수는 데이터를 보유하며, 표현하는 내용을 설명하는 의미 있는 이름을 가져야 합니다.

1. 변수에 명사 사용하기

변수는 일반적으로 명사인데, 이는 엔티티나 데이터를 나타내기 때문입니다.

// 나쁨
let a = "John";

// 좋음
let userName = "John";

2. 접두사를 사용하여 문맥 추가하기

접두사를 추가하면 변수의 유형 또는 목적을 명확히 할 수 있습니다:

  • 불리언: is, has, can

  • 숫자: max, min, total

  • 배열: 복수형 형태 사용 (예: users, items).

예시:

let isUserLoggedIn = true;
const maxUploadLimit = 5; // MB
const usersList = ["John", "Jane"];

3. 일반적인 이름 피하기

data, value, 또는 item과 같은 이름은 필요한 경우가 아닌 이상 피하세요.

// 나쁨
let data = 42;

// 좋음
let userAge = 42;

좋은 함수 이름 만들기 방법

함수는 작업을 수행하므로 그 이름은 실행하는 작업이나 프로세스를 반영해야 합니다.

1. 함수에 동사 사용하기

함수는 행동 중심적이므로 그 이름은 동사로 시작해야 합니다:

// 나쁨
function userData() {
  // ...
}

// 좋음
function fetchUserData() {
  // ...
}

2. 기능에 대해 구체적으로 표현하기

함수 이름은 그들이 무엇을 하는지 나타내야 합니다.

// 나쁨
function handle() {
  // ...
}

// 좋음
function handleFormSubmit() {
  // ...
}

3. 의도를 나타내는 접두사 사용

  • 이벤트 핸들러용: handle, on

  • 유틸리티용: calculate, convert, format

  • 데이터 가져오기 작업용: fetch, get, load

  • 설정자와 접근자용: set, get

예시:

function handleButtonClick() {
  console.log("Button clicked!");
}

function calculateDiscount(price, discountPercentage) {
  return price * (discountPercentage / 100);
}

변수, 함수 또는 클래스에 적합한 이름인지 알아내는 방법me is Good for a Variable, Function, or Class

변수, 함수 또는 클래스에 적합한 이름인지를 이해하기 위해 몇 가지 주요 원칙을 사용하여 평가하는 것이 중요합니다. 이름이 프로그래밍 컨텍스트에서 적절하고 의미 있는지 판단하는 데 도움이 되는 안내서가 있습니다:

1. 목적을 나타내나요?

목적 기반 이름은 좋은 이름 짓기의 가장 중요한 특성입니다. 이름은 추가적인 주석이나 문서를 읽지 않고도 변수, 함수 또는 클래스가 무엇을 나타내거나 하는지를 즉시 알려줘야 합니다.

평가 방법:

자신에게 물어보세요: “이 이름을 읽었을 때, 즉시 그 목적을 이해할 수 있는가?”

예시:

  • userAge는 a보다 낫습니다. 왜냐하면 userAge는 변수가 무엇을 나타내는지를 알려주고, a는 너무 모호하기 때문입니다.

2. 충분히 구체적인가?

이름은 코드에서 엔티티의 정확한 역할을 반영할 수 있을 만큼 구체적이어야 합니다. data나 temp와 같은 지나치게 일반적인 이름은 충분한 맥락을 제공하지 않기 때문에 혼란스러울 수 있습니다.

평가 방법:

물어보세요: “이 이름은 내 애플리케이션에서 이 변수, 함수 또는 클래스가 나타내는 것에 구체적인가?”

예시:

  • calculateTaxAmount()는 calculate()보다 낫습니다. 왜냐하면 이 함수가 무엇을 계산하고 있는지 명확하기 때문입니다.

3. 일관된 명명 규칙을 따르는가?

일관성은 명명 규칙에서 매우 중요합니다. 모든 팀원이 동일한 규칙을 따를 때, 코드는 이해하고 탐색하기 쉬워집니다.

평가 방법:

질문: “이 이름이 프로젝트의 나머지 부분에서 사용되는 명명 규칙과 일치합니까?” 프로젝트 가이드라인을 따르세요:

  • camelCase를 변수와 함수에 사용 (예: userAge)

  • PascalCase를 클래스에 사용 (예: UserProfile)

  • UPPERCASE_SNAKE_CASE를 상수에 사용 (예: MAX_USERS)

예시:

  • 팀이 camelCase를 따른다면, userData가 UserData보다 낫습니다.

4. 모호성을 피하고 있습니까?

좋은 이름은 모호성을 제거합니다. 여러 해석이 가능해서는 안 됩니다. 서로 다른 맥락에서 다른 의미를 가질 수 있다면 혼란을 초래할 것입니다.

평가 방법:

질문: “코드베이스에 익숙하지 않은 사람이 이 이름이 무엇을 의미하는지 잘못 해석할 수 있을까요?”

예시:

  • 불리언을 isValid라고 명명하는 대신, isUserLoggedIn이나 isEmailVerified와 같이 더 명확하게 체크되는 내용을 나타내도록 하세요.

5. 읽고 발음하기 쉽습니까?

읽기와 발음의 용이성은 코드의 전반적인 가독성과 유지보수성을 향상시킬 수 있습니다.

평가 방법:

질문: “이 이름은 소리 내어 읽기 쉬운가, 그리고 한눈에 이해할 수 있는가?”

긴 이름은 피하고, 널리 수용되는 약어만 사용하세요.

예:

  • maxRetries는 maximumNumberOfAttemptsToReconnect보다 낫습니다.

6. 중복을 피하고 있는가?

이름에서 중복을 피하세요. 이미 암시되거나 맥락에서 설명된 정보를 반복하지 마세요.

평가 방법:

질문: “주변 맥락에서 이미 명확한 정보를 반복하고 있는가?”

예:

  • 클래스 이름이 User인 경우, 메서드 이름을 userGetData()로 하는 것은 중복입니다. 대신 getData()를 사용하세요.

7. 자기 문서화되고 있는가?

최고의 이름은 자기 문서화됩니다. 좋은 이름은 추가적인 주석이나 설명의 필요성을 줄입니다.

평가 방법:

질문: “이 이름이 변수, 함수 또는 클래스를 충분히 설명하고 있어 주석이 필요하지 않은가?”

예:

  • calculateTotalPrice는 자명하므로 “이 함수는 할인 후 총 가격을 계산합니다.”와 같은 추가 설명이 필요하지 않습니다.

8. 맥락과 도메인에 적합한가요?

이름은 프로젝트와 그 도메인의 맥락에 맞아야 합니다. 예를 들어, 웹 애플리케이션의 명명 규칙은 모바일 앱이나 머신 러닝 모델과 다를 수 있습니다.

평가 방법:

질문: “이 이름이 내 프로젝트의 도메인과 맥락에 맞는가?”

특정 도메인(예: 금융, 건강, 게임)에서 작업하는 경우 인식하기 쉬운 도메인 특정 용어를 사용하십시오.

예:

  • 게임 앱에서 healthPoints는 의미를 반영하므로 hp보다 더 적합합니다.

9. 미래에 대비할 수 있는가요?

코드가 어떻게 발전할지 생각해보세요. 이름은 리팩토링 없이도 향후 변경 사항을 수용할 수 있을 만큼 유연해야 합니다.

평가 방법:

질문: “기능이 변경되거나 프로젝트가 성장할 경우 이 이름이 여전히 의미가 있을까?”

예:

  • userInfo는 데이터 구조가 변경되면 구식이 될 수 있습니다. 더 많은 필드가 추가될 것으로 예상된다면 userProfile를 사용하는 것이 더 좋습니다.

10. 매직 넘버와 하드 코딩된 값을 피하고 있는가요?

매직 넘버 (불명확한 의미를 가진 숫자)는 명명된 상수를 사용하는 것이 좋습니다.

평가 방법:

질문하십시오: “이 이름은 의미 있는 상수를 나타내는 것인가, 아니면 단순한 숫자에 불과한가?”

예:

  • 1000 대신 MAX_FILE_SIZE와 같은 상수를 사용하여 숫자의 의미를 설명하십시오.

실용적인 예

CSS 예제

다음 CSS 예제는 스타일시트에서 구조적이고 확장 가능한 클래스 계층을 유지하기 위해 BEM (Block-Element-Modifier) 명명 규칙을 적용하는 방법을 보여줍니다:

<!-- HTML -->
<div class="navbar">
  <ul class="navbar__list">
    <li class="navbar__item navbar__item--active">Home</li>
    <li class="navbar__item">About</li>
    <li class="navbar__item">Contact</li>
  </ul>
</div>

/* CSS */
.navbar {
  background-color: #333;
  padding: 10px;
}

.navbar__list {
  list-style: none;
}

.navbar__item {
  display: inline-block;
  padding: 10px;
}

.navbar__item--active {
  color: orange;
}

이 코드에서 일어나는 일은 다음과 같습니다:

  • BEM 명명: navbar는 블록으로, 주요 내비게이션 구성 요소를 나타냅니다.
  • navbar__list는 엘리먼트로, 블록의 자식으로 내비게이션 항목 목록을 나타냅니다.
  • navbar__item은 개별 목록 항목을 나타내는 또 다른 엘리먼트입니다.

  • navbar__item--active은 활성 메뉴 항목을 강조하는 Modifier입니다.
    이 접근 방식은 HTML 및 CSS 내에서 관계와 역할을 이해하기 쉽게 만들어주며 모듈식으로 재사용 가능한 스타일을 지원합니다.

JavaScript 예시

이 JavaScript 예시는 변수와 함수에 의미 있는 일관된 명명 규칙을 사용하여 코드를 쉽게 이해할 수 있도록 하는 방법을 보여줍니다:

// 변수
let isUserLoggedIn = false;
const maxAllowedItems = 10;

// 함수
function fetchUserDetails(userId) {
  // API에서 사용자 데이터 가져오기
}

function calculateTotalPrice(cartItems) {
  return cartItems.reduce((total, item) => total + item.price, 0);
}

코드에서 무슨 일이 일어나는지 살펴봅시다:

  • 변수:

    • isUserLoggedIn: 목적을 명확히 나타내기 위해 명명된 부울 변수. is로 접두사를 붙이면 부울임을 식별하는 데 도움이 됩니다.

    • maxAllowedItems: 한계를 나타내는 대문자 접두사 max가 있는 상수는 의도를 명확히 합니다.

  • 함수:

    • fetchUserDetails(userId): 함수의 목적을 반영하는 이름으로, 사용자 세부 정보를 검색합니다. 매개변수 userId는 설명적이며 모호함을 피합니다.

    • calculateTotalPrice(cartItems): 함수 이름은 명시적으로 수행되는 작업을 명시합니다. cartItems 매개변수는 전자 상거래 도메인과 관련이 있습니다.

왜 좋은가: 이러한 규칙은 코드의 가독성 및 직관성을 보장하여 같은 프로젝트에서 작업하는 다른 개발자들의 인지 부담을 줄입니다.

결론

의미 있는 명명은 중요한 관습이자 예술 형태로, 코드의 가독성과 유지 보수성에 큰 영향을 미칩니다.

이러한 기본 원칙을 따르십시오:

  • 설명적이고 간결한 이름을 사용하세요.

  • 클래스 이름에는 BEM과 같은 일관된 규칙을 따르고, 변수와 함수에는 camelCase를 사용하세요.

  • 접두사를 사용하여 맥락과 명확성을 추가하세요.

이러한 팁과 우리가 논의한 다른 팁들은 코드 작업을 더 즐겁게 만들어 줄 것입니다. 몇 달 후 다시 보거나 팀과 협업할 때도 마찬가지입니다. 오늘부터 이러한 팁을 적용해 보세요, 그러면 코드 품질이 향상되는 것을 볼 수 있습니다.