안녕하세요!
날이 많이 쌀쌀해진 겨울이 다 되었네요.. 오늘은 자바스크립트에서 시간이 필요할때 자주 사용하기 좋은 API를 하나 공유하고자 합니다.
Intl API 란?
여러가지 언어로 서비스를 할 수 있도록 웹 애플리케이션을 설계하고 구현하는 과정에서 우리는 국제화 라는 것을 알고있어야합니다. 한국만 사용하지 않는다는 것이죠!
예를들어, 10/12/14 라는 날짜는 한국에서는 2010년 12월 14일로 해석하게 됩니다. 하지만 미국에서는 10월 12일 2014년 으로 해석할 수 있다는 거죠 만약에 그렇다면 이 웹은 국제화 한 웹일까요? 그렇지 않습니다. 하지만 이것을 언어마다 하나하나 변경하게된다면 그 공수또한 장난이 아닐거란 거죠..
다행히 이러한 데이터 포멧팅 문제를 해결해주기 위해 Intl API를 제공하고 있습니다. Node.js에서도 사용이 가능한 API이나, 많은 사람들이 모르는 경우가 많습니다.
Intl 사용법
Intl은 전역에서 접근이 가능한 객체를 통해 사용이 가능하며 이 Intl 객체는 여러개의 생성자로 구성되어있습니다.
기본적으로 어떤 종류의 데이터를 포멧팅을 하고 싶은지에 따라 다른 생성자를 사용해야 합니다. 기본적으로 모든 생성자는 2개의 인자를 받습니다. 첫번째는 위치(locale)로 언어와 지역 정보를 표준화 시킨 코드입니다. 아무것도 넣지 않는다면 브라우저의 local에 따라 자동으로 변하게 됩니다. 두번째는 옵션입니다.
예제를 통해 보는것이 더 이해하는게 빠를 것이라 생각합니다.
Intl.DataTimeFormat
Intl.DataTimeFormat은 시간이나 날짜를 포메팅 해주는 것입니다. 위에서 설명했다시피 10/12/14 라고 했을때, 한국은 2010년 12월 14일 미국은 10월 12일 2014년 이 됩니다.
new Intl.DateTimeFormat().format(new Date()) // OUTPUT: '2022. 12. 14.' new Intl.DateTimeFormat("ko").format(new Date()) // OUTPUT: '2022. 12. 14.' new Intl.DateTimeFormat("ko", { dateStyle: 'full' }).format(new Date()) // OUTPUT: '2022년 12월 14일 수요일' new Intl.DateTimeFormat("ko", { dateStyle: 'long' }).format(new Date()) // OUTPUT: '2022년 12월 14일' new Intl.DateTimeFormat("ko", { dateStyle: 'medium' }).format(new Date()) // OUTPUT: '2022. 12. 14.' new Intl.DateTimeFormat("ko", { dateStyle: 'short' }).format(new Date()) // OUTPUT: '22. 12. 14.'
위의 예시는 ko(한국)으로 설정한 후 시간을 포메팅한 것입니다. locale이 비었다면 브라우저 기준! 옵션이 비어있다면 dateStyle은 short로 설정이 되어있습니다.
dateStyle이 full, long, medium, short의 종류가 있는데, 정말 깔끔하게 포메팅해주지 않나요? 진짜 너무 좋아보이네요.. 그렇다면 이걸 어떻게 여러 언어를 지원하는 웹사이트 개발때 사용할 수 있을까요?
// 미국 new Intl.DateTimeFormat("en").format(new Date()) // OUTPUT : '12/14/2022' new Intl.DateTimeFormat("en", {dateStyle: 'full'}).format(new Date()) // OUTPUT : 'Wednesday, December 14, 2022' // 일본 new Intl.DateTimeFormat("ja").format(new Date()) // OUTPUT : '2022/12/14' new Intl.DateTimeFormat("ja", {dateStyle: 'full'}).format(new Date()) // OUTPUT : '2022年12月14日水曜日'
이렇게 언어를 변경 ex) en = 미국, ja = 일본 으로 포멧을 변경해 날짜를 표기할 수 있습니다! 그럼 날자만 가능한가? 아닙니다 시간도 가능하죠!
new Intl.DateTimeFormat('ko', { timeStyle: 'full' }).format(new Date) // OUTPUT : '오후 10시 41분 59초 한국 표준시' new Intl.DateTimeFormat('ko', { timeStyle: 'long' }).format(new Date) // OUTPUT : '오후 10시 42분 4초 GMT+9' new Intl.DateTimeFormat('ko', { timeStyle: 'medium' }).format(new Date) // OUTPUT : '오후 10:42:11' new Intl.DateTimeFormat('ko', { timeStyle: 'short' }).format(new Date) // OUTPUT : '오후 10:42'
원더풀.. 이렇게 date와 time이 변환된다면 굳이 우리가 만들필요가 없겠죠? 그럼 옵션에 dateStyle와 timeStyle을 같이 사용할 수 있나요? 라고 할 수 있는데 그건..
new Intl.DateTimeFormat('ko', { dateStyle:'short', timeStyle: 'short' }).format(new Date) // OUTPUT : '22. 12. 14. 오후 10:43' new Intl.DateTimeFormat('ko', { dateStyle:'full', timeStyle: 'medium' }).format(new Date) // OUTPUT : '2022년 12월 14일 수요일 오후 10:43:45'
가능하답니다.. 두번째 형식은 정말 많이 사용하는 형식이죠? 어떤가요.. 이런 기능이 있다는거..
Intl.ListFormat
우리가 웹사이트를 검색하다 보면 이런 문구를 많이볼 수 있습니다. '삼성, LG, SK 및 현대' 나 '삼성, LG, SK 또는 현대' 이런 문구를 어떻게 만들 수 있을까요?
const brands = ['삼성', 'LG', 'SK', '현대'] `${brands[0]}, ${brands[1]}, ${brands[2]} 및 ${brands[3]}` // OUTPUT : '삼성, LG, SK 및 현대'
위에처럼 개발할 수 있겠죠 하지만 만약 brand가 늘어난다면? 그럼 brands를 반복문을 통해 , 와 및을 넣어주면 되겠죠? 하지만 이러한 개발 방식을 사용하지 않고 바로 만들어준다면 여러분.. 안쓰실 건가요?
const brands = ['삼성', 'LG', 'SK', '현대'] new Intl.ListFormat('ko').format(brands) // OUTPUT : '삼성, LG, SK 및 현대'const brands = ['삼성', 'LG', 'SK', '현대'] new Intl.ListFormat('ko', { type: 'disjunction' }).format(brands) // OUTPUT : '삼성, LG, SK 또는 현대'
이렇게 간단하게 사용이 가능하다는 점..
Intl.NumberFormat
이게 혁신입니다.. 혁신.. 왜? 우리는 '원' 이라는 단위를 사용합니다. 표현방식은 1,000원과 10,000원 이런식으로 표현하죠
0이 3개마다 ,이 붙는 형식이죠 그렇다면 다른 나라는 어떨까요? 미국의 경우 $40.00 이런식으로 앞에 달러를 표현하죠. 이렇게 나라마다 전부 다른데 어떻게 할 수 있냐?
new Intl.NumberFormat('ko', { style: 'currency', currency: 'KRW' }).format(50000) // OUTPUT : '₩50,000' new Intl.NumberFormat('ko', { style: 'currency', currency: 'USD' }).format(40.56) // OUTPUT : 'US$40.56'
어떤가요? 이젠 000 이 나올때마다 ,를 붙여줄 의미가 없습니다.. 어떤가요? 혁신이지 않나요?
Intl.RelativeTimeFormat
이것도... 혁신이지.. 여러분 우리 인스타나 페이스북 다른 sns를 봐도 이런거 자주 보시지 않았나요? '어제 작성된 글', '1일 전' 이런걸 말이죠
이것도 포멧팅을 해준다면?? 어떨까요? 우리는 시간을 계산하는 웹사이트 ex) 게시글 작성 시간을 필요로 하는경우 등에서 유용하게 사용할 수 있을겁니다.
let rtf = new Intl.RelativeTimeFormat("ko") rtf.format(-1, 'day') // OUTPUT : '1일 전' rtf.format(-1, 'week') // OUTPUT : '1주 전' rtf.format(-1, 'month') // OUTPUT : '1개월 전'
근데 이거 말고 '1일 전' 을 '어제' 로 변경하고 싶다면?? 간단합니다. RelativeTimeFormat option에 numeric: 'auto'로 주면 됩니다.
let rtf = new Intl.RelativeTimeFormat("ko", { numeric: "auto" }); rtf.format(-1, 'day') // OUTPUT : '어제' rtf.format(-1, 'week') // OUTPUT : '지난주' rtf.format(-1, 'month') // OUTPUT : '지난달'
어떤가요? 한글 안에서도 이렇게 옵션에따라 다르게 포멧팅을 해준다니.. 이게 진짜 얼마나 혁신입니까?
더 많은 기능, 더 많은 옵션이 있을건데.. 전 이정도로도 만족.. 좀 더 알아보고 진짜 실생활에 막힘없이 쓸 수 있도록 하려고 합니다. 진짜 유용하게 많이 사용할 것이라 생각합니다!
여러분들도 한번씩 보는 건 어떨까요~?