네이밍 컨벤션 4가지: 카멜, 스네이크, 파스칼, 케밥 케이스

프로그래밍에서 네이밍 컨벤션은 코드의 가독성과 유지보수성을 크게 향상시킵니다.

이때 사용할 수 있는 4가지의 네이밍 컨벤션을 설명하겠습니다.

---

1. 카멜 케이스 (Camel Case)

첫 단어는 소문자로 시작하고, 이후 각 단어의 첫 글자를 대문자로 표기하는 방식입니다.

// 변수명
let firstName = "Kimjunsu";
const maxCount = 100; 
let isActive = true;

// 함수명
function getUserData() { ... }
function calculateTotal() { ... }

// 객체의 프로퍼티
const user = {
    firstName: "Kim",
    lastName: "Junsu",
    phoneNumber: "123-456-7890"
};

• 낙타의 등 모양을 닮았다고 해서 이름이 붙여졌습니다.

• 자바스크립트의 기본적인 네이밍 컨벤션으로 가장 많이 사용하는 종류입니다.
• 가독성이 좋고 타이핑이 용이합니다.

---

2. 스네이크 케이스 (Snake Case)

단어와 단어 사이를 언더스코어(_)로 구분하는 방식입니다.

// 상수
const MAX_RETRY_COUNT = 3;
const DEFAULT_API_URL = "https://dietisdie.tistory.com";

// 환경 변수
const DB_USER = "admin";
const API_SECRET_KEY = "4134262412321";

• 단어가 연결되어 있는 모양이 뱀을 닮아서 스네이크 케이스라고 불린다.
• c프로그래밍에서 널리 사용되면서 확산되었다.
• 데이터베이스에서 자주 사용된다.

---

3. 파스칼 케이스 (Pascal Case)

모든 단어의 첫 글자를 대문자로 표기하는 방식입니다.

// 클래스
class UserAccount {
    constructor() { ... }
}

// React 컴포넌트
function HeaderComponent() { ... }
class LoginForm extends React.Component { ... }

• Pascal 프로그래밍 언어에서 유래되었다.
• 클래스와 생성자 함수에서 주로 사용한다.
• React 컴포넌트의 표준 네이밍 방식이다.

---

4. 케밥 케이스 (Kebab Case)

단어와 단어 사이를 하이픈(-)으로 구분하는 방식입니다.

<!-- HTML 요소 -->
<div class="main-container">
    <header class="site-header">
        <nav class="navigation-menu">
    </header>
</div>

<!-- CSS -->
.button-primary {
    background-color: #007bff;
}

• 근육이 붙어있는 스테이크 모양을 연상시켜 Kebab이라 네이밍 지었다.
• HTML과 CSS에서 주로 사용한다.
• SEO에 유리하다. URL의 구분은 - 로 되어있기 때문이다.