대소문자 변환기 — UPPERCASE, lowercase, camelCase

대소문자 변환기란 무엇인가요?

// The tokenizer that powers every programming-case conversion
function tokenize(input) {
  return input
    .replace(/([a-z0-9])([A-Z])/g, '$1 $2')      // lower→upper: parseHTML → parse HTML
    .replace(/([A-Z]+)([A-Z][a-z])/g, '$1 $2')   // acronym boundary: XMLHttp → XML Http
    .replace(/([A-Za-z])(\d)/g, '$1 $2')          // letter→digit: file2 → file 2
    .replace(/(\d)([A-Za-z])/g, '$1 $2')          // digit→letter: 2x → 2 x
    .replace(/[\s\-_./\\]+/g, ' ')                // collapse separators
    .split(' ').filter(Boolean);
}

// Then each case is a one-liner over the tokens
const camelCase  = (s) => tokenize(s).map((t, i) => i === 0 ? t.toLowerCase() : cap(t)).join('');
const snakeCase  = (s) => tokenize(s).map(t => t.toLowerCase()).join('_');
const kebabCase  = (s) => tokenize(s).map(t => t.toLowerCase()).join('-');
const PascalCase = (s) => tokenize(s).map(cap).join('');

function cap(t) {
  return t.charAt(0).toUpperCase() + t.slice(1).toLowerCase();
}

주요 기능

대소문자 변환기 대안 비교

케이스 변환 예시

URGENT: PLEASE REVIEW THE Q4 BUDGET PROPOSAL BEFORE FRIDAY

user_profile_image_url

XMLHttpRequest

10 Tips for Faster JavaScript: A Complete Guide

accessControlAllowOrigin

max retries per request

this is fine, everything is going great

대소문자 변환기 사용 방법

1. 1

   텍스트 입력 또는 붙여넣기

   편집기를 클릭해 입력하거나 어떤 텍스트든 붙여넣으십시오 — 문장, 단락, 식별자, 제목. 모든 케이스 출력이 즉시 갱신됩니다. 케이스가 어떻게 다른지 보고 싶다면 샘플을 클릭해 대표 문구를 로드하십시오.

2. 2

   그리드 훑어보기

   7가지 text cases(UPPERCASE, lowercase, Title, Sentence, iNVERSE, aLtErNaTiNg, RaNdOm)는 위쪽 영역에 있습니다. 8가지 programming cases(camelCase, PascalCase, snake_case, kebab-case, CONSTANT_CASE, dot.case, path/case, Header-Case)는 아래쪽 영역에 있습니다. 각 카드는 케이스 라벨, 한 줄 설명, 변환된 출력을 표시합니다.

3. 3

   원하는 케이스의 복사 클릭

   각 출력 카드에는 자체의 작은 복사 버튼이 있습니다. 한 번 클릭하면 — 케이스가 클립보드에 들어가고, 버튼이 "복사됨!"으로 깜박이며, 다른 곳에 붙여넣을 준비가 됩니다. 출력 텍스트를 먼저 선택할 필요가 없습니다.

4. 4

   필요하면 random case 다시 섞기

   같은 텍스트에 대해 다른 RaNdOm CaSe 변형을 원하면 액션 바에서 다시 섞기를 클릭하십시오. Random Case 출력만 바뀝니다. 입력 텍스트와 다른 모든 출력은 그대로 유지됩니다.

5. 5

   끝나면 초기화

   초기화를 클릭해 편집기를 비우고 모든 출력을 재설정하십시오. 샘플은 데모 텍스트를 다시 로드합니다. 모든 동작은 즉시 이루어지며 서버로 전송되지 않습니다.

흔한 케이스 변환 실수

입력: "the quick brown fox jumps over the lazy dog"
snake_case 출력: the_quick_brown_fox_jumps_over_the_lazy_dog
결과: 아무도 원하지 않는 50자 식별자.

입력: "quickBrownFox"
snake_case 출력: quick_brown_fox
결과: 깔끔한 3토큰 식별자.

입력: "a tale of two cities"
본 도구의 Title Case: A Tale Of Two Cities
기대값(AP 스타일): A Tale of Two Cities

