[JS] Date 객체의 형식 지정하기 (방명록 작성일 형식 수정)

📌 문제

 

 

작성일을 2024-11-10 11:20과 같은 형식으로 표현하고 싶은데,

 

dateTd.textContent = new Date().toLocaleString();

 

위와 같이 toLocaleString을 썼더니 `2024.11.10 오후 11:20:11`과 같이 나오고 있다.

 

📌 해결 과정

1차 시도 - toLocaleString 옵션 설정하기

 dateTd.textContent = new Date().toLocaleString('ko-KR', {
          year: 'numeric',
          month: 'numeric',
          day: 'numeric',
          hour: 'numeric',
          minute: 'numeric',
          hour12: false, //24시간제로 표시
        });

 

toLocaleString('ko-KR', options):

• year: 'numeric': 연도를 4자리 숫자로 표시
• month: 'numeric': 월을 숫자로 표시 (앞에 0을 붙이지 않음)
• day: 'numeric': 일을 숫자로 표시
• hour: 'numeric': 시간을 숫자로 표시 (24시간 형식)
• minute: 'numeric': 분을 숫자로 표시 (앞에 0을 붙이지 않음)

 

여전히 2024-11-10 11:20 와 같은 형식은 아니다. Date() 객체를 쓸 수 밖에 없다....

 

 

2차 시도 (성공) - Date() 객체에서 직접 값 가져와서 형식 지정하기

 

 

 

const date = new Date();
        const formattedDate =
          `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}` +
          ` ${date.getHours()}:${date.getMinutes()}`;
        dateTd.textContent = formattedDate;

 

이번에는 시간 표시 형식이 문제다. `08:33`과 같이 시/분이 한자리인 경우 0을 채워넣고 싶다.

문자열의 길이를 특정 길이로 설정하기 위해 문자열 앞에 원하는 문자를 추가하는 `padStart()`라는 자바스크립트 문자열 함수를 사용하자.

 

문자열 함수이기 때문에 Date()객체 함수들이 반환한 숫자값들을 `String()`을 통해 문자열로 바꿔준 뒤 `padStart()`를 사용해야 한다.

 

 

const date = new Date();
        const formattedDate =
          `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}` +
          ` ${String(date.getHours()).padStart('2', 0)}:${String(
            date.getMinutes()).padStart('2', 0)}`;
        dateTd.textContent = formattedDate;

 

 

날짜와 시간 포맷팅:

• now.getFullYear(): 연도를 반환 (예: 2024)
• now.getMonth() + 1: 월을 반환 (0부터 시작하므로 +1)
• now.getDate(): 일을 반환
• now.getHours(): 24시간 형식으로 시간을 반환
• String(now.getMinutes()).padStart(2, '0'): 분을 두 자리로 표시, 필요할 때 앞에 0 추가

 

[JS 코드 전문]

const writerField = document.getElementById('writer');
const contentField = document.getElementById('content');
const table = document.getElementById('table');

      // [등록] 버튼 클릭시 writeNote() 함수가 실행되도록 인라인 방식으로 미리 설정해 두었습니다.
      function writeNote() {
        if (writerField.value === '' || contentField.value === '') {
          alert('작성자와 내용을 모두 입력해주세요');
          return;
        }
        const newTr = document.createElement('tr');
        const writerTd = document.createElement('td');
        const contentTd = document.createElement('td');
        const dateTd = document.createElement('td');

        writerTd.innerText = writerField.value;
        contentTd.innerText = contentField.value;

        const now = new Date();
        const formattedDate =
          `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(
            2,
            '0'
          )}-${String(now.getDate()).padStart(2, '0')}` +
          ` ${String(now.getHours()).padStart(2, '0')}:${String(
            now.getMinutes()
          ).padStart(2, '0')}`;
        dateTd.innerText = formattedDate;

        newTr.append(writerTd, contentTd, dateTd);
        table.appendChild(newTr);

        writerField.value = '';
        contentField.value = '';
      }

 

📌 추가 학습 : padStart()

 

#사용법

string.padStart(targetLength, padString);

• targetLength: 최종적으로 만들어질 문자열의 길이
• padString: 문자열 앞에 추가할 문자. 기본값은 ' '(공백)

#예제

(1) 숫자를 두 자리로 맞추기
시간이나 분과 같이 한 자리 숫자 앞에 0을 붙여 두 자리로 표시할 때 유용하다.

const minutes = 5;
console.log(String(minutes).padStart(2, '0')); // "05"

 

(2) 전화번호 형식으로 맞추기

const phone = '12345';
console.log(phone.padStart(10, '0')); // "0000012345"

 

 

#padStart와 Date 활용 예제

 

padStart는 시간 표시처럼 특정 길이로 숫자를 맞출 때 자주 사용된다.. 예를 들어, new Date()로 얻은 getMinutes()는 0~59의 값을 반환하므로, 5분처럼 한 자리인 경우 05로 표시하고 싶을 때 유용하다.

 

const now = new Date();
const minutes = String(now.getMinutes()).padStart(2, '0');
console.log(`현재 분: ${minutes}`); // "현재 분: 05" (만약 현재 분이 5분이라면)

 

아래와 같이 신용카드번호처럼 긴 숫자의 마지막 4자리만 표시하고 나머지를 `*`로 숨길 때도 사용할 수 있다.

const fullNumber = '2034399002125581';
const last4Digits = fullNumber.slice(-4);
const maskedNumber = last4Digits.padStart(fullNumber.length, '*');

console.log(maskedNumber);
// Expected output: "************5581"

 

 

 

---

참고

-MDN padStart()

-MDN toLocaleString()

-새싹x코딩온 웹풀스택 개발자 교육