[javascript] 천단위 콤마 찍기 (add comma)

 

오늘은 자바스크립트 개발을 하면서 정말 많이 사용하는 콤마 찍는 기능에 대한 내용을 정리해 보려고 한다. 기능은 정말 간단하지만 사용 빈도가 매우 많고 다양하기 때문에 한번 정리해 두면 두고두고 활용할 수 있는 유용한 기능이다.

자바스크립트의 순수 기능이기 때문에 해당 함수는 자바스크립트 기반의 라이브러리에서는 모두 호환이 된다. 
특히 SPA (React, vue, React 등) 자바스크립트 기반이라면 모두 활용이 가능하다.

---

천 단위의 콤마 함수

천 단위의 콤마 함수는 일반적으로 숫자를 입력받아 천(1000) 단위마다 쉼표(,)를 추가하여 표현하는 기능의 함수다. 이 함수는 주로 금액이나 숫자를 사용자에게 표시할 때 사용되며, 숫자의 가독성을 높이고 이해하기 쉽게 도와준다. 기능은 매우 간단하지만 이러한 기능들이 모여서 큰 프로젝트가 되기 때문에 하나씩 익혀둔다면 다양한 곳에서 도움이 될 것이다.

활용 사례

1. 금액 표시
금액을 표시할 때 천 단위 콤마 함수를 사용하여 사용자의 가독성을 높일 수 있다. 예를 들어, 온라인 쇼핑몰에서 상품의 가격을 표시할 때 유용하다.

2. 통계 데이터 표시
통계 데이터를 사용자에게 표시할 때에도 천 단위 콤마 함수를 활용하여 숫자를 보다 더 명확하게 표현할 수 있다. 예를 들어, GDP나 인구 통계 등의 데이터를 시각화 할 때 같이 사용하면 좋다.

3. 재무 보고서
재무 보고서나 회계 보고서를 작성하는 경우, 수치를 천 단위로 묶어서 표시하는 것이 일반적이며, 천 단위 콤마 함수를 사용하여 보고서의 가독성을 높여줄 수 있다.

4. 데이터 시각화
데이터 시각화 도구를 사용하여 그래프나 차트를 생성할 때, 축에 표시되는 수치를 천 단위 콤마로 표시할 수 있다. 이는 사용자가 수치를 더 쉽게 이해할 수 있도록 도와준다.

5. 사용자 입력 값 검증
사용자로부터 입력받은 숫자를 천 단위 콤마로 표시하여 사용자에게 다시 표시할 때 사용할 수 있다. 이는 사용자가 입력한 값의 형식을 보다 명확하게 인식하고 이해할 수 있도록 도와준다.


이러한 활용 사례들을 통해서 천 단위 콤마 함수의 활용도를 확인할 수 있으며, 나는 보통 숫자가 들어가는 부분에는 습관처럼 이 함수를 사용한다. 

 

---

콤마 함수 예제 소스 코드

* 전체 소스 코드

<script>
/**
 * Document load 
 */
document.addEventListener('DOMContentLoaded', () => {
    // 설정 대상 값
    let num = 1000
    // comma 적용 X
    document.querySelector('#beforeCommaId').textContent = num;
    // afterCommaId dom 영역에 comma 데이터 추가
    document.querySelector('#afterCommaId').textContent = addComma(num);
});

/**
 * 숫자형 데이터 3자리마다 콤마 찍기 Function
 * 
 * @param {*} num 
 */
 function addComma(num) {
    /**
     * 공백 확인
     */
    if (!num) {
        return '';
    }

    // Number 변경
    num = Number(num)

    /**
     * 숫자 / 문자 판별
     */
    if (isNaN(num)) {
        console.log('숫자가 아닙니다.');
        return '';
    }

    // 정규식을 이용한 3자리마다 콤마 찍기
    return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
}

</script>
<div>
    <span>적용 전 금액 : </span>
    <span id="beforeCommaId"></span>
</div>
<div>
    <span>적용 후 금액 : </span>
    <span id="afterCommaId"></span>
</div>

위의 소스 코드는 콤마 처리하는 함수를 addComma로 생성하였고, 매개변수로 num을 받도록 하였다.

addComma
- 해당 함수는 먼저 입력된 값이 숫자인지 확인하고, 숫자가 아니면 공백을 반환
- 숫자인 경우에는 정규식을 사용하여 3자리마다 콤마를 추가한 뒤 반환

숫자 데이터 적용
- 페이지 로드시 설정한 숫자 값 num을 함수를 통해 처리하고, 적용 전 후의 결과를 각각의 DOM 요소에 적용하여 표시
- textContext 속성을 사용하여 DOM에 텍스트를 추가

위와 같이 숫자 데이터에 천 단위 콤마를 적용하는 함수를 구현하였고, 이를 웹 페이지에 적용하여 사용자에게 가독성 높은 형태로 데이터를
제공할 수 있다. 그리고 상황에 따라서 addComma 함수는 validation을 더 엄격하게 체크하여 구현하는 것이 좋다.

 

인자값 : 1000

