JavaScript - Intl

Intl?🤔

최근 Youtube 알고리즘으로 Javascript Intl 관련 강좌들이 많이 나오기 시작했다.

꽤 오래전에 나왔던 것인데 이제와서 Youtube를 통해 알게됬다는게 뭔가 뒤쳐지고 있다는 생각도 들었다;;

무심코 본 영상에서 정말 신기하다고 생각해서 나도 직접 MDN을 참고하면서 공부했고 그 중에서 Intl의 장점과 사용법을 간단하게 공유해볼까 한다.

moment.js 라이브러리 라든지 new Date()를 사용하면서 개발하는 시대가 점점 끝나가는게 아닐까 싶다.

 

✏️Intl.DateTimeFormat

DateTimeFormat은 브라우저 언어에 맞는 날짜와 시간 서식을 적용하기 위한 객체다.

기존에는 날짜와 시간 서식을 사용하려면 복잡한 로직이라든지 문자열을 이어 붙이거나 문자열 리터럴로 구현을 했었다면 이번에 이 DateTimeFormat은 브라우저 언어, 설정 Option을 통해 간단하게 날짜의 표현이 가능하다.

DateTimeFormat

const date = new Date(); // Fri Dec 02 2022 17:37:48 GMT+0900 (한국 표준시)
const options = {
  hour: "numeric",
  minute: "numeric",
  second: "numeric"
};

console.log(new Intl.DateTimeFormat("kr", options).format(date));
// 오후 5:37:48

위 예제는 new Date()를 통해 먼저 현재 날짜와 시간을 구하고 DateTimeFormat(locale, option)을 통해 format에 맞게 출력을 하고 있다.

예전 같았으면 시, 분, 초를 구하고 오전/오후를 따로 표기해주면서 개발을 했었는데 DateTimeFormat이 생기면서 편해졌다.

 

✏️Intl.NumberFormat

NumberFormat은 브라우저 언어에 맞는 숫자 서식을 지원하는 객체다.

각 국가별로 숫자를 표기하는 방식이 다르거나 숫자를 표시하는 문자도 각자 다르기에 참 개발하는데 까다로웠지만 이번 NumberFormat은 그것을 한번에 해결해주었다.

NumberFormat

const number = 123456.789;

console.log(
  new Intl.NumberFormat("kr", {
    style: "currency",
    currency: "KRW",
  }).format(number)
);

console.log(
  new Intl.NumberFormat("en-US", {
    style: "currency",
    currency: "USD",
  }).format(number)
);

console.log(
  new Intl.NumberFormat("ja-JP", {
    style: "currency",
    currency: "JPY",
  }).format(number)
);

위 예제는 style에 currency(통화) options을 부여하고 currency에 표시하고 싶은 통화 스타일을 부여해줬다. NumberFormat을 통해 Option별로 어떻게 표기를 할 것인지 일일히 문자열을 숫자 앞에 추가해줄 필요도 없고 currency에 맞게 알아서 구현을 해주니 정말 편하다.

 

✏️ Intl.ListFormat

ListFormat은 문장의 element와 literal을 자동으로 삽입해준다.

약간 생소한 말일 수도 있지만 코드를 통해서 보면 단번에 이해할 수 있다.

ListFormat

const vehicles = ["Motorcycle", "Bus", "Car"];

const formatter = new Intl.ListFormat("kr", {
  style: "long",
  type: "conjunction",
});
console.log(formatter.format(vehicles));

const formatter2 = new Intl.ListFormat("ja-JP", {
  style: "narrow",
  type: "unit",
});
console.log(formatter2.format(vehicles));

ListFormat을 사용하기 위해서는 문장을 연결해 줄 문자들을 먼저 배열에 하나씩 넣어준다.

그리고 ListFormat을 통해 브라우저의 언어 설정과 옵션을 통해서 원하는 문장을 만들어준다.

예를들어 브라우저의 언어를 “한국”으로 했다면 “및”이라는 단어가 자동으로 삽입된다. 그 이유는 type에 “conjunction(접속사)”라는 옵션을 추가해줬기 때문이다.(타입을 주지 않아도 자동으로 conjunction이 default인듯…)

type을 conjunction(and(및))과 disjunction(or(또는))으로 준다면 원하는 상황에 따라 맞는 문장을 만들 수 있다.

 

ListFormat.formatToParts

const list = ["Motorcycle", "Bus", "Car"];
console.log(
  new Intl.ListFormat("en-GB", {
    style: "long",
    type: "conjunction",
  }).formatToParts(list)
);

추가적으로 ListFormat에 formatToParts라는 메서드를 사용하면 ListFormt에서 출력된 문장을 “element”와 “literal”로 자동으로 나누어져 활용할 수도 있다.

 

마무리😊

다국어 작업이 필요한 프로젝트인 경우에는 이것을 활용하면 큰 도움이 될 것이라고 생각하지만 이것이 전부라고 생각이 되진 않는다. 물론 어떻게 활용하느냐에 따라 다르겠지만 잘만 활용하면 적재적소에 쓰면서 아주 큰 도움이 될 것이라고 생각한다. 아직 다국어를 지원하는 프로젝트를 경험해보지 않았지만 이러한 방법이 있다는 것에 새삼 놀랐고 앞으로 더 새로운 것들에 관심을 가져야겠다고 생각했다. 

 

기회가 되면 이 Intl을 활용한 프로젝트나 미니 프로젝트라도 도전해봐야겠다.😂

마지막으로 Intl을 공부하기 위한 참고자료 몇개 공유하겠습니다.

 

 

 

Intl - JavaScript | MDN (mozilla.org)

https://youtu.be/2AMRTAFSh98

https://youtu.be/4YnKQrPMTNU