🔠 Case Converter

📝 Input Text

ℹ️ About Case Converter

Programming Cases

Convert text to camelCase, PascalCase, snake_case, kebab-case, and CONSTANT_CASE for different programming languages.

Smart Detection

Automatically detects input format (spaces, underscores, hyphens, camelCase) and converts to all formats.

One-Click Copy

Copy any result to clipboard with a single click.

📚 Case 변환이란?

Case 변환은 텍스트의 대소문자와 구분자(공백, 언더스코어, 하이픈 등)를 특정 명명 규칙에 맞게 변환하는 작업입니다. 프로그래밍에서 변수명, 함수명, 클래스명 등을 작성할 때 언어나 프레임워크의 코딩 컨벤션을 따르기 위해 사용됩니다.

🎯 왜 명명 규칙이 중요한가요?

  • 가독성 향상 - 일관된 네이밍으로 코드 이해가 쉬워집니다
  • 팀 협업 - 통일된 규칙으로 협업 효율이 증가합니다
  • 유지보수 - 코드 수정 및 확장이 용이해집니다
  • 자동화 도구 - Linter, Formatter와의 호환성이 좋아집니다
  • 전문성 - 업계 표준을 따르는 코드는 신뢰성이 높습니다

🔠 주요 Case 유형

1. camelCase

getUserInformation

규칙: 첫 단어는 소문자, 이후 단어는 대문자로 시작

주요 사용:

  • JavaScript/TypeScript 변수명, 함수명
  • Java 변수명, 메서드명
  • C# 변수명 (private 필드 제외)
  • JSON 키 이름
예시:firstName, totalAmount, calculateTotalPrice

2. PascalCase (UpperCamelCase)

UserInformation

규칙: 모든 단어의 첫 글자를 대문자로

주요 사용:

  • JavaScript/TypeScript 클래스명, 컴포넌트명
  • C#, Java 클래스명, 인터페이스명
  • React 컴포넌트명
  • Python 클래스명
예시:UserProfile, DatabaseConnection, ApiResponse

3. snake_case

user_information

규칙: 모두 소문자, 단어 사이에 언더스코어(_)

주요 사용:

  • Python 변수명, 함수명 (PEP 8 표준)
  • Ruby 변수명, 메서드명
  • 데이터베이스 테이블명, 컬럼명
  • 파일명 (일부 프로젝트)
예시:first_name, total_amount, calculate_total_price

4. SCREAMING_SNAKE_CASE

USER_INFORMATION

규칙: 모두 대문자, 단어 사이에 언더스코어(_)

주요 사용:

  • 상수 (모든 언어에서 거의 표준)
  • 환경 변수 (.env 파일)
  • 매크로 정의 (C/C++)
  • 전역 설정 값
예시:MAX_RETRIES, API_BASE_URL, DATABASE_CONNECTION_STRING

5. kebab-case

user-information

규칙: 모두 소문자, 단어 사이에 하이픈(-)

주요 사용:

  • URL 경로 (SEO 친화적)
  • CSS 클래스명
  • HTML 속성명
  • 파일명 (프론트엔드 프로젝트)
예시:user-profile, nav-menu-item, data-user-id

6. Train-Case

User-Information

규칙: 각 단어 첫 글자 대문자, 하이픈(-) 구분

주요 사용:

  • HTTP 헤더명
  • 일부 설정 파일
  • 제목 스타일 URL
예시:Content-Type, X-Api-Key, User-Agent

🎯 사용 사례

1. 코딩 컨벤션 준수

다양한 언어를 사용하는 프로젝트에서 각 언어의 표준 네이밍 규칙을 따르기 위해 변수명을 변환합니다. 예를 들어, Python API에서 받은 user_name을 JavaScript에서 userName으로 변환하여 사용합니다.

2. 데이터베이스 매핑

데이터베이스의 snake_case 컬럼명을 애플리케이션의 camelCase 프로퍼티로 변환하거나, 반대로 변환할 때 유용합니다. ORM 설정에서도 자주 사용됩니다.

DB: created_at ↔ App: createdAt

3. API 인터페이스 통합

서로 다른 네이밍 규칙을 사용하는 여러 API를 통합할 때, 일관된 내부 데이터 구조로 변환하여 코드의 일관성을 유지합니다.

4. 코드 리팩토링

기존 프로젝트의 네이밍 규칙을 변경하거나, 코드 리뷰 후 일관성 없는 변수명을 일괄 수정할 때 사용합니다.

5. URL 및 파일명 생성

제목이나 이름을 URL-safe한 kebab-case로 변환하거나, 파일명 규칙에 맞게 변환할 때 유용합니다.

"User Profile Settings" → user-profile-settings.html

