JavaScript의 기초: 날짜와 시간을 다루는 방법

Pranay Kapgate2021-12-16 · 7 min read

소개

날짜와 시간은 일상생활의 중요한 구성 요소일 뿐만 아니라 컴퓨터 프로그래밍의 일부이기도 합니다. 예약을 하거나 달력을 표시하는 등 날짜와 시간이 필요한 이유는 많습니다. 날짜 및 시간 기능의 활용 분야는 광범위하고 매우 다양합니다. 이러한 다양성은 사용자에 따라 시간과 날짜를 구성할 수 있다는 점에서 비롯됩니다. 서로 다른 지리적 위치에 있는 모든 사용자는 자신의 시간대를 기준으로 서로 다른 결과를 얻게 됩니다. 이러한 기능은 예약 인터페이스와 레스토랑과 같은 예약 시스템이 있는 웹사이트에 사용됩니다.

프로그래머들은 웹사이트에 날짜와 시간 기능을 추가하기 위해 종종 JavaScript를 사용합니다. 그 이유는 JavaScript에 이미 내장 기능이 있기 때문입니다이러한 측면을 위한 것입니다. 이 튜토리얼에서 우리는 우리는 Date 객체를 더 자세히 살펴볼 것입니다. 웹사이트에서 날짜와 시간에 대한 이상적인 설정을 구성하는 데 사용할 수 있는 메서드에 대해 이야기하겠습니다. 또한 형식을 변경하는 방법 등도 다룰 것입니다.

Date 객체란 무엇인가요?

방금 언급했듯이, JavaScript에는 날짜와 시간을 위한 내장 기능이 있습니다. 이것은 Date 객체라고 불립니다. 이 객체를 사용하면 날짜 및 시간과 관련된 데이터를 변경하고 관리할 수 있습니다. Date의 인스턴스를 생성하면 새 객체가 생성됩니다. 이 객체는 그 순간의 컴퓨터 날짜 및 시간 설정에 해당합니다.

이 객체의 작동 방식을 더 잘 이해하기 위해 예를 들어 보겠습니다. 먼저 변수를 만들겠습니다. 그런 다음 여기에 지정된 날짜를 할당합니다. 런던(GMT) 시간대로 요일은 수요일이고 날짜는 10월 18일이라고 가정해 보겠습니다. 이 구성을 살펴보세요:

// 현재 날짜와 시간으로 변수 설정
const now = new Date();
// 출력 보기
Now;

// 현재 날짜와 시간으로 변수 설정

const now = new Date();

// 출력 보기

Now;

출력

Wed Oct 18 2017 12:41:34 GMT+0000 (UTC)

출력

Wed Oct 18 2017 12:41:34 GMT+0000 (UTC)

출력에 날짜 문자열이 표시되고 있습니다. 이는 다음과 같은 데이터로 구성됩니다:

요일	월	일	연도	시	분	초	시간대
Wed	Oct	18	2017	12	41	34	GMT+0000 (UTC)

JavaScript는 타임스탬프를 통해 데이터를 받습니다. 이 타임스탬프는 Unix 시간에서 가져옵니다. 이는 1970년 1월 1일 자정 이후 경과된 밀리초 수를 나타내는 값입니다. 사용자에게는 날짜가 이해하기 쉬운 형식으로 표시됩니다. 이 타임스탬프를 가져오려면 다음과 같이 getTime() 메서드를 사용해야 합니다:

// 현재 타임스탬프 가져오기

now.getTime();

// 현재 타임스탬프 가져오기

now.getTime();

출력

1508330494000

출력

1508330494000

이 값이 혼란스러워 보일 수 있지만, 날짜 문자열과 동일한 것을 나타냅니다. 단순히 2017년 10월 18일을 의미합니다.

Epoch 시간(Epoch Time)이란 무엇인가요?

다음으로 배울 개념은 에포크 시간(epoch time)입니다. 제로 시간(zero time)이라고도 합니다. 이를 데이터 문자열 01 January, 1970 00:00:00 Universal Time (UTC) 및 0 타임스탬프로 더 잘 이해할 수 있습니다. 이를 테스트하려면 새 변수를 만드세요. 그런 다음 이를 새로운 Date 인스턴스에 할당하되, 0 타임스탬프를 사용합니다:

// 타임스탬프 0을 새 변수에 할당

const epochTime = new Date(0);

epochTime;