일반적인 대문자화에는 본 도구를 사용하십시오.
편집 타이틀에는 AP 스타일 헤드라인 도구를 사용하십시오.
다른 도구, 다른 관례.

입력: XMLHttpRequest
PascalCase 출력: XmlHttpRequest
기대값(약어 보존): XMLHttpRequest

타이틀 케이스화된 약어를 받아들이거나,
변환 후 약어를 수동으로 보존하거나,
약어 힌트를 존중하는 토크나이저를 사용하십시오.

입력: https://example.com/api/users
snake_case 출력: https_example_com_api_users
결과: 더 이상 URL이 아님.

입력: https://example.com/api/users
URL은 그대로 두십시오 — 이미 올바른 형식입니다.
슬러그 추출이 필요하면 URL 경로를 수동으로 파싱하십시오.

목표: "user.profile.image 변수를 설정"
dot.case 출력을 변수명으로 사용: `user.profile.image`
대부분의 언어에서 이는 식별자가 아니라 속성 접근입니다.

단일 변수에는: userProfileImage (camelCase).
네임스페이스 키에는: user.profile.image (dot.case가 맞음).
대상 문법에 맞는 케이스를 선택하십시오.

입력: "e.g. this is an example. Read more."
Sentence case 출력: "E.g. This is an example. Read more."
`g.`가 문장 종결자로 잘못 처리됨.

먼저 sentence case를 실행한 다음 약어 엣지 케이스를 손으로 수정하십시오.
또는 문장 내부 마침표를 피하도록 표현을 바꾸십시오.
(NLP 수준의 문장 감지는 별도의 도구 범주입니다.)

이 도구를 사용하는 사람들

여러 언어에 걸쳐 식별자를 다시 명명하는 개발자

JS 변수를 Python snake_case 이름으로, 또는 CSS 클래스를 React PascalCase 컴포넌트로, 또는 환경 변수를 설정 상수로 마이그레이션합니다. 원본 이름을 한 번 붙여넣고 올바른 출력을 복사하십시오 — 글자 단위 수동 변환이 필요 없습니다.

헤더명을 변환하는 백엔드 개발자

Content-Type, Access-Control-Allow-Origin, X-Forwarded-For 같은 HTTP 헤더는 특정 Header-Case 표기를 가집니다. camelCase JS 속성명을 붙여넣고 정규 헤더 형식을 복사하십시오 — fetch() 옵션, 서버 미들웨어, 프록시 설정에 모두 동작합니다.

전체 대문자 이메일 어조를 제거하는 작가

전달된 전체 대문자 이메일과 채팅 메시지는 외치는 것처럼 읽힙니다. Sentence case에 붙여넣어 어조를 누그러뜨리거나 Title Case로 다듬어진 헤드라인 느낌을 유지하십시오. 공백 문자와 구두점은 그대로 살아남습니다.

헤드라인 초안을 작성하는 마케터

헤드라인은 Title Case로, 본문과 캡션은 Sentence case로 — 대부분의 현대 스타일 가이드(AP, Google, Apple)가 권장하는 관례입니다. 둘을 한 번에 보고 배치에 어울리는 것을 비교하십시오.

URL 슬러그를 생성하는 SEO 전문가

kebab-case는 모든 CMS가 기대하는 URL 슬러그 관례입니다. 구두점과 대소문자가 섞인 페이지 제목을 붙여넣고 kebab-case 출력을 복사하십시오 — WordPress, Ghost, Hugo 슬러그 필드에 바로 넣을 수 있습니다. 토크나이저가 구두점을 깔끔하게 제거합니다.

컬럼과 테이블을 명명하는 DBA

컬럼명과 테이블명의 snake_case는 PostgreSQL, MySQL, SQLite, 대부분의 ORM에 걸친 보편 관례입니다. 사람이 읽는 라벨이나 camelCase API 필드명을 붙여넣고 snake_case 버전을 복사하십시오.

CSS 클래스를 작성하는 프론트엔드 개발자

클래스명의 kebab-case는 CSS 사양 관례입니다(BEM, Tailwind 유틸리티, 대부분의 디자인 시스템). camelCase의 JS 컴포넌트 이름을 붙여넣고 일치하는 CSS 모듈을 위해 kebab-case 버전을 복사하십시오.

