·2분 읽기
케이스 변환 5가지 - camelCase·snake_case·kebab-case 언제 무엇을 쓰나
변수명·파일명·URL에 쓰이는 5가지 케이스 표기법 차이와 언어별 표준 정리. 케이스 잘못 쓰면 라이브러리 호환성 깨지고 SEO 영향까지.
🔠
대소문자 변환 바로 사용하기
텍스트를 다양한 형식으로 변환하세요
→
5가지 케이스 표기법 한눈에
**camelCase (낙타)**
- 예: `userName`, `getTotalPrice`
- 시작 소문자 + 단어 시작마다 대문자
- JavaScript·Java 변수·함수 표준
**PascalCase (파스칼)**
- 예: `UserProfile`, `ApiClient`
- 모든 단어 시작 대문자
- 클래스·컴포넌트 (React) 표준
**snake_case (뱀)**
- 예: `user_name`, `total_price`
- 단어 사이 언더스코어 + 모두 소문자
- Python·Ruby·DB 컬럼 표준
**kebab-case (꼬치)**
- 예: `user-name`, `total-price`
- 단어 사이 하이픈 + 모두 소문자
- HTML 속성·CSS 클래스·URL 표준
**SCREAMING_SNAKE_CASE**
- 예: `MAX_RETRY`, `API_KEY`
- 모두 대문자 + 언더스코어
- 상수(constants) 표준
언어별 표준 케이스
**JavaScript / TypeScript**
- 변수·함수: camelCase
- 클래스·컴포넌트: PascalCase
- 상수: SCREAMING_SNAKE
- 파일명: kebab-case 또는 PascalCase
**Python**
- 변수·함수: snake_case
- 클래스: PascalCase
- 상수: SCREAMING_SNAKE
- 파일명: snake_case
**Ruby**
- 변수·메서드: snake_case
- 클래스·모듈: PascalCase
- 상수: SCREAMING_SNAKE
**Go**
- 공개 변수·함수: PascalCase (export)
- 비공개: camelCase
- 파일명: snake_case
**HTML / CSS / URL**
- 모두 kebab-case
- HTML 속성: `data-user-id`
- CSS 클래스: `.btn-primary`
- URL: `/user-profile`
**SQL / DB**
- 테이블·컬럼: snake_case
- 일관성 유지가 가독성 핵심
케이스 잘못 쓰면 생기는 사고
**사고 1: 라이브러리 호환성 깨짐**
React 컴포넌트는 PascalCase 필수. `<userprofile />` → 인식 안 됨. `<UserProfile />`만 React가 컴포넌트로 인식.
**사고 2: SEO 영향**
URL에 camelCase 쓰면 (`/userProfile`) 일부 검색엔진이 단어 분리 못함. kebab-case (`/user-profile`)이 SEO 안전.
**사고 3: 데이터베이스 마이그레이션 실패**
DB 컬럼 `userName` (camelCase) → API 응답 `user_name` (snake_case) 변환 누락 시 프론트엔드 데이터 누락.
**사고 4: Linter 에러**
ESLint·Pylint 같은 도구가 케이스 위반 자동 감지. PR 시 자동 reject 가능성.
**사고 5: 팀 컨벤션 충돌**
같은 프로젝트 내 케이스 혼용 시 가독성 폭락. 팀 시작 시 케이스 컨벤션 문서화 필수.
Toolkio 케이스 변환 도구 활용
**5가지 변환 한 번에**
1. 텍스트 입력란에 변환할 단어 입력
2. 케이스 5종 결과 동시 표시
3. 클릭 한 번으로 복사
4. URL·CSS·DB 컬럼 등 즉시 적용
**활용 사례**
- 신규 프로젝트 변수명 통일
- 다른 언어 → 본인 언어 케이스 변환
- 파일명 일괄 변경 (CMS·블로그)
- API 응답 매핑 (snake → camel)
**팁**
팀 작업 시 케이스 컨벤션 README에 명시. 자동 변환 라이브러리 (lodash camelCase·snakeCase) 활용으로 사고 예방.