// 타임스탬프 0을 새 변수에 할당

const epochTime = new Date(0);

epochTime;

출력

01 January, 1970 00:00:00 Universal Time (UTC)

출력

01 January, 1970 00:00:00 Universal Time (UTC)

에포크 시간은 프로그래머들의 표준이었습니다. 이는 JavaScript가 시간을 측정하는 방법이기도 합니다.

JavaScript에서 날짜 생성 형식

이제 문자열과 타임스탬프로 새로운 Date 인스턴스를 만드는 방법을 알았으므로 다양한 형식에 대해 이야기할 수 있습니다. 다음과 같이 네 가지 형식이 자세히 설명되어 있습니다:

Javascript Date and Time Formats for date creation

즉, 필요에 따라 특정 날짜와 시간을 언급할 수 있습니다. 앞서 논의한 것처럼 단순히 데이터 문자열이나 타임스탬프를 사용할 수도 있습니다. 이해를 돕기 위해 세 가지 다른 방법으로 새로운 Date 객체를 만드는 방법을 살펴보겠습니다. 날짜와 시간이 GMT 기준 1776년 7월 4일 오후 12시 30분이라고 가정해 보겠습니다:

// 타임스탬프 메서드
new Date(-6106015800000);

// 날짜 문자열 메서드
new Date("July 4 1776 12:30");

// 날짜 및 시간 메서드
new Date(1776, 6, 4, 12, 30, 0, 0);

// 타임스탬프 메서드

new Date(-6106015800000);

// 날짜 문자열 메서드

new Date("July 4 1776 12:30");

// 날짜 및 시간 메서드

new Date(1776, 6, 4, 12, 30, 0, 0);

보시다시피 세 가지 메서드 모두 출력으로 동일한 날짜를 제공합니다. 한 가지 차이점은 에포크(Epoch) 시간 이전의 시간을 사용하는 경우 타임스탬프가 음수로 표시된다는 것입니다. 또한 날짜 및 시간 메서드에서는 초와 밀리초가 기본적으로 0으로 설정됩니다. 숫자를 입력하는 것을 잊어버린 경우에도 기본값으로 0이 설정됩니다.

또 다른 혼란스러운 점은 7월이 7 대신 6으로 표현된다는 것입니다. 이는 번호 매기기가 0부터 시작하기 때문입니다. 인스턴스를 생성할 때 이러한 점을 염두에 두세요.

날짜를 조회하기 위해 get 명령 사용하기

이제 날짜가 설정되었으므로 구성 요소에 액세스하는 방법을 살펴보겠습니다. 한 가지 방법은 get 명령을 사용하는 것입니다. 이 표는 get 메서드들을 Date 객체 기준으로 보여줍니다:

Javascript Date and Time Retrieve date using get

이 예제에서는 새 변수에 새 날짜인 1980년 7월 31일을 할당합니다:

// 새로운 생일 인스턴스 초기화
const birthday = new Date(1980, 6, 31);

1 2	// 새로운 생일 인스턴스 초기화 const birthday = new Date(1980, 6, 31);

이 메서드를 사용하여 모든 개별 날짜 구성 요소를 가져오면 다음과 같이 보일 것입니다:

birthday.getFullYear(); // 1980
birthday.getMonth(); // 6
birthday.getDate(); // 31
birthday.getDay(); // 4
birthday.getHours(); // 0
birthday.getMinutes(); // 0
birthday.getSeconds(); // 0
birthday.getMilliseconds(); // 0
birthday.getTime(); // 333849600000 (GMT 기준)

birthday.getFullYear(); // 1980

birthday.getMonth(); // 6

birthday.getDate(); // 31

birthday.getDay(); // 4

birthday.getHours(); // 0

birthday.getMinutes(); // 0

birthday.getSeconds(); // 0

birthday.getMilliseconds(); // 0

birthday.getTime(); // 333849600000 (GMT 기준)

어떤 상황에서는 날짜의 특정 부분만 필요할 수 있습니다. 이 메서드들을 사용하여 그렇게 할 수 있습니다. 다음은 10월 3일인지 확인하기 위해 테스트하는 방법입니다:

// 오늘의 날짜 가져오기
const today = new Date();
// 오늘과 10월 3일 비교
if (today.getDate() === 3 && today.getMonth() === 9) {
console.log("오늘은 10월 3일입니다.");
} else {
console.log("오늘은 10월 3일이 아닙니다.");
}

