socket.io를 활용하여 채팅창을 만들던 중, 메세지를 보냈을 때의 시간이 표기되길 원하여
메세지의 내용에 time: new Date(Date.now()).getHours() + ':' + new Date(Date.now()).getMinutes(), 형식으로
현재 시간을 포함하여 socket 통신에 전송해주었다.
예를 들어 오전 9시 5분이라고 가정하면 09:05 와 같은, 즉 00:00 형식으로 표기되는 것이 일반적인데
실제로 작동상에서는 9:5 로 표기되었다.
시간의 길이를 측정하여 2자리 미만일 경우 앞에 0을 물리적으로 추가해주는 함수를 짜고있던 찰나!
String.prototype.padStart() 라는 편리한 메서드를 발견했다.
▶ MDN 공식문서 : padStart() MDN Web Docs
사용방법은 다음과 같다.
기본적으로 padStart() 메서드는 String 타입에만 동작하며,
padStart()의 인자로 자릿수, 입력할 문자열을 넣어주면 된다.
예를 들어, String 타입의 변수 letter 가 있다고 가정하고 (const letter = '1';)
출력하고 싶은 결과가 001 이라면, letter.padStart(3, '0') 과 같이 사용해주면 된다!
해석하자면 length가 3이 될 때까지 '0'을 넣겠다는 것이다.
꼭 String 타입의 숫자가 아니어도 되며,
두 번째 인자인 문자열을 입력하지 않고 실행하면 공백이 입력된다.
'abc'.padStart(10); // " abc"
'abc'.padStart(10, "foo"); // "foofoofabc"
'abc'.padStart(6,"123465"); // "123abc"
'abc'.padStart(8, "0"); // "00000abc"
'abc'.padStart(1); // "abc"위에서 시간에 포함될 데이터에 new Date(Date.now()).getHours() 을 담아주었는데,
getHours()를 통해 출력되는 값은 Number 타입이다.
그렇기에 아래와 같은 TypeError 가 발생한다.
그래서! 앞에 String()을 붙여 출력되는 값을 String 타입으로 바꿔준 후,
padStart() 메서드를 사용하면 정상적으로 작동하는 것을 확인할 수 있다.
직접 함수를 만들어서 value, targetLength, filler 를 인자로 받고 공간을 채울 수도 있었겠지만...
역시 메서드는 알면 알수록 편리하다는 생각이 든다 :0