🛠️ 사용 방법

  1. 텍스트 입력

    변환하려는 텍스트를 입력란에 입력합니다. 공백, 언더스코어, 하이픈 등 어떤 형식이든 가능합니다.

  2. 변환 유형 선택

    원하는 case 유형(camelCase, snake_case, kebab-case 등)을 선택합니다.

  3. 자동 변환

    선택한 유형으로 자동 변환된 결과를 확인합니다.

  4. 복사 및 사용

    변환된 텍스트를 클립보드에 복사하여 프로젝트에 사용합니다.

🌐 언어별 네이밍 규칙

언어변수/함수클래스상수파일명
JavaScript/TypeScriptcamelCasePascalCaseSCREAMING_SNAKEcamelCase or kebab-case
Pythonsnake_casePascalCaseSCREAMING_SNAKEsnake_case
JavacamelCasePascalCaseSCREAMING_SNAKEPascalCase
C#camelCasePascalCasePascalCasePascalCase
Rubysnake_casePascalCaseSCREAMING_SNAKEsnake_case
GocamelCasePascalCasePascalCase or camelCasesnake_case
Rustsnake_casePascalCaseSCREAMING_SNAKEsnake_case
PHPcamelCase or snake_casePascalCaseSCREAMING_SNAKEPascalCase or kebab-case

💻 코드 예시

JavaScript - API 응답 변환

// Python API에서 받은 데이터 (snake_case)
const apiResponse = {
  user_id: 123,
  first_name: "John",
  last_name: "Doe",
  created_at: "2024-01-01"
};

// JavaScript 객체로 변환 (camelCase)
const user = {
  userId: apiResponse.user_id,
  firstName: apiResponse.first_name,
  lastName: apiResponse.last_name,
  createdAt: new Date(apiResponse.created_at)
};

Python - 자동 변환 함수

import re

def to_snake_case(text):
    """camelCase를 snake_case로 변환"""
    # 대문자 앞에 언더스코어 추가
    s1 = re.sub('(.)([A-Z][a-z]+)', r'\1_\2', text)
    # 연속된 대문자 처리
    return re.sub('([a-z0-9])([A-Z])', r'\1_\2', s1).lower()

def to_camel_case(text):
    """snake_case를 camelCase로 변환"""
    components = text.split('_')
    return components[0] + ''.join(x.title() for x in components[1:])

# 사용 예시
print(to_snake_case("getUserInformation"))  # user_get_information
print(to_camel_case("user_get_information")) # userGetInformation

TypeScript - 타입 변환 유틸리티

type CamelToSnake<S extends string> =
  S extends `${infer T}${infer U}`
    ? `${T extends Capitalize<T>
        ? "_"
        : ""}${Lowercase<T>}${CamelToSnake<U>}`
    : S;

// 사용 예시
type UserInfo = {
  userId: number;
  firstName: string;
  lastName: string;
};

type DbUserInfo = {
  [K in keyof UserInfo as CamelToSnake<K & string>]: UserInfo[K];
};
// 결과: { user_id: number, first_name: string, last_name: string }

CSS/HTML - 네이밍 규칙

<!-- HTML: kebab-case 사용 -->
<div class="user-profile-card">
  <h2 class="profile-title">User Profile</h2>
  <div class="profile-content">
    <!-- data 속성도 kebab-case -->
    <span data-user-id="123">John Doe</span>
  </div>
</div>

<style>
/* CSS: kebab-case 사용 */
.user-profile-card {
  border: 1px solid #ddd;
  padding: 1rem;
}

.profile-title {
  font-size: 1.5rem;
  color: #333;
}
</style>

❓ 자주 묻는 질문 (FAQ)

Q1. 어떤 case를 사용해야 하나요?

A. 사용하는 언어와 컨텍스트에 따라 다릅니다:

JavaScript/TypeScript: 변수는 camelCase, 클래스는 PascalCase, 상수는 SCREAMING_SNAKE_CASE
Python: 변수와 함수는 snake_case, 클래스는 PascalCase, 상수는 SCREAMING_SNAKE_CASE
URL/CSS: kebab-case (SEO 및 가독성에 유리)
데이터베이스: snake_case (대부분의 DB에서 표준)
환경변수: SCREAMING_SNAKE_CASE (모든 플랫폼에서 표준)

가장 중요한 것은 프로젝트 내에서 일관성을 유지하는 것입니다.

Q2. camelCase와 PascalCase의 차이는?

A. 첫 글자만 다릅니다:

camelCase: 첫 글자 소문자 (예: getUserName) - 주로 변수, 함수, 메서드명
PascalCase: 첫 글자 대문자 (예: GetUserName) - 주로 클래스, 컴포넌트, 타입명

PascalCase는 "UpperCamelCase"라고도 불립니다. 두 스타일 모두 단어 사이 공백 없이 각 단어의 첫 글자를 대문자로 표기합니다.

Q3. kebab-case는 언제 사용하나요?

A. 주로 URL, CSS, HTML에서 사용합니다:

