네이밍 컨벤션 규칙, 의미있게 네이밍하는 방법 정리🧹

네이밍 규칙

카멜 케이스(Camel Case)

일반적인 변수와 함수의 네이밍에는 카멜 케이스를 사용한다.

이름의 제일 첫 문자는 소문자이며, 각 단어의 첫 문자를 대문자로 표시한다.

var elapsedTimeInDays;
var daysSinceCreation;
var daysSinsceModification;
var fileAgeInDays;

파스칼 표기법(Pascal Case)

첫 문자를 포함하여 각 단어의 첫 문자를 대문자로 표기하는 방식이며 Upper Camel Case라고도 한다.

클래스를 만들 때 파스칼 표기법을 사용한다.

class Customer {
    ...
}

스네이크 표기법(Snake case)

각 단어의 사이를 언더바(_)로 구분하는 표기법

상수를 선언할 때 등에 사용한다.

const WORK_DAYS_PER_WEEK = 5;

의미 있는 네이밍하기

의도를 분명히 밝혀라.

• 변수나 함수 그리고 클래스 이름은 다음과 같은 굵직한 질문에 모두 답해야 한다. 변수(혹은 함수나 클래스)의 존재 이유는? 수행 기능은? 사용 방법은?
• 따로 주석이 필요하다면 의도를 분명히 드러내지 못했다는 말이다.

그릇된 정보를 피하라.

• 여러 계정을 그룹으로 묶을 때, 실제 List가 아니라면 accountList라 명명하지 않는다. 계정을 담는 컨테이너가 실제 List가 아니라면 accountGroup, accounts 등으로 명명한다.
• 서로 흡사한 이름을 사용하지 않도록 주의한다.
• 일관성이 떨어지는 표기법은 그릇된 정보다.

의미 있게 구분하라.

• 연속된 숫자를 덧붙이거나 불용어(의미가 없는 단어)를 추가하는 방식은 적절하지 못하다.
• Product라는 클래스가 있다고 가정하자. 다른 클래스를 ProductInfo 혹은 ProductData라 부른다면 개념을 구분하지 않은 채 이름만 달리한 경우다. Info나 Data는 a, the와 마찬가지로 의미가 불분명한 불용어다.
• getActiveAccount(), getActiveAccounts(), getActiveAccountInfo()라는 함수들이 있을 때 프로젝트에 참여한 프로그래머는 어느 함수를 호출해야 할 지 어떻게 알까?
• 읽는 사람이 차이를 알도록 이름을 지어라.

검색하기 쉬운 이름을 사용하라.

• 간단한 메서드에서 로컬 변수는 이름을 짧게 만든다. 이름 길이는 범위 크기에 비례해야 한다.
• 변수나 상수를 코드 여러 곳에서 사용한다면 검색하기 쉬운 이름이 바람직하다.

클래스 이름

• 클래스 이름과 객체 이름은 명사나 명사구가 적합하다.
• Customer, Account 등이 좋은 예다. Data, Info 같은 단어는 피하고, 동사는 사용하지 않는다.

메서드 이름

• 메서드 이름은 동사나 동사구가 적합하다. postPayment, deletePage 등이 좋은 예다.
• 접근자, 변경자, 조건자는 앞에 get, set, is를 붙인다.

HTML/CSS에서 네이밍 규칙

HTML은 프로그래밍 용어만큼 컨벤션이 규정되어 있진 않은 느낌이다.

그래도 일반적으로는 id는 카멜 케이스, class는 하이픈(-)을 사용하는 듯하다.

CSS의 경우는 HTML의 class 네임을 사용하거나, sass 같은 전처리기의 경우 BEM 구조에 따른 네이밍을 사용한다.

<button id="submitButton" class="btn primary">버튼</button>

네이밍에서 $ 및 _ 사용의 의미

달러 기호($) 및 언더바(_) 문자는 변수, 함수 등의 식별자 네이밍에 많이 사용된다.

달러($) 식별자

주로 DOM 엘리먼트를 지칭하는 용도로 사용한다.

const $container = document.getElementById("container");

이렇게 하면 $container가 일반적인 변수가 아니라 DOM에 존재하는 엘리먼트를 가리킨다는 것을 알 수 있다.

언더바(_) 식별자

외부에서 접근할 수 없는 private 변수를 선언할 때, 혹은 지역 변수명에 _ 기호를 이용한다.

참고사이트

코딩 컨벤션
Clean Code - 2장 의미 있는 이름
네이밍 컨벤션 ( Naming Convention )
Markup Code Style Guide
JavaScript의 달러 기호 ($)와 밑줄 (_)