// 설정 대상 값
let num = 1000
// comma 적용 X
document.querySelector('#beforeCommaId').textContent = num;
// afterCommaId dom 영역에 comma 데이터 추가
document.querySelector('#afterCommaId').textContent = addComma(num);

설정 값을 1000으로 주었고, 아래는 실행 결과 화면이다.

addComma를 사용한 span 태그 값은 콤마가 적용이 잘 되었다.

---

인자값 : 12300000

// 설정 대상 값
let num = 12300000
// comma 적용 X
document.querySelector('#beforeCommaId').textContent = num;
// afterCommaId dom 영역에 comma 데이터 추가
document.querySelector('#afterCommaId').textContent = addComma(num);

이번에는 조금 더 큰 수를 넣어줬다.

마찬가지로 큰 수를 넣어도 3자리마다 깔끔하게 콤마가 잘 찍히고 있다.

---

인자값 : ABC456000

// 설정 대상 값
let num = 'ABC456000'
// comma 적용 X
document.querySelector('#beforeCommaId').textContent = num;
// afterCommaId dom 영역에 comma 데이터 추가
document.querySelector('#afterCommaId').textContent = addComma(num);

이번에는 문자가 포함된 숫자를 넣어줬다.

결과는 addComma를 사용한 적용 후 금액에는 아무 값이 나오지 않았다.

함수에서 validation을 체크를 하면서 문자 판별을 잘한 것 같다.

---

인자값 : 456000.123

// 설정 대상 값
let num = '456000.123'
// comma 적용 X
document.querySelector('#beforeCommaId').textContent = num;
// afterCommaId dom 영역에 comma 데이터 추가
document.querySelector('#afterCommaId').textContent = addComma(num);

이번에는 소수점이 포함된 숫자를 넣어줬다.

소수점을 포함하여 함수를 호출했을 때에도 정상적으로 콤마가 찍히고 있다.

---

천 단위 콤마 함수 사용시 주의사항

천 단위 콤마 함수를 사용할 때에는 몇 가지 주의할 부분이 있다. 

1. 문자열 처리
입력값이 숫자로 전달되어야 하므로, 함수 내에서 숫자로 변환하기 전에 유효성을 검사해야 한다. 숫자가 아닌 값을 입력받을 경우 적절한 에러 처리를 하는 것이 좋다.

2. 부동소수점
부동소수점 숫자(실수)에 대해 콤마를 적용할 때 주의해야 한다. 정수와 달리 부동소수점은 소수점 이하의 정확한 값이 아닌 근사치를 다루므로, 원하는 결과가 나오지 않을 수 있으므로, 이 부분을 고려하여 함수를 만들어야 한다.

3. 국제화
천 단위 콤마는 숫자를 표기하는 규칙 중 하나이지만, 국가 및 지역에 따라 숫자 표기법이 다를 수 있다. 예를 들어, 일부 국가에서는 천 단위를 나타내는 구분자고 쉼표(,) 대신 점(.)을 사용하기도 한다.

4. 정확성
천 단위 콤마 함수를 수정할 때에는 결괏값의 정확성을 유지하는 것이 중요하다. 변경사항이 예기치 않은 결과를 초래하지 않도록 테스트를 충분히 해야 한다.

5. 성능
대량의 데이터를 다룰 때에는 성능을 고려해야 한다. 함수가 느리게 실행될 경우 페이지의 성능에 영향을 미칠 수 있으므로 최적화를 고려하는 것이 좋다.

6. 원본 데이터 변조 주의
천 단위 콤마 함수를 사용하여 숫자를 표시할 때, 원본 데이터가 변경되지 않도록 주의해야 한다. 숫자가 다른 용도로 사용되거나 계산될 수 있으므로, 변환된 데이터와 원본 데이터를 구분하여 관리해야 한다.

7. 접근성
시각적 디자인 뿐만 아니라 웹 접근성 측면에서도 천 단위 콤마를 사용할 때 주의해야 한다. 일부 스크린 리더 등 보조 기술은 숫자에 콤마를 인식하지 못할 수 있으므로, 대안을 고려하는 것이 좋다.


기능 함수를 구현할 때에는 항상 다양한 상황을 고려하여 구현하는 것이 중요하다. 숫자를 다루는 기능인만큼 정리한 내용과 같이 주의해서 만드는 것이 중요하고, 상황에 맞는 정책 validation을 적절히 적용해 주는 것이 중요하다.

---

마무리

오늘은 자바스크립트의 기본 기능 중 하나인 천 단위 콤마 함수에 대한 내용을 정리해 보았다. 정리한 내용과 같이 기능은 매우 간단하지만 숫자를 다루는 만큼 고려해야 하는 부분이 많은 것이 핵심이다. 간단한 기능이라도 항상 상황을 생각해야 하고, 개발자라면 간단한 기능이라도 무시하지 않고 항상 생각을 많이 하는 것이 중요하다. 이러한 간단한 기능을 많이 만들어 보면서 연습을 하면 더 큰 기능을 만들게 되더라도 도움이 많이 될 수 있을 것이다.