밈 제작자와 풍자 애호가

aLtErNaTiNg cAsE와 RaNdOm CaSe는 풍자적으로 조롱하거나 인용할 때 사용되는 spongebob 밈 형식입니다. 다시 섞기는 입력을 바꾸지 않고 무작위 변형을 다시 굴립니다 — 마음에 드는 것이 나올 때까지 몇 번 생성하십시오.

토큰화 & 변환 규칙

토큰화 규칙

토큰은 네 가지 경계에 공백을 삽입해 추출됩니다: 소문자에서 대문자(parseHTML → parse HTML), 대문자에서 대문자에서 소문자(XMLHttp → XML Http), 글자에서 숫자(file2 → file 2), 숫자에서 글자(2x → 2 x). 그런 다음 일반적인 구분자(공백 문자, 하이픈, 언더스코어, 마침표, 슬래시, 백슬래시)가 단일 공백으로 축소됩니다. 결과 토큰은 분할, 트리밍되고 빈 값은 제거됩니다. 이는 lodash와 change-case 패키지 관례와 일치합니다.

Programming-Case 출력은 구두점을 제거

camelCase, PascalCase, snake_case, kebab-case, CONSTANT_CASE, dot.case, path/case, Header-Case는 모두 깔끔한 식별자를 생성합니다 — 입력의 구두점(쉼표, 마침표, 괄호)은 대부분의 언어 식별자에 사용할 수 없으므로 제거됩니다. 구두점 보존이 필요하다면 text-case 출력 중 하나(UPPERCASE, lowercase, Title, Sentence, iNVERSE, aLtErNaTiNg, RaNdOm)를 사용하십시오.

Text-Case 출력은 모든 것을 보존

UPPERCASE, lowercase, Title Case, Sentence case, iNVERSE cASE, aLtErNaTiNg cAsE, RaNdOm CaSe는 모두 공백 문자, 줄바꿈, 구두점을 보존합니다. 여러 단락의 문서를 붙여넣어도 구조가 그대로 살아남습니다 — 글자 케이스만 바뀝니다. 이 변환들은 토큰화 없이 문자 단위로 동작합니다.

Title Case (단순 변형)

본 도구의 Title Case는 공백으로 구분된 모든 단어의 첫 글자를 대문자로 하고 나머지는 소문자로 합니다. APA, Chicago, AP 스타일 가이드는 짧은 관사와 전치사(a, an, the, of, in, for)를 소문자로 두는 것을 권장합니다. 그 변형들은 전용 도구를 가질 만큼 차이가 있습니다. 일반적인 대문자화에는 이 Title Case를, AP 스타일 헤드라인에는 헤드라인 전용 도구를 사용하십시오.

Sentence Case 경계 감지

Sentence case는 모두 소문자로 한 다음, 입력의 첫 글자와 공백 문자가 뒤따르는 문장 종결 부호(. ! ? 。 ！ ？) 이후의 첫 글자를 대문자로 합니다. 감지기는 Mr.이나 U.S.A. 같은 약어의 모호성 해소를 시도하지 않습니다 — 그 부분의 거짓 양성이 드물게 놓치는 케이스보다 더 시끄럽습니다.

Alternating Case는 전역 토글 사용

aLtErNaTiNg cAsE는 각 글자에 대해 소문자와 대문자 사이를 뒤집으며, 단어 경계를 가로지르는 전역 토글을 사용합니다. 비-글자 문자는 토글을 전진시키지 않습니다. 이는 convertcase.net과 그 밖의 밈 생성기가 사용하는 관례와 일치합니다 — 같은 입력에 대해 예측 가능하고 재현 가능합니다.

Random Case는 Math.random() 사용

RaNdOm CaSe는 Math.random()을 사용해 글자당 독립적인 동전 던지기를 실행합니다. 다시 섞기 클릭마다 다른 결과를 생성합니다. 무작위 소스는 암호학적으로 강하지 않습니다 — 일상 텍스트에는 괜찮지만 패스워드 생성에는 사용하지 마십시오(그 용도에는 전용 패스워드 생성기를 사용하십시오).

Unicode 및 로캘 인지 케이스 매핑

