개요

프로그래밍에서 가장 시간을 많이 쓰는 부분이 바로 이름짓기라고 하던가
프론트 네이밍에 대해 정리해보자.

네이밍 종류

프로그래밍 네이밍 종류는 여러가지가 있다.

  • camelCase: 자바에서 사용되며 마치 낙타의 혹과 같다고 하여 카멜케이스다.
  • snake_case: 뱀처럼 생겼다 하여 스네이크케이스다.
  • kebab-case: 케밥처럼 생겼다고 하여 케밥케이스다.
  • PascalCase: 자바 클래스 이름을 지을 때 사용되는 파스칼 케이스다.

BEM 명명법

BEM은 각각 Block, Element, Modifier를 의미한다. 이 세가지를 이용해 이름을 짓는 것이다.
예를 들어 다음과 같다.

.btn__navigation--text {color: black;}

요소__일부분 __기호로 요소의 일부분을 표시하고 요소–상태 – 기호로 요소의 상태를 표시한다.

만약 다음과 같은 코드가 있다고 해보자.

<div class="container">
  <div class="name"></div>
  <div class="item">
    <div class="name"></div>
  </div>
</div>

<div class="btn primary"></div>
<div class="btn success"></div>
<div class="btn error"></div>

현재 상황의 문제점은 만약 css 선택자로 container 하위의 name을 선택하려고 .container .name을 적었는데 .item 하위의 name도 같이 선택이 되어 원하지 않는 스타일이 들어가는 문제가 생길 수 있다. 현재는 코드가 단순하지만 css 프레임워크를 사용하거나 외부 파일을 불러와야하는 상황이 생긴다면 문제가 될 수 잇다. 이걸 BEM 으로 나타내보면 다음과 같다. 컨테이너라는 블록의 일부분의 이름이 name이라는 의미를 나타낼 수 있고 또한 아이템 블록의 뒤에 __가 붙어있으니 item의 일부분인 name이라는 것을 알 수 있다.

<div class="container">
  <div class="container__name"></div>
  <div class="item">
    <div class="item__name"></div>
  </div>
</div>

<div class="btn btn--primary"></div>
<div class="btn btn--success"></div>
<div class="btn btn--error"></div>

버튼의 경우에도 버튼이 하나 있고 그 버튼의 상태인 primary가 있다라고 이해할 수 있다.

자바스크립트 명명법

크게 파일과 파일 내부의 명명이 있다.
파일 명은 일반적으로 케밥 케이스를 권장한다. 예를 들어 아래와 같다.

user-profile.js,
shopping-cart.js

그 이유는 크게 4가지가 있다.

  • URL 친화적: 웹 서버에서 파일명을 url로 사용할 경우 하이픈이 있으면 알아보기 편하고 공백,대문자 문제를 피할 수 있다.
  • OS 호환성: 대소문자를 구분하는 환경과 구분하지 않는 환경에서 일관성을 유지하기 쉽다.
  • 가독성: 여러 단어를 -로 구분하면 스크롤 없이 한눈에 읽기 쉽다.
  • npm, Node.js 커뮤니티 표준: 오픈소스 패키지에서 일반적으로 사용하는 네이밍이기 때문이다.

다음으론 카멜케이스도 사용할 수 있다.
예를 들어 하나의 자바스크립트 모듈이 하나의 클래스와 같이 작은 단위일 경우 함수 명과 동일하게 연결감을 줄 수 있다.

파스칼 케잇스느 클래스, 리엑트 컴포넌트 파일의 이름으로 주로 사용한다.

내부적으로는 상수는 대문자를 언더바로 연결한 스네이크 케이스를 사용한다. 여기서 상수는 const로 선언된 모든 대상을 의미하는 것이 아닌 MAX_VALUE와 같이 변하지 않는 값을 의미한다.

클래스와 생성자는 명사 형식의 파스칼 케이스를 주로 사용한다.
객체와 배열은 카멜케이스를 사용한다.