URL: example.com/user-profile-settings (SEO 친화적, 읽기 쉬움)
CSS 클래스: .nav-menu-item (CSS 표준 관행)
HTML 속성: data-user-id (HTML5 표준)
파일명: user-profile-component.vue (일부 프레임워크)

⚠️ 주의: 대부분의 프로그래밍 언어에서는 하이픈(-)을 변수명에 사용할 수 없습니다. JavaScript에서 user-name은 "user 빼기 name"으로 해석됩니다!

Q4. 약어는 어떻게 처리하나요?

A. 스타일에 따라 다르지만, 일관성이 가장 중요합니다:

camelCase/PascalCase:
• 옵션 1 (권장): 첫 글자만 대문자 - apiUrl, httpRequest, XmlParser
• 옵션 2: 모두 대문자 - apiURL, httpRequest, XMLParser

snake_case:
• 모두 소문자 - api_url, http_request, xml_parser

SCREAMING_SNAKE_CASE:
• 모두 대문자 - API_URL, HTTP_REQUEST, XML_PARSER

Google 스타일 가이드는 옵션 1을 권장합니다 (예: XmlHttpRequest).

Q5. 숫자가 포함된 경우는 어떻게 하나요?

A. 숫자는 일반 문자처럼 처리합니다:

camelCase: user2Name, api2Client, base64Encode
PascalCase: User2Name, Api2Client, Base64Encoder
snake_case: user_2_name, api_2_client, base64_encode
kebab-case: user-2-name, api-2-client, base64-encode

일반적으로 숫자 앞뒤로 단어가 있으면 숫자도 별도 단어로 취급합니다. 하지만 base64처럼 하나의 개념인 경우 분리하지 않습니다.

Q6. 기존 프로젝트의 네이밍을 변경해야 하나요?

A. 상황에 따라 다릅니다:

변경해야 하는 경우:
• 팀의 새로운 코딩 표준을 도입할 때
• 오픈소스 프로젝트에서 업계 표준을 따르기 위해
• Linter/Formatter 도구와 충돌이 발생할 때

변경하지 않아도 되는 경우:
• 프로젝트가 안정적이고 일관된 자체 규칙을 가진 경우
• 변경으로 인한 리스크(버그, 충돌)가 이득보다 큰 경우
• 레거시 시스템과의 호환성이 필요한 경우

변경한다면 점진적으로 진행하고, 충분한 테스트를 거쳐야 합니다.

💡 사용 팁

  • 일관성 유지: 프로젝트 전체에서 동일한 네이밍 규칙을 사용하세요.
  • 언어 표준 따르기: 각 언어의 공식 스타일 가이드를 참고하세요 (PEP 8, Airbnb Style Guide 등).
  • 자동화 도구: ESLint, Prettier, Black 등의 도구로 네이밍 규칙을 자동으로 검사하세요.
  • 의미 있는 이름: case 변환만큼 중요한 것은 변수명 자체의 의미입니다. x1보다 userAge가 훨씬 좋습니다.
  • 너무 길지 않게: getUserInformationFromDatabaseById보다 getUserById가 더 읽기 쉽습니다.
  • 약어 주의: 팀원 모두가 이해할 수 있는 약어만 사용하세요. btn(button)은 OK, usrMgmtSvc는 NG.
  • Context 고려: 데이터베이스는 snake_case, API는 camelCase, URL은 kebab-case가 일반적입니다.
  • Boolean 변수: isActive, hasPermission, canEdit처럼 동사로 시작하면 가독성이 좋습니다.
  • 배열/리스트: 복수형을 사용하세요 (users, items, productList).

⚠️ 주의사항

  • 예약어 피하기: class, function, if 등 언어의 예약어는 변수명으로 사용하지 마세요.
  • 특수문자 제한: kebab-case의 하이픈(-)은 대부분의 프로그래밍 언어에서 변수명에 사용 불가합니다.
  • 공백 불가: 모든 프로그래밍 언어에서 변수명에 공백은 사용할 수 없습니다.
  • 숫자로 시작 금지: 대부분의 언어에서 2user는 불가능합니다. user2는 가능합니다.
  • 대소문자 구분: JavaScript는 userNameusername을 다른 변수로 인식합니다. 혼동 주의!
  • 자동 변환 검증: 자동 변환된 결과가 의도한 대로 되었는지 확인하세요. 특히 약어나 숫자가 포함된 경우.
  • 데이터베이스 마이그레이션: 컬럼명 변경 시 데이터 손실에 주의하고 백업을 필수로 하세요.
  • API 호환성: 외부 API의 네이밍 규칙을 변경할 수 없으므로, 내부적으로만 변환하여 사용하세요.
  • Git 충돌: 대량의 네이밍 변경은 merge conflict를 유발할 수 있으니 신중하게 진행하세요.