[TIL.12] 네이밍 표기법, 이름 짓는 방법. 카멜, 스네이크, 케밥, 파스칼 케이스

 

프로그래밍 작업을 하다보면 기능구현도 구현이지만 이름을 짓는데도 엄청 고민하게 된다.

프로젝트 경험이 많은 것도 아니라 컨벤션이라던가 언어별로 이해도가 깊지 않아서 그런가 이걸 이렇게 이름 지으면 남이 보는건 차치하고라도 과연 내가 3개월뒤에 다시 봐도 그 함수나 변수의 역할을 이름만 보고 기억할 수 있을까? 고민하게 된다.

 

사실 이름을 어떻게 지을지는 여전히, 그리고 앞으로도 한동안은 고민해야할 문제지만 오늘은 가볍게 코린이가 알아야할 4가지 네이밍 방법에 대해서 정리해보려고 한다. 

 

 

 

1. 카멜케이스

출처 : pixabay

카멜 Camel 낙타 등모양같아서 붙여진 이름. 자바에서 많이 사용하는 네이밍 방법

 

변수같은 경우

var thisIsName ='홍길동';

이런식으로 단어를 붙여쓰는대신 뒷단어를 대문자로 사용해 낙타등 모양이 되는 네이밍 방법이 카멜케이스 방법이다. 

 

그리고 자바같은 경우 로컬에서 실행할때 폴더 경로에 특수문자가 있으면 파일 경로를 찾지 못해서 실행이 안되는데 아마도 그런 이유에서 이런 네이밍을 선호하는게 아닐까....??

 

참고로 자바나 특정 언어에서는 파일명을 지을때 첫글자도 대문자로 시작하는데 이런 방법은 파스칼pascal 케이스라고 한단다

AdminMainController.java 이런식..

 

 

 

2. 스네이크 케이스

(뱀은 혐짤이니까 사진 생략..................)

뱀 모양같다고 해서 붙여진 스네이크 케이스. 

변수의 이름이 길어지면 단어 사이를 언더 바로 연결해서 이름을 짓는다

var this_is_name='홍길동';

이런식이다. php와 파이썬에서 주로 이 방식으로 네이밍을 한다고...

 

개인적으로 최근에는 이 방법을 많이 사용하고 있는 것 같다. 왠지모르겠지만 특히 클래스명을 지을때 스네이크 방법을 자주 쓴다. 

 

 

 

3. 케밥 케이스

출처 : pixabay

 

롸...? 내가 아는 케밥이랑 달라서 당황;;ㅋㅋㅋㅋ

이런 모양의 케밥을 보니 왜 케밥 케이스가 그렇게 생겼는지 한방에 이해됨

케밥케이스는 단어사이를 언더바가 아닌 빼기, 대시dash 즉 '-'로 연결하는 네이밍 방법이다

var this-is-name='홍길동';

 

 

그나저나 케밥 배신이네... 그동안 내가 사먹었던 수많은 케밥은 이모양이었는데....ㅠ

출처 : pixabay

 

 

---

 

 

최근에 들었던 수업에서 강사님이 본인이 네이밍하는 방법을 알려주셨는데 파일명은 스네이크, 아이디는 카멜, 클래스는 케밥 케이스로 하신다고 한다. 

 

 

이건 약간 별개의 내용일 수 있는데

이 글을 정리하면서 찾아보니 CSS같은 경우 BEM방법과 객체지향 css라는 OOCSS(Objext Oriented CSS) 네이밍 방법도 있다고한다. 강의나 다른사람 작업물에서 몇번 본적은 있는데 내가 실제로 적용해본적이 없어서 설명만 보니까 아직은 조금 낯설다. 

 

BEM방법은 소문자, 숫자만 사용하는 class명을 쓴다. 환경에 영향받지 않는 블록block을 목적에 맞게 가이드만 잡아주고, 그 안에 특정 기능을 수행하는 요소는 더블 언더바 __를 사용, 특정 디자인의 요소일 경우 더블 하이픈 --을 사용한다

 

예를 들어 마크업이 아래와 같다면

<a class="btn btn--red">
	<span class="btn__price"> 9,900원</span>
    	<span class="btn__text"> 구독</span>
</a>

css는 아래처럼 적용한다

.btn {}

.btn__price {}

.btn__text {}

.btn--red {
	background : red;
}

BEM 방법은 익숙해지면 클래스명만 가지고도 어떤 역할을 하는지 어떤 디자인인지 알 수 있어서 유지 보수 작업하기 좋을 것 같다. 

 

 

OOCSS방법의 경우 구조와 모양으로 분리하는 스타일 작업방식으로, 반복적인 것은 별도로 분리하고 컨테이너와 콘텐츠를 분리해서 의존적이지 않은 스타일을 적용하는 방법이라고 한다. 

 

예를들면

<a class="btn blog">blog</a>
<a class="btn instagram">instagram</a>
<a class="btn facebook">facebook</a>

이런 마크업이 있다면 .btn으로 공통스타일을 한번에 주고 다른 스타일을 적용해야한다면 다중 클래스명을 사용해서 스타일을 주는 것이다. 

 

 

지금 내가 스타일을 작업하는 방식은 OOCSS에 더 가까운 것 같은데 프로젝트가 규모가 커지고 SCSS를 사용한다면, 또 수월한 유지 보수 작업을 원한다면 BEM방식을 빨리 익히는게 좋을 것 같다....................

 

 

 

 

참고.

CSS 네이밍 케이스, 방법론 (케밥 kebab-case/파스칼 pascalCase/스네이크snake_case/헝가리)