MySQL 데이터베이스에 저장된 날짜 값을 자바스크립트에서 다루어야 할 때가 종종 있습니다. 이럴 때 가장 간단하게 활용할 수 있는 것이 바로 Date.parse() 메서드입니다.
변환 시 꼭 알아야 할 주의 사항
MySQL의 기본 날짜 형식은 'YYYY-MM-DD HH:MM:SS'입니다. 그런데 일부 브라우저는 하이픈(-)으로 구분된 날짜 문자열을 ISO 8601 표준으로 해석하여 UTC 기준으로 처리하거나 아예 파싱에 실패할 수 있습니다.
따라서 replace(/[-]/g, '/')를 사용해 하이픈(-)을 슬래시(/)로 바꿔주면, 대부분의 브라우저에서 현지 시간대 기준으로 안정적으로 파싱됩니다. 이 작은 치환이 크로스 브라우징 문제를 예방하는 핵심 포인트입니다.
예제 코드
아래 코드를 실행하면 MySQL 날짜 문자열이 자바스크립트 Date 객체로 변환되는 것을 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<body>
<script>
var MySQL_date = '2017-12-31 11:55:17';
document.write("MySQL Date: "+MySQL_date);
var jsDate = new Date(Date.parse(MySQL_date.replace(/[-]/g,'/')));
document.write("<br>JavaScript Date: "+jsDate);
</script>
</body>
</html>실행 결과
MySQL Date: 2017-12-31 11:55:17 JavaScript Date: Sun Dec 31 2017 11:55:17 GMT+0530 (India Standard Time)
정리
MySQL 날짜를 자바스크립트로 변환하는 절차를 요약하면 다음과 같습니다.
1. MySQL에서 받은 날짜 문자열의 하이픈(-)을 슬래시(/)로 치환합니다.
2. Date.parse()로 밀리초 단위 타임스탬프를 얻습니다.
3. new Date()에 전달하여 Date 객체를 생성합니다.
이렇게 변환된 Date 객체는 getFullYear(), getMonth(), getDate() 등의 메서드를 통해 연도, 월, 일 등 원하는 정보를 자유롭게 추출하거나 화면에 표시할 수 있습니다.