오늘은 변수 네이밍규칙들에 대해서 공부를 해볼까 합니다.
회사에서 프론트팀을 관리해줄 관리자자리가 꽤 오랜 공석끝에, 드디어 새로운 팀장님이 오셨습니다.
컨벤션을 잡는 시간을 가졌는데,
특히 변수, 함수, 컴포넌트, 클래스, 라우팅, 상수 기타 등등
모든 이름을 어떤 표기법으로 적을지에 관해 오랜 시간 팀원들과 팀장님이 대화를 나눴습니다.

어느 개발자든지 코딩을 하면서 네이밍에 대해서 언제나 고민하면서 골아파했던 경험이 있을겁니다.
저 또한 항상 네이밍 때문에 너무 골치 아프며, 심지어 개인 프로젝트할때는 가끔 같은 이름으로 변수를 짓기도 합니다.
(진짜 안좋은 습관이라서 안 그럴려고 엄청 노력하고 있습니다..)

그래도 진짜 네이밍 때문에 골아픈건 너무 인정...

(도끼 문어를 보면서 마음을 달래 봅니다...)

그래도 다행인건,
네이밍을 위한 표기법을 만들어 규칙이 있고, 우린 그 규칙에 따라서 어느정도 편하게 네이밍을 할 수 있게 되었습니다.
표기법만 잘 알고 있으면, 클래스 인스턴스처럼 붕어빵 만들기가 되는거죠.

표기법들과는 다르게 나만의 네이밍 규칙으로는
함수에는 꼭 함수의 액션으로 네이밍을 시작합니다.
즉, 동사로 시작하는 이름을 짓습니다.
변수명은 함수와는 반대로 명사들만으로 이름을 짓습니다.

잘못됐다, 상관없다를 떠나서 네이밍부터 다시 잡아가는 의미에서 네이밍 표기법을 정리 해보려 합니다.

카멜 표기법

제일 흔하고, 쉽게 접근할 수 있는 표기법이라고 생각합니다.
단어와 단어 사이를 대문자로 구분하고 시작은 소문자로 시작합니다.
단어를 사이에 대문자로 폰트가 커지기 때문에 그 모양이 낙타를 닮아서, 낙타(camel) 표기법이라고 지어졌다고 하네요.

예를 들어 보자면,

	const musicList = [];
    let musicCount = 1;
    const isLeft = false;
    const userData = {};
    function addMusicList(){} 

와 같이 예를 들 수 있다.

스네이크 표기법

html 작성 하면서, class 이름을 지을때 많이 사용 했습니다.
class = 섹션콘텐츠 와 같이 네이밍을 하고 css 파일에서 좀더 직관적으로 어느 섹션과 어느 콘텐츠인지를 알 수 있게 하기 위함이었다.
해당 표기법은 모두 소문자로 작성하며 카멜 케이스에서 단어와 단어 사이라는 기준에 를 붙여서 명명한다.

	const music_list = [];
    let music_count = 1;
    const is_left = false;
    const user_data = {};
    function add_musicList(){}

js 파일에서 사용하기에는 가독성이 떨어지는건 내 개인적인 생각인지 모르겠지만, 상황에 맞게 잘 사용한다면 가독성을 상당히 높여줄꺼같다.

파스칼 표기법

카멜케이스와 아주 흡사하다. 표기법은 모두 동일하나, 딱 하나 모든 단어의 첫 글자를 대문자로 바꿔준다.
예를 들어 보면,

	const MusicList = [];
    let MusicCount = 1;
    const IsLeft = false;
    const UserData = {};
    function AddMusicList(){}

해당 표기법은 네이밍의 젤 첫 글자도 대문자로 표기되기에 나의 인상으로는 해당 변수는 아주 중요한 데이터라고 생각할꺼 같다.

케밥 표기법

스네이크와 아주 흡사하다. 스네이크에서 사용한 모든 _를 그냥 -으로 표기하면 된다.

	const music-list = [];
    let music-count = 1;
    const is-left = false;
    const user-data = {};
    function add-musicList(){}

포스팅을 하기에는 양이 많이 없어 보이지만, 년차에 상관없이 모든 개발자가 한번은 잘 되새기고 넘어가야하는 개념이라고 생각한다.
오늘 이 포스팅에서 모든 개념을 잘 익혀서 도움이 되었으면 좋겠습니다.