2022.02.08(Tue.) <자바스크립트 작명소>

진짜 개발자는 코드보다 작명에 더 오랜시간을 사용합니다.

1. 문제의 발단

항상 생각했던 문제였다. 자연스럽게 알고 있는 명명규칙을 사용하고 있었는데, 매번 헷갈렸다. 따로 공부를 하기보다는 다른 사람들이 짠 코드나 레퍼런스 등을 보고 알게 된 것일 것이다. 그래서 이 기회에 확실히 알고 넘어가려고 한다.

 

2. 작명의 중요성

• 코드 가독성에 가장 중요한 요소가 된다.
• 예를들어, 변수명을 'a'라고 해놨다. 아무리 const로 재선언, 재할당을 막아도 분명 겹칠 수 있고, 가장 중요한 건 어떤 변수인지 알 수가 없다.

 

3. 작명 규칙

1. 변수와 함수는 '카멜 케이스'를 사용한다.
   • 각 네이밍 컨벤션을 알아보자. 
     1. 카멜 케이스(camelCase) : 첫번째 문자를 소문자, 띄어쓰기 대신에 대문자를 사용한다.
     2. 파스칼 케이스(PascalCase) : 각 어절마다 대문자를 사용한다.
     3. 스네이크 케이스(snake_case) : 띄어쓰기 대신 '_' (언더바)를 사용한다.
2. 약어(ex: HTML 등)는 대문자 '스네이크 케이스'를 사용한다.
3. 생성자 함수는 대문자의 '카멜 케이스'를 사용한다.
   • 생성자 함수 : new Array 처럼 유사한 객체를 여러 개 만들 때 사용할 수 있는 함수. 실행시킬 때는 'new'와 함께 사용한다.
4. 상수의 이름에서 어절을 띄울때나 Private 변수는 '_' (언더바)로 시작한다.
5. 이미 선언, 할당이 되어 있는 '예약어'(ex: if, for, const)등을 선언하지 않는다.
6. 전역 변수 선언인 'var'을 사용하지 않는다.
7. 선언된 이름이 뜻하는 바가 없는 암묵적인 변수(ex: foo, good, hi 등)를 사용하지 않는다.
8. 폴더의 이름은 '-' (하이픈)을 이용해 띄어쓰기를 표현하고, 소문자를 사용한다.

 

4. 덤으로 알아보는 CSS 규칙

1. SASS나 LESS에서는 변수를 선언할 수 있다. 이때, BEM 페턴을 사용하기 좋다.
   • BEM(Block Element Modifier) : 각 요소들의 class를 
     • B -  Block : 가장 큰 컨테이너를 말한다. class 네이밍 규칙은 소문자인 한 단어로 만든다. 그리고 id는 사용하지 않는다. 마지막으로, 다른 block 요소의 자식이 될 수 없다.
     • E - Element : block 요소안의 요소이다. class 네이밍 규칙은 "__" (언더바 두 개)로 띄어쓰기를 구분하며, 블록 이름을 앞에 적고 block__element처럼 사용한다. 
     • M - Modifier : 블럭이나 엘리먼트 요소의 상태를 변경한다. class 네이밍 규칙은 block의 상태를 변경할 때는 "--" (하이픈 두 개), element의 상태를 변경할 때에는 block--element--modifier처럼 사용한다.
2. 간단한 프로젝트일 경우, '-'을 이용해서 띄여쓰기만 구분하기도 한다.