// 오늘의 날짜 가져오기

const today = new Date();

// 오늘과 10월 3일 비교

if (today.getDate() === 3 && today.getMonth() === 9) {

console.log("오늘은 10월 3일입니다.");

} else {

console.log("오늘은 10월 3일이 아닙니다.");

}

출력

오늘은 10월 3일이 아닙니다.

출력

오늘은's 10월 3일이 아닙니다.

날짜가 10월 3일이 아닐 때 테스트하면 이와 같은 출력을 얻게 됩니다.

날짜를 수정하기 위해 set 명령 사용하기

와 유사하게get 명령과 유사하게, 이에 대응하는 set 명령이 있습니다. 이 명령을 사용하면 날짜 구성 요소를 수정할 수 있습니다. 이 표는 모든 메서드를 보여줍니다:

Javascript Date and Time Modify the date using set

변수 birthday의 값을 1997에서 다음으로 변경하고 싶다고 가정해 보겠습니다: 1980:

// 생일 날짜의 연도 변경
birthday.setFullYear(1997);
birthday;

// 생일 날짜의 연도 변경

birthday.setFullYear(1997);

birthday;

출력

Thu Jul 31 1997 00:00:00 GMT+0000 (UTC)

출력

Thu Jul 31 1997 00:00:00 GMT+0000 (UTC)

이제 출력에 새 연도가 표시됩니다. 이와 유사하게 날짜의 다른 구성 요소도 수정할 수 있습니다.

JavaScript의 UTC 날짜 메서드

메서드를 사용하여 날짜 구성 요소를 추출하면get 메서드를 사용하면 사용자의 시간대 로컬 시스템 설정을 기준으로 구성 요소를 받게 됩니다. 또는 UTC 표준을 기준으로 시간을 계산하도록 구성할 수도 있습니다. UTC는 협정 세계시(Coordinated Universal Time)를 의미합니다. 이는 getUTC 메서드를 사용하여 수행할 수 있습니다. 이 표는 JavaScript의 Date 객체에 대한 모든 UTC 메서드를 보여줍니다:

UTC methods

보시다시피 모든 메서드는 get 명령과 유사합니다. 하지만 출력은 다를 것입니다. 다음 코드로 그 차이를 테스트할 수 있습니다:

// 현재 시간을 변수에 할당
const now = new Date();

// 로컬 및 UTC 시간대 출력
console.log(now.getHours());
console.log(now.getUTCHours());

// 현재 시간을 변수에 할당

const now = new Date();

// 로컬 및 UTC 시간대 출력

console.log(now.getHours());

console.log(now.getUTCHours());

이 코드는 현재 시간과 UTC 시간대의 시간을 보여줍니다. 이미 UTC 시간대에 있는 경우 숫자는 동일합니다. UTC를 사용하는 이유는 국제 시간대 및 지역 간의 일관성을 유지할 수 있기 때문입니다.

결론

이번 튜토리얼에서는 Date 객체의 다양한 메서드를 살펴보았습니다. 여기에는 get을 사용하여 날짜 구성 요소를 가져오는 방법과 set을 사용하여 수정하는 방법이 포함되었습니다. 또한 UTC 시간대와 JavaScript에서 이를 사용하는 방법도 알아보았습니다.

궁극적으로 JavaScript에는 날짜와 시간을 위한 수많은 내장 기능이 있습니다. 덕분에 복잡한 웹사이트도 아주 간단하게 프로그래밍할 수 있습니다. JavaScript 날짜 및 시간 기능에 대한 자세한 내용은 Mozilla Developer Network에서 확인할 수 있습니다. 하지만 이 튜토리얼을 통해 기본 사항에 대한 기초를 다질 수 있었을 것입니다.

저희 블로그에서 제공하는 JavaScript 프로그래밍을 더 쉽게 만들어 줄 더 많은 리소스를 소개합니다:

즐거운 컴퓨팅 되세요!

Pranay Kapgate

작성자 · CloudSigma

Preslav Dobrev는 CloudSigma의 크리에이티브 디자이너로서, 전통적이고 혁신적인 마케팅 채널을 활용하여 일관된 비즈니스 정체성을 구축하는 데 중점을 두고 있습니다. 그는 영향력 있는 브랜드 내러티브를 창출하기 위해 예술적 비전과 전략적 마케팅을 결합하는 데 능숙합니다.