[EXT-020][실무] 측정값에 알맞은 단위 붙여 표시하기 > IT 기술 공유

• 목록

[이번 수업]

거리, 속도, 용량 같은 측정값을 사용자의 언어에 맞게 표시합니다. 숫자 뒤에 단위를 직접 붙이지 않고 JavaScript의 Intl.NumberFormat으로 단위 이름과 간격을 정합니다. 표시와 실제 단위 변환은 서로 다른 일입니다.

[선수지식]

숫자와 문자열, 객체를 만들고 Node.js로 자바스크립트 파일을 실행할 수 있으면 됩니다. 로케일은 언어와 지역에 따른 표시 규칙 묶음입니다.

[학습목표]

1. style: "unit"과 unit 옵션으로 측정값을 표시할 수 있습니다.
2. long, short, narrow 표시 차이와 복합 단위를 설명할 수 있습니다.
3. 단위 변환과 화면 표시를 분리하고 안전하게 입력을 검사할 수 있습니다.

[핵심개념]

Intl.NumberFormat은 숫자를 로케일 규칙에 맞게 만드는 표준 객체입니다. style을 unit으로 정하면 unit에 지정한 측정 단위를 함께 출력합니다. unitDisplay는 long, short, narrow 중 하나이며 각각 긴 이름, 짧은 표기, 좁은 공간용 표기를 뜻합니다. 사용할 수 있는 단위 식별자는 표준 목록에 정해져 있습니다. kilometer-per-hour처럼 허용된 단위를 -per-로 연결하면 '시간당 킬로미터' 같은 복합 단위를 만듭니다.

포매터는 단위를 바꾸지 않습니다. 1536을 megabyte로 표시하면 1,536 MB이지 1.5 GB가 아닙니다. 환산식과 반올림 기준은 도메인 로직에서 적용한 뒤 결과만 표시합니다. formatToParts()는 완성 문자열을 자르지 않고 integer, literal, unit 같은 조각을 돌려줍니다. 접근성 표기나 별도 스타일이 필요할 때 이 조각을 사용합니다.

[따라하기]

아래를 unit-format.js로 저장합니다.

```javascript
const distance = new Intl.NumberFormat('ko-KR', {
  style: 'unit', unit: 'kilometer', unitDisplay: 'long',
  maximumFractionDigits: 1
});
const speed = new Intl.NumberFormat('ko-KR', {
  style: 'unit', unit: 'kilometer-per-hour', unitDisplay: 'long'
});
const storage = new Intl.NumberFormat('en-US', {
  style: 'unit', unit: 'megabyte', unitDisplay: 'short'
});

console.log(distance.format(12.5));
console.log(speed.format(80));
console.log(storage.format(1536));
console.log(speed.formatToParts(80)
  .map(({ type, value }) => `${type}:${value}`).join('|'));
```

터미널에서 `node unit-format.js`를 실행합니다. 예상 결과는 `12.5킬로미터`, `시속 80킬로미터`, `1,536 MB`와 마지막 줄의 `unit:시속|literal: |integer:80|unit:킬로미터`입니다. Node.js의 ICU·CLDR 데이터 버전에 따라 띄어쓰기나 단어가 조금 달라질 수 있습니다. 명령은 Windows PowerShell·명령 프롬프트, macOS 터미널, Linux 셸에서 같습니다.

[흔한 실수]

단위 문자열을 `값 + 'km'`처럼 붙이면 언어별 어순과 간격을 놓칩니다. formatter가 MB를 GB로 자동 환산한다고 생각해서도 안 됩니다. 임의의 unit 값은 RangeError를 낼 수 있으므로 지원 단위만 사용합니다. 출력 문자열을 다시 숫자로 파싱하면 로케일별 쉼표와 공백 때문에 오류가 생깁니다. 계산에는 원본 숫자를 유지하세요.

[보안 주의]

unit과 로케일은 애플리케이션의 허용 목록에서 고르고 외부 입력을 그대로 옵션에 넣지 마세요. 값은 Number.isFinite()로 유한한 숫자인지 확인하고 업무 범위도 검사합니다. 측정·요금·안전 한계의 권위 있는 값은 원본 데이터와 환산 규칙입니다. 사용자 문장과 함께 HTML에 넣을 때는 일반 텍스트로 렌더링해 스크립트 삽입을 막습니다. 실습은 본인 소유의 로컬 환경에서만 진행합니다.

[직접 해볼 과제]

같은 5를 meter 단위의 long, short, narrow로 표시하고 en-US와 ko-KR 결과를 비교하세요. kilometer 값 1.5를 코드에서 1000배 해 meter로 변환한 다음 표시하세요. 마지막으로 없는 단위를 넣고 try/catch로 RangeError를 확인하세요.

[확인문제]

1. Intl.NumberFormat이 1536 MB를 1.5 GB로 자동 변환하지 않는 이유는 무엇인가요?
2. unitDisplay의 세 가지 값은 무엇인가요?
3. 완성 문자열을 자르는 대신 formatToParts()를 쓰면 어떤 이점이 있나요?

[다음 학습]

다음에는 Intl.Collator로 언어에 맞는 문자열 정렬과 검색 비교를 다룹니다.

[공식 참고 자료]

ECMA-402 NumberFormat: https://tc39.es/ecma402/#numberformat-objects
ECMA-402 측정 단위 식별자: https://tc39.es/ecma402/#sec-measurement-unit-identifiers
Unicode LDML Unit Elements: https://www.unicode.org/reports/tr35/tr35-general.html#Unit_Elements
CLDR Unit Names and Patterns: https://cldr.unicode.org/translation/units/unit-names-and-patterns
Node.js Intl: https://nodejs.org/api/intl.html