[javascript] 자바스크립트 날짜 포맷 알아보자! (date format, date parse)

오늘은 자바스크립트의 날짜 포맷 관련해서 정리해보려고 한다.
자바스크립트의 기본 함수인 Date()를 이용해서 간단하게 문자열 형식의 데이터를 date 형태의 날짜로 변환하는 것을 날짜 포맷이라고 한다. 소프트웨어 개발을 하다 보면 데이터의 형식을 변경하는 작업은 항상 필요한 작업이며, 날짜 역시 자유롭게 포맷과 파싱을 할 수 있어야 한다.

---

Date format의 개념

자바스크립트에서 날짜를 포맷하는 것은 날짜를 원하는 형식으로 변경하는 과정이다. 이는 날짜 객체의 값을 문자열로 변환하여 특정 형식에 맞게 출력하는 것을 의미한다.

Date 객체
자바스크립트에서 날짜와 시간을 다루는 데에 가장 기본이 되는 내장 객체다. Date 객체는 날짜와 시간 정보를 나타내는 데 사용되며, 이를 이용하여 다양한 연산을 수행할 수 있다.

Date 포맷팅
Date 객체를 특정 형식의 문자열로 변환하는 것을 포맷팅이라고 한다. 날짜를 원하는 형식으로 표시하기 위해 날짜 객체의 메서드와 문자열 조합을 사용하는 것을 의미한다.

포맷 문자열
날짜 포맷을 지정하는 문자열은 특정 패턴을 따른다. 예를 들어, YYYY는 연도를 4자리 숫자로 표시하고, MM은 월을 2자리 숫자로 표시하는 등의 형식을 가진다.

내장 메서드
자바스크립트 Date 객체의 내장 메서드를 사용하여 날짜 포맷을 변경할 수 있다. 주요한 메서드로는 getFullYear(), getMonth(), getDate(), getHours(), getMinutes() 등이 있다. 이러한 메서드를 조합하여 원하는 포맷으로 날짜를 출력할 수 있다.

locale과 timezone
날짜 포맷팅은 locale과 timezone에 따라 달라질 수 있다. locale은 지역화된 형식을 사용하여 날짜를 표시하고, timezone은 시간대를 나타낸다.


이렇게 날짜 포맷에 대한 개념을 이해하고 자바스크립트에서 제공하는 내장 메서드나 외부 라이브러리를 활용하여 원하는 형식의 날짜를 표시할 수 있다.

---

Date format의 활용 사례

날짜 포맷은 다양한 상황에서 유용하게 활용될 수 있다.


데이터 표시
웹 애플리케이션에서 데이터베이스에서 가져온 날짜 및 시간 정보를 사용자에게 표시할 때 날짜 포맷을 사용한다. 예를 들어 블로그 게시물의 작성일을 "YYYY년MM월DD일" 형식으로 표시할 수 있다. 날짜 포맷을 하지 않으면 날짜 데이터의 가독성이 떨어져 사용자의 불편함이 생길 수 있다.

데이터 입력
데이터를 입력할 때 사용자가 날짜를 입력하는 경우 날짜 포맷을 사용하여 입력 형식을 제어하고 유효성을 검사할 수 있다. 예를 들어 MM/DD/YYYY 형식으로 입력하도록 요구할 수 있다.

이벤트 스케쥴링
이벤트 관리 시스템에서 사용자가 이벤트를 선택할 때 사용할 수 있는 캘린더를 제공할 수 있으며, 이 경우 캘린더에서 이벤트의 날짜를 선택하고 표시할 때 날짜 포맷을 사용하여 정보를 보여줄 수 있다.

데이터의 정렬
표 형식의 데이터를 표시할 때 날짜 포맷을 사용하여 데이터를 정렬할 수 있다. 이를 통해 사용자가 데이터를 보다 쉽게 읽고 해석할 수 있다.

차트 및 통계
데이터 시각화 도구를 사용하여 날짜를 포함하는 차트 및 그래프를 생성할 때 날짜 포맷을 사용하여 축을 레이블링하고 데이터를 표시한다.

