[JS] toLocaleString()를 사용하여 날짜를 원하는 포맷의 문자열로 저장하기

바닐라 자바스크립트로 투두리스트를 만들어보고 있다.

GitHub - jisunipark/toodoo

 

 

toLocaleDateString() 메서드

 

todo 아이템을 생성할 때 현재 날짜를 'yy/mm/dd'의 형식의 문자열로 저장하고 싶다.

 

Date 객체가 제공하는 getDate()나 getMonth() 같은 메서드를 적절하게 이용해서 문자열로 변환한 후 사용할 수도 있겠지만, 뭔가 Date 객체가 제공하는 메서드들 중에 활용해 볼 수 있는 게 있지 않을까 싶어 찾아보니, toLocaleString() 메서드를 사용할 수 있었다.

 

Date.prototype.toLocaleDateString([locales[, options]])

 

 

toLocaleDateString() 메서드는 현지 표준 시간대 날짜의 날짜 부분을 언어에 맞춰 표현한 문자열을 반환한다.

 

첫 번째 인수(locales)로는 어떤 국가에 해당하는 포맷의 날짜를 원하는지, 그 국가의 BCP 47 언어 태그를 전달할 수 있고,

두 번째 인수(options)로는 포맷을 변경할 수 있는 옵션을 설정할 수 있다. 옵션은 객체의 형식으로 전달한다. (옵션들에 사용할 수 있는 값들은 여기에서 확인 가능)

 

나는 현재 날짜를 'yy/mm/dd'의 형식의 문자열을 저장하고 싶었기 때문에 아래와 같은 옵션을 지정했는데,

new Date()
    .toLocaleDateString('ko-KR', {
      dateStyle: 'short',
    })

 

아쉽게도 각각의 숫자를 "/"가 아닌 "."으로 구분하고 있다.

 

구분자에 대한 설정은 두 번째 인수로 들어가는 옵션 객체로 바꿀 수 없나 찾아보았지만 아쉽게도 기본적으로 제공되는 옵션에는 구분자를 변경하는 옵션은 없다. 문자열을 가공하는 수 밖에는 없어서, toLocaleString() 메서드가 반환한 문자열에 replace 함수를 사용해서 포매팅을 하는 방식을 택했다.

new Date
  .toLocaleDateString('ko-KR', {
    dateStyle: 'short',
  });
  .replaceAll('. ', '/')
  .replace('.', '');

 

추가로 replace 함수를 사용해야 한다니, 차라리 아래처럼 연, 월, 일 각각의 값을 각각의 메소드로 받아 문자열로 연결시키는 편이 나았을까 싶다.

  const today = new Date();
  
  const yy = today.getFullYear();
  const mm = today.getMonth() + 1;
  const dd = today.getDate();

  return `${yy}/${mm}/${dd}`;

 

두 경우 모두 원하는 형식으로 포매팅되어 오늘 날짜가 잘 보여진다.

 

🤔  궁금한 점

갑자기 궁금해진 점은, toLocaleDateString()을 이용한 첫 번째 경우와 getDate() 같은 메서드를 사용한 두 번째 경우와 성능적인 면에서 차이가 있을까?

 

뭔가 내 생각은, replace 메서드를 사용해야 하는 첫 번째 경우는 문자열 내 각각의 문자를 순회하며 바꿀 글자를 찾아야 하지 않나 싶어서 첫 번째 방식이 두 번째 방식에 비해 성능상 조금 더 안 좋지 않을까 싶은데..

 

이 문제에 대해서 찾아보니 우선 내 예상은 맞았다. replace 메서드는 문자열의 길이가 늘어날수록 작업에 걸리는 시간이 선형적으로 증가하는 O(n) 시간 복잡도를 가진다고 한다. 반면 getFullYear, getMonth, getDate 메서드는 단순히 숫자를 바로 읽어오기 때문에 O(1)의 시간 복잡도를 가지기 때문에 훨씬 단순하다.

 

그런데 그보다도 toLocaleDateString 메서드는 내부적으로 브라우저 내부에서 로케일 정보를 불러오고 복잡한 처리 과정을 거친다고 한다. 이 내용은 mdn 문서에서도 찾아볼 수 있는데, 이런 문제로 Intl.DateTimeFormat 객체를 생성해서 사용하는 것을 더 권장하고 있다. (toLocaleDateString 메서드는 단순히 Intl.DateTimeFormat을 호출하기 때문)

MDN

정리하면 성능 면에서의 차이는 아래와 같다. 

 

즉, getDate() 같은 메서드를 사용한 두 번째 방식이 성능을 생각한다면 더 나은 방식이라 할 수 있겠다. toLocaleDateString은 로케일 기반으로 한다는 점에 장점이 있어서 이런 부분이 중요하다면 첫 번째 방식을 사용할 수도 있겠지만, 나의 경우는 단순 포매팅을 위한 것이었기 때문에 두 번째 방법으로 하기로 한다. (뭐 사실 단순하게 투두리스트 만드는 거라 별 상관없을 것 같긴 하지만ㅋㅋ그래도)

 

참고

Date.prototype.toLocaleDateString() - JavaScript | MDN

Intl.DateTimeFormat() 생성자 - JavaScript | MDN

[🎯투두리스트 React] toLocaleDateString() 메서드로 원하는 날짜, 시간 포맷 구현하기