[TypeScript] snake case 프로퍼티 객체를 camel case 프로퍼티 객체로 변환하기

자바스크립트는 합성된 단어들에 대해 두 번째 단어부터 해당 단어의 첫 번째 글자를 대문자로 바꿔서 표기하는 카멜 케이스를 사용한다.

 

예를 들어서,

helloZeetoHelloHelloZeetoHello

위처럼 두 번째 단어부터 첫 번째 글자를 대문자로 표기해준다.

 

이에 반해서, 파이썬이나 데이터베이스는 이어지는 단어 사이에 언더스코어(_)를 넣어주는 스네이크 케이스를 사용한다.

즉, 둘의 네이밍 전략은 다르기 때문에 자바스크립트를 사용하고자 한다면, 웬만해서 변수명 등을 카멜 케이스로 바꿔주는 것이 중요하다.

 

---

보통 ORM을 통해서 database의 raw 값에 접근하면, 프로퍼티 이름이 스네이크 케이스로 전달된다. 이때, 이는 자바스크립트의 네이밍 전략과 맞지 않으므로, 프로퍼티명을 카멜 케이스로 바꿔주는 작업이 필요하다.

 

스네이크 케이스 문자열을 카멜 케이스 문자열로 변환하기

먼저, 문자열 스네이크 케이스에서 카멜 케이스로 바꾸는 유틸 함수는 다음과 같다.

export const convertSnakeCaseToCamelCase = (str: string): string => {
  const words = str.split('_');
  const camelCaseWord = words
    .map((word, index) => {
      if (index === 0) {
        return word;
      }
      const firstLetterCap = word.charAt(0).toUpperCase();
      const remainingLetters = word.slice(1);
      return firstLetterCap + remainingLetters;
    })
    .join('');

  return camelCaseWord;
};

먼저 문자열을 입력으로 받아서 언더스코어를 기준으로 split 해준다.

그러면 해당 패턴을 기준으로 문자열들이 나뉘어져 array로 반환된다.

 

이제 해당 array를 map을 돌면서 순차적으로 처리해나간다.

 

0번 인덱스는 대문자를 적용하면 안되므로 넘어가고, 바로 문자부터 로직을 수행한다.

 

로직은 상당히 단순한데, 첫 번째 단어를 uppercase를 사용하여 대문자로 바꿔주고, slice로 1번 인덱스 이후 문자들을 잘라낸 다음, 그것들을 이어주면 끝이다.

 

마무리로 정제된 문자들을 join 메서드로 합쳐주면 끝이다.

 

스네이크 케이스 프로퍼티명을 가지는 객체를 카멜 케이스 프로퍼티명 객체로 변환하기

위에서 문자열을 정제했던 로직을 그대로 객체에 적용하면 된다. Object 자료형의 정적 메서드인 entries를 사용하면 쉽게 변환할 수 있다.

export const convertObjectPropertiesSnakeCaseToCamelCase = (
  obj: Record<string, any>,
): Record<string, any> => {
  const convertedObject: Record<string, any> = {};
  for (const [key, value] of Object.entries(obj)) {
    const camelCaseKey = convertSnakeCaseToCamelCase(key);
    convertedObject[camelCaseKey] = value;
  }

  return convertedObject;
};

객체를 입력으로 받고, entries로 키와 값 쌍을 for문을 돌면서 프로퍼티명을 카멜 케이스를 적용해준다.

 

🔜 변경 이전

{
    id: 119,
    name: "배드민턴",
    exercise_time: 40,
    burned_calorie: 772,
}

🔚 변경 이후

{
    id: 119,
    name: "배드민턴",
    exerciseTime: 40,
    burnedCalorie: 772,
}

예시는 두 개 밖에 변환할 게 없지만, 컬럼이 많아지면 일일이 식별화 비식별화 하면서 바꿔주는 것보다 이렇게 단순 유틸함수로 손쉽게 변환하는 것도 좋은 방법이다.