---

formatDate 함수 예제 소스 코드

<script>
/**
 * Document load 
 */
document.addEventListener('DOMContentLoaded', () => {
    
    const dateStr = '2022-12-28';
    const dateStrId01 = formatDate(dateStr, '-');
});

/**
 * date format
 */
function formatDate (dateStr, pattern) {

    // dateStr, pattern validation check
    if (!dateStr || !pattern) {
        return '';
    }

    // pattern 기준으로 문자열 split
    const dateArr = dateStr.split(pattern);
    // 0: YYYY, 1: MM, 2: DD
    // month는 -1 해야함
    return new Date(dateArr[0], dateArr[1] - 1, dateArr[2]);
}
</script>

위의 소스 코드는 formatDate 함수를 별도로 생성하여 날짜 포맷하는 예제를 작성하였다. 
함수에는 string 형태의 날짜값과 패턴값을 받고 있고, 전달받은 날짜값의 구분값 기준으로 split을 하고 index에 맞춰 new Date() 함수 안에 세팅을 해주면 해당 날짜로 포맷이 되는 기능이다.

new Date(년, 월, 일)
위의 패턴대로 셋팅할 날짜 정보를 넣어주면 된다.

 

다음은 시간(시분초)까지 포함된 날짜 포맷 함수다.

---

formatDateTime 함수 예제 소스 코드

<script>
/**
 * Document load 
 */
document.addEventListener('DOMContentLoaded', () => {
    
    const dateStr = '2022-12-28 19:30:13';
    const dateStrId02 = formatDateTime(dateStr);
    console.log(dateStrId02);
});

/**
 * 날짜 시간 date format
 */
function formatDateTime (dateStr) {
    if (!dateStr) {
        return '';
    }

    const dateSplit = dateStr.split(' ');
    const dateArr = dateSplit[0].split('-');
    const timeArr = dateSplit[1].split(':');

    return new Date(dateArr[0], dateArr[1] - 1, dateArr[2], timeArr[0], timeArr[1], timeArr[2]);
}
</script>

위의 소스 코드는 시분초가 포함된 formatDatetime 함수는 formatDate 함수와 다르게 pattern을 주지 않고 지정된 구분값 기준으로만 포맷처리를 하였다. 패턴을 주게 되면 시간 패턴까지 입력을 해야 돼서 복잡해질 수 있어서 지정된 패턴만 받을 수 있도록 처리해야 한다.

해당 함수에서도 위에 정리한 것과 같이 new Date() 함수에 형식에 맞게 파싱 된 값을 입력해 주면 된다.
new Date(년, 월, 일, 시, 분, 초)

이렇게 날짜별, 날짜시간별 date format 처리하는 예제 함수를 만들어 보았고, 다음은 몇 가지 날짜 형식을 넣고 실행하는 코드를 작성하였다.

 

---

formatDate와 formatDateTime 함수 예제 소스 코드

<script>
/**
 * Document load 
 */
document.addEventListener('DOMContentLoaded', () => {

    /**
     * 날짜 포맷 리스트
     */
    const dateList = [
        // '-' 패턴으로 셋팅된 날짜
        { str : '2022-12-28'            , date : formatDate('2022-12-28', '-')          },
        // '/' 패턴으로 셋팅된 날짜
        { str : '2022/11/28'            , date : formatDate('2022/11/28', '/')          },
        // '.' 패턴으로 셋팅된 날짜
        { str : '2022.10.28'            , date : formatDate('2022.10.28', '.')          },
        // 날짜 + 시간으로 셋팅된 날짜
        { str : '2022-12-28 19:30:13'   , date : formatDateTime('2022-12-28 19:30:13')  },
    ];

    /**
     * 날짜 포맷 리스트 table 삽입 코드 생성
     */
    let html  = '';
    dateList.forEach((item) => {
        html += '   <tr>';
        html += '       <td>' + item.str + '</td>';
        html += '       <td>' + item.date + '</td>'; 
        html += '   </tr>';      
    });

    /**
     * table 목록 inner 처리
     */
    document.getElementById('dateTable').querySelector('tbody').innerHTML = html;
});

