구글에 자바스크립트로 날짜 구하기를 검색해보면 new date 문법으로 날짜를 구하는게 많다.
new date형식의 문법의 대략적인 문제점은 다음과 같다고 생각한다.
요즘은 UTC형식으로 날짜를 출력하는데 new date는 현재 거의 사용하지 않는 RFC형식으로 현재 날짜를 출력한다. 그리고 만약 현재 날짜를 출력하고 싶으면 쓸데없이 많은 함수들을 가져와서 써야한다.
See the Pen Untitled by sodium casein (@xyyhsawg-the-selector) on CodePen.
현재 날짜를 가져오기 위해서 얼마나 많은 함수를 써야하며 또한 new date의 자바스크립트의 월은 0~11기준으로 되어 있기 때문에 5월을 뽑으려면 getMonth()함수의 +1을 해줘야 현재의 올바른 날짜를 가져올 수 있다. 그래서 이러한 불필요한 작업을 줄이고 가독성 있게 추출하기 좋은 방법이 있는데 바로 Intl api이다.
Intl API는 다국적으로 서비스를 하는 곳에서 유용하게 사용된다. 우리나라의 경우 2023년 5월 1일이라고 보는 것이 편하지만, 미국은 5/30/2023 이런식으로 보는게 편하다. 그래서 국가나 지역적으로 다른 형식으로 보여줘야하는 곳에서 사용하기 위해 만들어졌다.
See the Pen Untitled by sodium casein (@xyyhsawg-the-selector) on CodePen.
또한 요즘 SNS나 유튜브에서 등록날짜가 1일전, 1주일전 식으로 표시되는 경우가 많은데, RelativeTimeFormat을 사용하면 좋다. 현재 날짜와 이전 날짜의 차이를 구해서 10개월 전, 10일 전, 지난 주 등 형식으로 표시해주는데, 현재 날짜와의 차이를 구해서 넣어주면 된다.
See the Pen Untitled by sodium casein (@xyyhsawg-the-selector) on CodePen.
Intl API 참고 문서
Intl - JavaScript | MDN
The Intl namespace object contains several constructors as well as functionality common to the internationalization constructors and other language sensitive functions. Collectively, they comprise the ECMAScript Internationalization API, which provides lan
developer.mozilla.org
'IT > javascript' 카테고리의 다른 글
| [javascript] 배열 객체 메소드 (0) | 2023.06.14 |
|---|---|
| [javascript] 속성 탐색 연산자 (jquery,Vanilla JS) (0) | 2023.06.10 |
| [Javascript] 알면 유용한 자바스크립트(템플릿 리터럴, NULL 병합 할당 연산자, optional chaining) (0) | 2023.06.04 |
| [javascript] 카카오지도 API + geolocation API로 현재 위치의 주소 찾기 (0) | 2023.05.24 |
| [javascript] 체크박스(checkbox) 전체선택, 해제 vanilla, jquery로 만들기 (0) | 2023.05.23 |