웹 공부

브라우저와 Node 환경에서의 Date 객체는 어째서 다를까 ?

beingB 2024. 12. 19. 19:25
반응형

해당 내용은 잘못된 정보를 포함하고 있을 수 있습니다.

 

앞 내용에 대해 이야기하기 앞서 시간대에 대한 정의가 우선적으로 되어야 할 것 같습니다.

 

그리니치 평균 시(GMT, Greenwich Mean Time)

그리니치 천문대를 기점으로 하는 협정 세계시입니다.

 

협정 세계시(UTC, Coordinated Universal Time)

세슘 원자 진동수를 기반으로 측정합니다.

기술적인 표기에는 UTC를 사용합니다.

 

시간대

360도를 24로 나누면 15도 당 1 시간

경도 15도 단위로 한 시간씩 차이가 납니다.

대한민국 시간대(KST, Korean Standard Time) 는 경도 135도 를 기준으로 UTC+9 에 속합니다.

 

ISO 8601

날짜와 시간과 관련된 데이터 교환을 다루는 국제 표준입니다.

표준 내에서 특정 의미를 제공하는 ('-', ':', 'T', 'W', 'Z') 로 구성됩니다.

날짜 : 2024-12-19

조합된 UTC 날짜 및 시간 : 2024-12-19T17:13:40Z

표준 시간대는 지역시간, UTC 혹은 UTC의 오프셋으로 표현합니다.

 

만약 UTC 관계 정보에 시간 표현이 함께 주어지지 않는다면, 시간은 지역 시간으로 간주합니다.

시간이 UTC 인 경우 뒤에 Z 를 직접 추가해야 합니다.

Z 는 오프셋이 0 인 UTC를 위한 지역 지정자 입니다.

 

UTC 에서의 시간 오프셋

UTC 에서의 오프셋은 위에서 Z 를 붙인것과 동일하게 +-[hh]:[mm] 형식을 시간 뒤에 붙입니다.

 

혼합 일시 표현

시간에서의 단일 포인트는 완전한 날짜 표현, 구분 문자 T 그리고 유효한 시간 표현을 연결하여 표현합니다.

 

NHN CLOUD - JS 에서 타임존 다루기 를 기반으로 추가 내용을 작성해보도록 하겠습니다.

서버에 저장된 동일한 데이터에 접근하는 클라이언트들이 서로 다른 타임존을 가지고 있을 수 있습니다.

서버에 저장되는 데이터는 타임존에 영향을 받지 않는 절대값이여야 합니다.

 

사용자의 입력 값을 ISO-8601 형태로 변환하는 작업 (파싱)

UTC 형태의 데이터를 받아서 사용자의 타임존에 맞게 변환하는 작업 (포맷팅)

 

Node.js 를 이용한 서버 환경에서 JS 를 사용할 때에도 경우에 따라 클라이언트로부터 전달받은 데이터를 파싱해야 하는 작업이 필요합니다.

 

자바스크립트의 Date 객체는 내부적으로 유닉스 시간과 같은 절대값으로 시간 데이터를 관리합니다.

하지만 생선자나 내부 함수들은 클라이언트의 로컬 타임존에 영향을 받습니다.

사용자가 입력한 데이터를 이용해 그대로 Date 객체를 생성하거나 값을 지정한다면 그 데이터는 클라이언트의 로컬 타임존을 그대로 반영합니다.

 

서버 데이터를 이용한 Date 객체 생성

"2017-03-11T11:30:00" → "Sat Mar 11 11:30:00 UTC+0900 2017"

"2017-03-11T11:30:00Z" → "Sat Mar 11 20:30:00 UTC+0900 2017"

브라우저에 따라 마지막에 Z 문자가 없으면 로컬 타임존을 사용하게 됩니다.

 

서버로 전달할 데이터 생성

Date 객체를 이용하면 로컬 타임존을 기준으로 날짜나 시간을 더하거나 빼는 등의 연산을 자유롭게 할 수 있습니다.

하지만 마지막에 다시 서버로 데이터를 전송하기 위해서는 데이터를 변환하는 과정이 필요합니다.

→ toISOString 을 통해 타임존에 영향을 받지 않는 절대값을 만들 수 있습니다.

 

실제 동작은 ?

서버 환경에서는 ?

 

"2024-12-16" 으로 전달된다면

이미 ISO 8601 를 충족한 형태이기에 절대값으로 전달됐다고 판단합니다.

그렇기에, UTC 라고 판단하고 "2024-12-16T00:00:00.000Z" 로 판단합니다.

 

"2024-12-16T00:00:00+09:00" 으로 전달된다면 

UTC 로 변경하기 위해 9 시간이 빠진 절대값으로 저장되게 됩니다.

 

"2024-12-16T00:00:00" 으로 전달된다면

절대값으로 변경되지 않은 로컬 타임존이라고 판단되어 절대값으로 변경하기 위해 9시간이 빠지게 됩니다.

 

"2024-12-16T00:00:00Z" 으로 전달된다면

Z 가 붙어있는 것이 UTC 절대값으로 판단하기에 시간이 그대로 저장되게 됩니다.

 

클라이언트 환경에서는 ?

"2024-12-16" 으로 전달된다면

전달되는 값이 ISO 8601 을 충족된 형태이기에 절대값으로 전달됐다고 판단하여

한국 로컬 시간대로 변경되어 9시간이 추가되어 한국 표준시로 보여지게 됩니다.

 

"2024-12-16T00:00:00+09:00" 으로 전달된다면

전달되는 값이 이미 한국 표준시로 전달된 값으로 판단하기 때문에

따로 로컬 시간대로의 변경과정 없이 그대로 데이터가 보여지게 됩니다.

 

"2024-12-16T00:00:00" 으로 전달된다면

전달되는 값이 로컬 시간대로 판단하기 때문에

전달받은 값을 그대로 표현하게 됩니다.

 

"2024-12-16T00:00:00Z" 으로 전달된다면

전달받은 값은 Z 가 붙은 UTC 표준으로 판단되기에

브라우저에서는 로컬 시간대가 보여지기에 9시간이 더해진 시간이 노출되게 됩니다.

 

반응형