DB 컬럼명 ↔ camelCase 변환기 직접 만들기

DB 컬럼명(ORDER_NO)을 자바 필드명(orderNo)으로, 또는 그 반대로 바꿀 일이 많아서 제가 쓰려고 만든 변환기다. 아래 코드를 converter.html 로 저장해서 브라우저로 열면 된다. 여러 줄을 한 번에 붙여 넣어도 줄마다 바뀐다.

변환 함수

핵심은 함수 세 개다.

// ORDER_NO → orderNo
const toCamel = (s) =>
  s.toLowerCase().replace(/_([a-z\d])/g, (_, c) => c.toUpperCase());

// ORDER_NO → OrderNo (줄마다 첫 글자를 대문자로)
const toPascal = (s) =>
  s.split("\n")
    .map((line) => {
      const camel = toCamel(line);
      return camel.charAt(0).toUpperCase() + camel.slice(1);
    })
    .join("\n");

// orderNo, OrderNo, HTTPServer, userId2 → ORDER_NO, ORDER_NO, HTTP_SERVER, USER_ID_2
const toUpperSnake = (s) =>
  s.replace(/([A-Z]+)([A-Z][a-z])/g, "$1_$2") // 약어 뒤: HTTPServer → HTTP_Server
    .replace(/([a-z\d])([A-Z])/g, "$1_$2")    // 소문자·숫자 뒤 대문자: orderNo → order_No
    .replace(/([a-zA-Z])(\d+)/g, "$1_$2")     // 글자 뒤 숫자: userId2 → userId_2
    .toUpperCase();

입력	toCamel	toPascal
TT_DEV	ttDev	TtDev
USER_ID_2	userId2	UserId2

입력	toUpperSnake
ttDev, TtDev	TT_DEV
userId2	USER_ID_2
userID	USER_ID
HTTPServer	HTTP_SERVER

USER_ID_2 → userId2 → USER_ID_2 처럼 숫자가 섞여도 왕복이 된다. 다만 ID2 처럼 대문자 뒤에 바로 숫자가 오는 이름은 어디서 끊을지 규칙으로 정할 수 없어서, 결과를 한 번 눈으로 확인하는 것이 좋다.

전체 코드

<!doctype html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <title>camelCase ↔ UPPER_SNAKE 변환기</title>
  <style>
    body { font-family: sans-serif; margin: 16px; }
    .row { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; margin-bottom: 16px; }
    .row > div { display: flex; flex-direction: column; gap: 8px; }
    .arrow { justify-content: center; text-align: center; font-size: 13px; color: #555; }
    textarea { width: 100%; min-height: 120px; box-sizing: border-box; font-family: monospace; }
  </style>
</head>
<body>
  <div class="row">
    <div><textarea id="snake">ORDER_NO</textarea></div>
    <div class="arrow">camelCase →<br>← UPPER_SNAKE<br>PascalCase →</div>
    <div>
      <textarea id="camel">orderNo</textarea>
      <textarea id="pascal">OrderNo</textarea>
    </div>
  </div>
  <div class="row">
    <div><textarea id="upper">ORDER_NO</textarea></div>
    <div class="arrow">lower case →<br>← UPPER CASE</div>
    <div><textarea id="lower">order_no</textarea></div>
  </div>

  <script>
    const toCamel = (s) =>
      s.toLowerCase().replace(/_([a-z\d])/g, (_, c) => c.toUpperCase());

    const toPascal = (s) =>
      s.split("\n")
        .map((line) => {
          const camel = toCamel(line);
          return camel.charAt(0).toUpperCase() + camel.slice(1);
        })
        .join("\n");

    const toUpperSnake = (s) =>
      s.replace(/([A-Z]+)([A-Z][a-z])/g, "$1_$2")
        .replace(/([a-z\d])([A-Z])/g, "$1_$2")
        .replace(/([a-zA-Z])(\d+)/g, "$1_$2")
        .toUpperCase();

    const $ = (id) => document.getElementById(id);

    // 입력한 칸 → 바꿔 넣을 칸들
    const rules = {
      snake:  (v) => { $("camel").value = toCamel(v); $("pascal").value = toPascal(v); },
      camel:  (v) => { $("snake").value = toUpperSnake(v); },
      pascal: (v) => { $("snake").value = toUpperSnake(v); },
      upper:  (v) => { $("lower").value = v.toLowerCase(); },
      lower:  (v) => { $("upper").value = v.toUpperCase(); },
    };

    for (const [id, apply] of Object.entries(rules)) {
      const el = $(id);
      el.addEventListener("input", () => apply(el.value));
      el.addEventListener("focus", () => el.select());
    }
  </script>
</body>
</html>

다시 쓰며 바로잡은 점

• 원문의 정규식 /_([a-z\\d])/ 는 역슬래시가 하나 더 들어가 \d(숫자)가 아니라 “역슬래시 또는 d” 로 해석됐다. 그래서 USER_ID_2 가 userId_2 로 남았다. /_([a-z\d])/ 로 고쳤다.
• HTTPServer 처럼 약어가 앞에 오는 이름이 HTTPSERVER 로 붙어 버리던 문제를 규칙 하나를 더해 고쳤다.
• String.prototype 에 메서드를 덧붙이던 방식을 일반 함수로 바꿨다. 내장 객체를 확장하면 다른 라이브러리와 이름이 겹칠 수 있다.
• 폐지 예정(deprecated)인 substr 대신 slice 를 쓰고, 같은 값을 두 번 대입하던 줄과 HTML 속성·addEventListener 로 이벤트가 두 번 걸리던 부분을 정리했다.