camelCase란
카멜 케이스(camelCase)는 단어를 공백 없이 붙여 쓰는 표기법입니다. 첫 단어는 소문자로 두고 그 뒤의 단어는 모두 대문자로 시작합니다. 카멜 케이스 변환기에 넣으면 다음처럼 바뀝니다.
first name은firstName이 됩니다total_order_count는totalOrderCount가 됩니다is-logged-in은isLoggedIn이 됩니다
프로그래밍 언어는 이름에 공백을 허용하지 않기 때문에, 한 단어가 끝나고 다음 단어가 시작되는 지점을 표시할 방법이 필요합니다. camelCase는 그 경계를 대문자로 나타냅니다.
변환기가 텍스트를 읽는 방식
이 도구는 먼저 단어의 경계를 찾은 다음 단어들을 이어 붙입니다. 다음 위치에서 단어를 나눕니다.
- 공백과 탭
- 밑줄, 하이픈, 점, 슬래시
- 소문자 바로 뒤에 오는 대문자. 그래서
UserName은 “User”와 “Name”으로 읽습니다
그다음 첫 단어를 소문자로 바꾸고, 나머지 단어는 첫 글자를 대문자로 바꾼 뒤 구분 기호를 없앱니다. 아포스트로피는 지워지므로 “don’t stop”은 dontStop이 됩니다. 숫자는 그대로 남습니다.
각 줄은 따로 처리합니다. 데이터베이스 필드 한 열이나 JSON 키 목록을 한 번에 변환하기 편합니다.
| 입력 | 결과 |
|---|---|
| user first name | userFirstName |
| order_total_amount | orderTotalAmount |
| background-color | backgroundColor |
| GetUserById | getUserById |
| API response code | apiResponseCode |
한글 단어도 하나의 단어로 인식되지만, 한글에는 대문자가 없어서 경계가 드러나지 않습니다. ‘사용자 이름’은 사용자이름처럼 그냥 붙어 버리고, ‘user 이름’은 user이름이 됩니다. JavaScript, Java, Python 등 많은 언어가 한글 식별자를 문법적으로 허용하지만, 실무에서는 변수 이름을 영어로 짓는 것이 일반적입니다.
camelCase를 쓰는 곳
- JavaScript와 TypeScript: 변수, 함수, 객체 속성
- Java, Kotlin, Swift: 변수와 메서드 이름
- JSON: 많은 웹 API의 키
- C#: 지역 변수와 매개변수
- CSS in JavaScript:
background-color대신backgroundColor
다른 표기법을 선호하는 언어도 있습니다. Python과 Ruby는 변수에 snake_case를 쓰고, 대부분의 언어에서 클래스 이름은 PascalCase로 씁니다.
자주 하는 변환
snake_case를 camelCase로. Python이나 SQL 백엔드가 JavaScript 프론트엔드로 데이터를 보낼 때 유용합니다. 필드 이름을 붙여넣고 목록째 변환하면 됩니다.
kebab-case를 camelCase로. CSS 속성과 HTML 속성은 하이픈을 씁니다. JavaScript에서 이를 다루려면 camelCase가 필요합니다. 예를 들어 data-user-id는 dataUserId가 됩니다.
일반 단어를 camelCase로. “is email verified”처럼 설명을 입력하면 바로 쓸 수 있는 변수 이름이 나옵니다.