`toLocaleLowerCase()`와 `toLocaleUpperCase()`를 사용하므로 터키어의 점 있는/없는 İ/ı, 독일어 ß(표준 처리에서 대문자로 SS가 됨), 그 밖의 로캘 민감 케이스 매핑이 올바르게 처리됩니다. 토큰화는 모든 스크립트의 글자를 인식하기 위해 \p{L}을 사용합니다. Programming-case 출력은 언어 간 호환성을 위해 기본적으로 ASCII 식별자 문자로 제한됩니다.

케이스 선택 모범 사례

코드베이스에 맞는 케이스를 선택하라

변수명에 올바른 케이스는 가장 예쁜 것이 아니라 코드베이스가 이미 사용하는 것입니다. JavaScript와 Java: 변수와 메서드에 camelCase, 클래스에 PascalCase. Python, Ruby, Rust: 클래스명(PascalCase)을 제외한 모든 것에 snake_case. CSS와 URL: kebab-case. 환경 변수와 상수: CONSTANT_CASE. 로컬 관례에 맞추십시오. 일관성이 이론적 정확성보다 중요합니다.

UI 마이크로카피에는 Sentence Case를 사용하라

Google, Apple, Microsoft의 디자인 시스템은 지난 10년 동안 버튼 라벨, 메뉴 항목, 대화 상자 텍스트, 그 밖의 UI 마이크로카피에 Sentence case를 표준화했습니다. UI에서의 Title Case는 이제 구식이고 약간 외치는 것처럼 읽힙니다. Title Case는 주요 헤드라인, 페이지 타이틀, 책 제목에 남겨 두십시오.

붙여넣기 전에 스마트 따옴표를 제거하라

Microsoft Word, Google Docs, Apple Notes에서 붙여넣으면 ASCII와 동일해 보이지만 다르게 인코딩되는 스마트 따옴표(""), 엠 대시(—), 그 밖의 타이포그래피 문자가 함께 들어올 수 있습니다. 케이스 변환은 이들을 올바르게 처리하지만, programming-case 식별자로 변환할 때는 코드 편집기에서의 놀라움을 피하기 위해 먼저 ASCII 등가물로 수동 교체하십시오.

Programming Case는 식별자 하나씩 변환하라

camelCase, snake_case, kebab-case 등은 입력 전체에서 단일 식별자를 생성합니다. 문장을 snake_case에 붙여넣으면 하나의 긴 식별자가 나옵니다 — 기술적으로는 올바르지만 원하던 것은 거의 아닙니다. 식별자 변환에는 한 번에 단어나 합성어 하나만 붙여넣으십시오. 단락 길이 텍스트에는 text-case 변환을 사용하십시오.

리팩토링 전에 약어 왕복을 검증하라

XMLHttpRequest → xml_http_request → XmlHttpRequest는 표준 왕복입니다. 약어는 돌아올 때 타이틀 케이스가 됩니다. 코드베이스가 원본 약어 대문자화를 보존한다면(XMLHttpRequest가 XMLHttpRequest로 유지된다면) 왕복이 정확히 일치하지 않습니다. 프로젝트 전체 이름 변경을 수행하기 전에 몇 가지 변환을 확인하십시오.

HTTP/1.1에는 Header-Case, HTTP/2에는 kebab-case

HTTP/1.1은 헤더명에 대해 대소문자를 구분하지 않지만 Header-Case(Content-Type, X-Forwarded-For)가 모두가 사용하는 관습적인 사람-가독 표기입니다. HTTP/2는 명시적으로 소문자 헤더명을 요구합니다 — 이 경우 kebab-case를 사용하십시오(content-type, x-forwarded-for). 의심스러우면 kebab-case가 두 프로토콜 모두에서 동작합니다.

Random Case 다시 섞기는 다양성을 위한 것, 보안용 아님

Random Case는 밈에는 재미있지만 암호학적 의미에서 무작위가 아닙니다 — Math.random()을 사용하는데, 시각적 다양성에는 괜찮지만 무작위성이 중요한 어떤 것에도(패스워드 생성, 보안 토큰, A/B 테스트) 적합하지 않습니다. 암호학적 무작위성에는 전용 패스워드 생성기를 사용하십시오.

자주 묻는 질문