JavaScript Academy · 강의

시간대와 UTC

UTC와 현지 시간을 올바르게 처리합니다.

레슨 4/413개 단계

시간대와 UTC은(는) CoddyKit의 무료 JavaScript Academy 강의입니다. 이것은 4개 중 4번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 JavaScript Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. JavaScript Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

현지 시간과 UTC

날짜는 하나의 절대적인 순간을 저장하지만, 현지 시간이나 전 세계 기준 시간인 UTC로 읽을 수 있습니다. getter에는 두 가지 방식이 있습니다.

const d = new Date(Date.UTC(2024, 0, 15, 12, 0, 0))
console.log(d.getUTCHours())

UTC getter

getUTCFullYear 및 getUTCHours처럼 UTC가 앞에 붙은 메서드는 컴퓨터와 관계없이 UTC 시간대의 날짜 구성 요소를 읽습니다.

const d = new Date(Date.UTC(2024, 5, 15, 8, 30, 0))
console.log(d.getUTCFullYear())
console.log(d.getUTCHours())
console.log(d.getUTCMinutes())

getTimezoneOffset

getTimezoneOffset은 현지 시간과 UTC의 차이를 분 단위로 반환합니다. 양수 값은 현지 시간이 UTC보다 느리다는 뜻입니다.

const d = new Date()
const offset = d.getTimezoneOffset()
console.log(typeof offset)

오프셋 부호

오프셋의 부호는 많은 사람이 예상하는 것과 반대입니다. UTC보다 앞선 시간대는 음수 오프셋을 제공합니다. 분을 60으로 나누면 시간을 구할 수 있습니다.

const offsetMinutes = 120
const hours = offsetMinutes / 60
console.log(hours)

UTC 날짜 만들기

Date.UTC는 생성자와 동일한 구성 요소 인수를 받지만 이를 UTC로 해석하고, new Date에 전달할 수 있는 타임스탬프를 반환합니다.

const ts = Date.UTC(2024, 0, 1, 0, 0, 0)
const d = new Date(ts)
console.log(d.getUTCHours())

UTC setter

setUTCHours와 같은 setter는 UTC 시간대에서 날짜를 조정합니다. 현지 setter와 같은 방식으로 작동하지만 UTC를 기준으로 합니다.

const d = new Date(Date.UTC(2024, 0, 1, 0, 0, 0))
d.setUTCHours(15)
console.log(d.getUTCHours())

ISO 문자열의 Z

ISO 문자열 끝의 Z는 시간이 UTC임을 의미하며, 이를 줄루 시간이라고도 합니다. Z가 없는 문자열은 현지 시간으로 해석될 수 있습니다.

const d = new Date("2024-01-15T10:00:00Z")
console.log(d.getUTCHours())

같은 순간, 다른 읽기 방식

현지 시간 getter와 UTC getter는 서로 다른 시간대에서 같은 순간을 나타내므로, 오프셋만큼 시간 값이 다를 수 있습니다.

const d = new Date(Date.UTC(2024, 0, 1, 12, 0, 0))
console.log(d.getUTCHours())

UTC로 저장하기

일반적인 모범 사례는 모든 날짜를 UTC로 저장하고 표시할 때만 현지 시간으로 변환하는 것입니다. 이렇게 하면 지역에 따른 모호함을 피할 수 있습니다.

const d = new Date(Date.UTC(2024, 0, 1, 0, 0, 0))
console.log(d.toISOString())

시간대 지정하기

서식 지정 메서드는 timeZone 옵션을 받아 UTC와 같이 선택한 시간대에서 특정 순간을 명시적으로 표시할 수 있게 합니다.

const d = new Date(Date.UTC(2024, 0, 1, 0, 0, 0))
const text = d.toLocaleString("en-US", { timeZone: "UTC" })
console.log(typeof text)

문제 피하기

같은 날짜에 현지 시간 메서드와 UTC 메서드를 섞어 사용하면 발견하기 어려운 버그가 발생합니다. 계산마다 하나의 방식을 선택하고 일관되게 적용하십시오.

const d = new Date(Date.UTC(2024, 0, 1, 0, 0, 0))
console.log(d.getUTCFullYear())
console.log(d.getUTCMonth())

빠른 확인

시간대에 대한 지식을 테스트해 보십시오.

인터랙티브 레슨에서 답해보세요

복습

복습: 날짜를 현지 시간이나 UTC 중 하나의 방식으로 일관되게 읽고 쓰십시오.

UTC getter와 setter는 전 세계 시간대에서 작동합니다
getTimezoneOffset은 부호가 반대로 적용된 분을 반환합니다
Z 접미사는 ISO 문자열이 UTC임을 나타냅니다
UTC로 저장하고 현지 시간으로 표시하십시오

const d = new Date(Date.UTC(2024, 0, 1, 12, 0, 0))
console.log(d.getUTCHours())

무료로 시작

AI 튜터와 함께 JavaScript을(를) 배우세요 — 무료

브라우저에서 실제 코드를 작성하고 실행하며, 24/7 AI 튜터로부터 즉각적인 도움을 받고, 웹이나 앱에서 중단한 부분부터 계속 학습하세요.

코스: 59
레슨: 200

무료로 학습 시작 전체 코스 보기

자주 묻는 질문

“시간대와 UTC” 강의는 무료인가요?

네 — “시간대와 UTC” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 JavaScript Academy 강의 전체를 잠금 해제할 수 있습니다. JavaScript Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“시간대와 UTC”에서 뭘 배우나요?

UTC와 현지 시간을 올바르게 처리합니다. 브라우저에서 직접 실행하는 실습 코드로 JavaScript Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

JavaScript Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 JavaScript Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 4번째 강의입니다.

“시간대와 UTC” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 JavaScript Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 JavaScript Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

← JavaScript Academy(으)로 돌아가기