/**
 * 날짜 format
 */
function formatDate (dateStr, pattern) {

    // dateStr, pattern validation check
    if (!dateStr || !pattern) {
        return '';
    }

    // pattern 기준으로 문자열 split
    const dateArr = dateStr.split(pattern);
    // 0: YYYY, 1: MM, 2: DD
    // month는 -1 해야함
    return new Date(dateArr[0], dateArr[1] - 1, dateArr[2]);
}

/**
 * 날짜 시간 date format
 */
function formatDateTime (dateStr) {
    if (!dateStr) {
        return '';
    }

    const dateSplit = dateStr.split(' ');
    const dateArr = dateSplit[0].split('-');
    const timeArr = dateSplit[1].split(':');

    return new Date(dateArr[0], dateArr[1] - 1, dateArr[2], timeArr[0], timeArr[1], timeArr[2]);
}
</script>

<div>
    <table id="dateTable" border>
        <thead>
            <tr>
                <th>string</th>
                <th>date</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
</div>

<style>
table {
    table-layout: fixed;
    width       : 500px;
}
</style>

formatDate 함수를 호출하는 값에는 패턴별로 3종류를 넣어서 호출하였고, formatDateTime 함수를 호출하는 값에는 기본 패턴의 값을 추가하였다.

실행 결과

실행 결과는 format 함수들이 기능 동작을 잘하여 포맷이 잘 된 것을 확인할 수 있다.
지난번에 포스팅한 parseDate와 함께 날짜 형식을 바꿔가면서 활용을 한다면 업무에 많은 도움이 될 것이다.

- date 형태 -> string 형태 : parseDate()
- string 형태 -> date 형태 : formatDate()

 

반응형

---

Date format 사용 시 주의사항

자바스크립트에서 문자열 형태의 데이터를 날짜 형식으로 변환할 때 주의해야 할 사항이 몇 가지 있다.


유효한 포맷
Date 객체 또는 Date.parse 메서드를 사용하여 문자열을 날짜로 변환할 때에는 문자열이 유효한 날짜 형식을 가져야 한다. 일반적으로 ISO 8601 형식 (YYYY-MM-DD 또는 YYYY-MM-DDTHH:MM:SS)이 권장된다.

브라우저 간 호환성
Date 객체는 브라우저 간에 동작이 다를 수 있으며, 날짜 문자열의 형식이 다른 경우, 특정 브라우저에서는 다른 브라우저와 다르게 해석될 수 있다.

타임존
날짜를 문자열에서 파싱할 때 기본적으로 로컬 타임존이 사용된다. 가끔 UTC 기준으로 날짜를 파싱하고 타임존을 명시적으로 설정해야 하는 경우도 있기 때문에 타임존을 확인하고 포맷을 진행하는 것이 좋다.

성능 고려
날짜 문자열을 파싱하는 작업은 상대적으로 높은 성능을 요구할 수 있다. 대량의 데이터를 다루는 경우 항상 성능에 주의하는 것이 좋다.

오류 처리
유효하지 않은 날짜 문자열을 변환하려고 시도하면 NaN (Not-a-Number) 이 반환된다. 따라서 이러한 경우에 대한 오류 처리를 해야 한다.

---

마무리

프로그래밍 개발을 하다 보면 빼놓을 수 없는 날짜 데이터를 DB - backend - frontend 사이를 오가며 상황에 따라 형식을 바꿔줘야 하는 상황이 아주 많다. 하나로 통일하면 좋겠지만 그렇지 않은 시스템도 많기 때문에 처리하는 방법을 알아두면 좋다.
그리고 날짜를 다룰 때에는 항상 여러 방면의 이슈를 고려하면서 구현하는 것이 좋다. 마지막에 정리한 주의사항과 같이 고려한다면 훨씬 더 높은 품질의 서비스를 개발할 수 있다.

 

* 연관 예제
https://sancode.tistory.com/21

[javascript] date parse (date to string), 날짜 파싱 배우기