[JS]날짜 데이터 전송하기

서버에서 브라우저로 날짜를 전송하거나, 반대로 브라우저에서 서버로 날짜를 전송할 때는 조금 복잡할 수 있습니다.

서버와 브라우저가 다른 타임존에 있더라도 사용자는 자신의 타임존을 기준으로 날짜를 보고 싶어 할 겁니다.

 

다행히 자바스크립트의 Date 인스턴스는 날짜를 저장할 때 UTC를 기준으로 유닉스 타임스탬프를 저장하므로,

Date 객체를 그냥 전송해도 일반적으로 안전합니다.

 

자바스크립트에서 날짜를 전송하는 가장 확실한 방법은 JSON을 사용하는 겁니다.

날짜는 JSON에서 1:1 대칭이 되게끔 파싱할 수 없으므로 JSON 명세에는 날짜에 대한 데이터 타입을 정의하지 않습니다.

const before = { d : new D
//before -> {d: Wed Nov 13 2019 09:47:06 GMT+0900 (한국 표준시)}
//before.d -> Wed Nov 13 2019 09:47:06 GMT+0900 (한국 표준시)

before.d instanceof Date
//true

const json = JSON.stringify(before);
//json -> "{"d":"2019-11-13T00:47:06.943Z"}"
//한국 타임존인 +9시간이 빠진 UTC시간

const after = JSON.parse(json);
//after -> {d: "2019-11-13T00:47:06.943Z"}
//after.d -> "2019-11-13T00:47:06.943Z"

after.d instanceof Date
//false

typeof after.d
//"string"

 

즉, JSON으로 바로 날짜를 다룰 수는 없지만, 전송된 문자열에서 날짜를 '복구'하는 것은 가능합니다.

after.d = new Date(after.d);
//Wed Nov 13 2019 09:47:06 GMT+0900 (한국 표준시)
//한국 타임존이 계산된 시간 (+9시간)

after.d instanceof Dat
//true

 

원래 날짜가 어느 타임존에 있었든, 일단 JSON으로 인코드된 날짜는 UTC입니다. 그리고 JSON으로 인코드된 문자열을

Date 생성자에 넘겨서 얻은 날짜는 사용자의 타임존을 기준으로 표시됩니다.

 

문자열로 인코드하지 않고 valueOf() 메서드로 얻은 숫자를 그냥 전송해도 됩니다.

const before = { d : new Date().valueOf() };
//before -> {d: 1573609376878}
//new Date() 후 valueOf()메서드를 사용하게 되면
//유닉스 타임스탬프 값을 가져오게 됩니다.(UTC기준시로부터 지나간 시간[ms])

typeof before.d
//"number"

const json = JSON.stringify(before);
//json -> "{"d":1573609376878}"

const after = JSON.parse(json);
//after -> {d: 1573609376878}

typeof after.d
//"number"

const d = new Date(after.d);
//Wed Nov 13 2019 10:42:56 GMT+0900 (한국 표준시)

 

 

참고 도서 : 러닝 자바스크립트