소제목 짓기도 어려운데😒
게임 캐릭터를 만들 때 한 세월 걸리는 사람이 있다면 그건 바로 나! 블로그 글을 쓸 때도 제목 정하느라 진이 빠져서 정작 본문 쓸 힘도 없어지기 일쑤고, 반려견이 생기면 지어주려고 생각해둔 이름만 열 손가락을 넘어간다.
생각보다 이름을 쉽게 생각하는 사람들도 많겠지만, 개발자들에게 이름이란 꽤나 중요한 문제다. 개발자들의 일이라는 것이 보통은 변수 이름을 선언하는 게 태반이기 때문이다. 게다가 프로그래밍 언어는 보통 영어 기준이기 때문에 영어로 지어야 한다는 심적 부담도 크다!
네이밍 컨벤션이란?
정의
Coding Conventions 중 하나로 소스 코드와 문서에 있는 변수 이름, 타입, 함수 등의 식별자에 사용되는 문자열을 선택하기 위한 여러 규칙이다.
프로젝트, 프로그래밍 언어, 개발 도구 등에 따라 사용되는 종류가 다르다.
필요성
'변수 이름을 정하는 게 뭐가 어렵나?' 싶을 수도 있다. 물론 나 혼자 작업 가능한 규모의 프로젝트라면 일리가 있는 생각이다. 그렇지만 화면에 "Hello, World!"만 띄우더라도 저 문자열을 변수로 저장해서 출력하는 일련의 과정을 거쳐야하는데 프론트엔드와 백엔드로 나뉘어 각 팀을 이룰 정도 규모의 프로젝트라면 어떨까?
여러 명이 작업하게되면 더더욱 문제가 발생한다. 내 짧은 영어 실력에, 나올만한 변수명은 거기서 거긴데다가 변수가 하는 기능도 비슷하다면 열에 두엇은 반드시 이름이 겹치거나 비슷하게 된다. 그럼 에러가 발생하기 쉬워지고 같이 개발하는 사람들에게 혼동을 주게 된다.
우리 모두 갖고 있는 이름을 예시로 생각해보자. 우리나라에서는 성은 부모님의 성을 따르기로 정해진 규칙과 출생 순서에 따라 정해진 돌림자가 있다면 나머지 한 글자만 임의로 정하면 된다. 그렇지만 돌림자가 없다면 성을 제외한 두 글자를 정한다. 단순히 이름 짓기의 편의성만 생각한다면 당연하게도 돌림자가 있는 쪽이 없는 쪽보다는 수고를 덜 들이게 된다.
그래서 일련의 규칙을 정해두고 그 규칙에 따라서 변수명을 정하자는 합의에 도달했다. 이게 바로 "네이밍 컨벤션"이다.
네이밍 컨벤션 규칙은?
네이밍 규칙은 보통 언어에 따라 1차적으로 정하고, 프로젝트를 운영하는 조직의 상황에 따라서 세부적으로 정한다. 따라서 어떤 네이밍 컨벤션을 따르고 싶은지는 필요에 따라서 결정하면 된다.
CSS
개인적으로 회사에서 일하며 네이밍 컨벤션을 작성해야 했을 때, 가장 필요했던 언어는 CSS였다. 보통 CSS는 HTML 요소의 클래스를 전달 받아서 스타일을 적용한다. 그래서 부트스트랩이나 tailwind css 등 라이브러리는 정해진 클래스명을 요소에 부여하고 자동으로 스타일 값이 적용되도록 개발됐다. 이걸 참고로 사내에서 적용할 CSS 네이밍 컨벤션을 작성한 적이 있었는데, 당시에 참고한 방법론이 두 가지 있다. "OOCSS"와 "BEM" 방법론이다.
OOCSS 기법
OOCSS(Object Oriented CSS): CSS를 모듈(module) 방식으로 작성하여 중복을 줄이는 방식
이미 언급했던 tailwind css, 부트스트랩은 이 기법을 활용했다. 공통적으로 적용 가능한 스타일 값을 클래스로 만들어서 요소에 적용하는 방법이다.
/*** 구조와 스타일의 분리 ***/
<div class="nav flex-justify-between"></div>
<div class="slider flex-justify-between"></div>
.flex-justify-between {
justify-content: space-between;
}OOCSS 기법을 사용하면 전반적인 스타일을 쉽게 통일할 수 있다는 장점이 있지만, 클래스에 여러 개의 속성값이 적용되기 때문에 자칫 가독성을 해칠 우려가 있다.
BEM 기법
BEM(Block Element Modifier): 블록(block), 요소(element), 상태(modifier)로 구분하여 클래스 이름을 작성
HTML 요소에 기반해서 스타일을 적용하는 기법이다.
- 블록(block)
: 재사용성이 가능하고 기능적으로 독립이 가능한 컴포넌트다. 보통 태그명을 쓰지만, 길어질 경우엔 '-'를 사용한다.
.header {..}
.main {..}- 요소(element)
: 블록을 구성하는 단위로 '__'를 사용한다.
.header {..}
.header__tap {..}
.header__content {..}
.header__logo__button {..}- 상태(modifier)
: 블록이나 요소의 속성으로 '-'를 사용한다.
.header--hide {..}
.header__tap--big {..}
.header__content--disabled {..}JS
일반적으로 프로그래밍 언어에서는 주로 케이스 명명법을 사용한다. 상황에 따라 스네이크, 카멜, 파스칼 등 다양한 케이스를 적용해서 컨벤션을 구성하면 된다.
snake case (스네이크 표기법)
DB에서 주로 사용하며 변수명, 함수명, 데이터 타입 등으로 사용한다. 전부 소문자로 작성하고 단어 사이에 "_"(언더스코어)를 붙인다.
const snacke_case_naming_convention;camel case (카멜 표기법)
변수와 함수명으로 주로 사용한다. 첫 번째 단어 제외하고 첫 글자를 대문자로 표기하는 방식이다.
const camelCaseNamingConvention;pascal case (파스칼 표기법)
클래스명을 사용할 때 권장한다. 자바스크립트 프레임워크 중 하나인 ReactJS는 클래스 컴포넌트형으로 시작했기 때문에 함수형 컴포형으로 시작했다. 이 때문에 함수형 컴포넌트로 트렌드가 옮겨가는 지금도 컴포넌트를 선언할 때는 파스칼 표기법을 준수하도록 하고 있다. 모든 단어 첫 글자를 대문자로 표기하는 방식이다.
const PascalCaseNamingConvention;kebab case (케밥 표기법)
변수나 함수에는 쓰지 못하게 하는 경우가 있으며 자바스크립트에서도 변수명으로 사용 시에 제대로 인식하지 못한다. 모두 소문자로 표기하고 단어 사이에 "-" 사용한다.
// 자바스크립트에서 변수명으로 인식 X
const kebab-case-naming-convention;scream snake case (스크림 스네이크 케이스)
상수를 표현할 때 사용한다. 모듈 번들러인 webpack이나 vite에서 환경변수를 선언할 때 주로 봤다. 모두 대문자로 표기하고 단어 사이에 "_"(언더스코어) 사용한다.
const SCREAM_SNAKE_CASE_EXAMPLE;결론
중요한 건 결국 조직 내에서 필요한 코딩 컨벤션을 파악하고 문서로 정리하는 것이다. 작업을 할 때 개인의 선호가 있겠지만, 모두의 작업 효율을 위해서 일률적인 컨벤션이 정립될 필요는 분명히 있다고 생각한다.
실제로 그런 필요성을 느껴서 CSS 컨벤션을 만들고 ppt로 올려두었다가 confluence wiki로 전환해 사내에 공유한 경험이 있다.
다소 장황한 설명글이 되었지만, 가독성을 높이기 위해 필요한 컨벤션을 택해서 정리하는 문서를 만들어본다면 DX를 높이는 좋은 경험이 될 것이라고 생각한다!
