pascal kebab camel what should i be using

“케밥”, “파스칼”, “카멜”은 프로그래밍에서 변수, 함수, 클래스 등의 이름을 짓는 네이밍 컨벤션(naming convention)을 가리킵니다. 이 세 가지는 주로 단어 사이를 어떻게 구분하느냐에 따라 나뉘며, 각각의 특징과 사용 사례를 비교해볼게요.

1. 케밥 케이스 (Kebab Case)

• 형태: 단어 사이를 하이픈(-)으로 연결, 모두 소문자.
• 예시: my-variable-name, background-color, data-id
• 특징:
  • 읽기 쉬움: 하이픈이 단어를 명확히 구분해줘 가독성이 좋습니다.
  • 대소문자 구분 없음: 모두 소문자로 통일.
• 사용 사례:
  • HTML/CSS: HTML 속성(class="my-class")이나 CSS 속성(font-size)에서 주로 사용.
  • URL: https://example.com/about-us처럼 경로 이름에 자주 등장.
  • 파일 이름: my-component.vue처럼 하이픈으로 구분.
• 장점: 공백 대신 하이픈을 쓰므로 URL이나 파일 시스템에서 안전.
• 단점: JavaScript 변수명으로는 사용할 수 없음(하이픈은 연산자로 인식됨).

---

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

• 형태: 각 단어의 첫 글자를 대문자로, 공백 없이 붙임.
• 예시: MyComponent, UserProfile, FirstName
• 특징:
  • 첫 글자 대문자: 클래스나 생성자 함수를 나타낼 때 적합.
  • 단어 구분 명확: 대문자로 단어 시작을 알림.
• 사용 사례:
  • 클래스/컴포넌트 이름: JavaScript/TypeScript의 클래스(class UserProfile)나 Vue/React 컴포넌트 이름(<MyComponent>).
  • 생성자 함수: function Person(name) {...}.
• 장점: 객체 지향 프로그래밍에서 클래스나 타입을 직관적으로 표현.
• 단점: 변수명으로 쓰기엔 다소 무거운 느낌이 들 수 있음.

---

3. 카멜 케이스 (Camel Case)

• 형태: 첫 단어는 소문자, 이후 단어는 첫 글자만 대문자로, 공백 없이 붙임.
• 예시: myVariable, getUserData, firstName
• 특징:
  • 첫 글자 소문자: 변수나 함수에 적합.
  • “낙타 등”처럼 보임: 소문자로 시작해 중간에 대문자가 올라갔다 내려옴.
• 사용 사례:
  • 변수/함수 이름: JavaScript에서 변수(let userName)나 함수(function calculateTotal())에 주로 사용.
  • JSON 키: { "firstName": "John" }.
• 장점: JavaScript와 같은 언어에서 표준으로 널리 사용됨.
• 단점: 긴 이름일수록 가독성이 약간 떨어질 수 있음(예: getUserProfileData).

---

비교 표

| 구분 | 케밥 케이스 | 파스칼 케이스 | 카멜 케이스 | |——————-|———————–|———————|———————| | 형태 | my-name | MyName | myName | | 단어 구분 | 하이픈(-) | 대문자 | 대문자 | | 첫 글자 | 소문자 | 대문자 | 소문자 | | 주요 사용처 | HTML, CSS, URL | 클래스, 컴포넌트 | 변수, 함수 | | 가독성 | 높음 | 중간~높음 | 중간 | | 언어 제약 | JS 변수로 사용 불가 | 사용 가능 | 사용 가능 |

---

Vue.js에서의 사용 예

Vue 프로젝트에서 이 세 가지가 어떻게 쓰이는지 보겠습니다:

• 케밥 케이스:
  • 템플릿에서 컴포넌트 태그: <my-component> (HTML은 대소문자 구분 안 하므로 케밥으로 변환됨).
  • CSS 클래스: .my-class { ... }.
• 파스칼 케이스:
  • 컴포넌트 정의: export default { name: 'MyComponent' }.
  • 컴포넌트 파일명: MyComponent.vue.
• 카멜 케이스:
  • 데이터 속성: data() { return { userName: '' } }.
  • 메서드: methods: { getUserData() { ... } }.

주의점

Vue에서 컴포넌트를 템플릿에 쓸 때 MyComponent로 정의해도 <my-component>로 케밥 케이스 형태로 사용해야 합니다. 이는 HTML 표준 때문이에요.

---

어떤 걸 써야 할까?

• 상황에 따라 다름: 언어와 컨텍스트에 맞게 선택.
  • JavaScript 변수/함수 → 카멜 케이스.
  • 클래스/컴포넌트 → 파스칼 케이스.
  • HTML/CSS/URL → 케밥 케이스.
• 일관성 유지: 프로젝트 내에서 팀과 규칙을 정해 일관되게 사용하는 게 중요합니다.

---

결론

• 케밥: 하이픈으로 구분, HTML/CSS에 최적화.
• 파스칼: 대문자로 시작, 클래스나 컴포넌트에 적합.
• 카멜: 소문자로 시작, 변수와 함수에 자연스러움.

각각의 용도가 다르니, 쓰임새에 맞춰 적절히 선택하면 됩니다. 더 궁금한 점 있으면 물어보세요!