목차​

1. JavaScript 개발자 콘솔을 사용하는 방법
2. HTML에 JavaScript를 추가하는 방법
3. JavaScript에서 구문 및 코드 구조 이해
4. JavaScript로 주석을 작성하는 방법
5. JavaScript에서 데이터 유형 이해
6. JavaScript에서 문자열로 작업하는 방법
7. JavaScript에서 문자열을 인덱싱, 분할 및 조작하는 방법
8. JavaScript에서 데이터 유형을 변환하는 방법
9. JavaScript에서 변수, 범위 및 게양 이해
10. 연산자를 사용하여 JavaScript에서 수학을 수행하는 방법
11. JavaScript에서 배열 이해
12. JavaScript에서 배열 메서드를 사용하는 방법 : Mutator 메서드
13. JavaScript에서 배열 메서드를 사용하는 방법 : Accessor 메서드
14. JavaScript에서 배열 메서드를 사용하는 방법 : Iteration 메서드
15. JavaScript에서 객체 이해
16. JavaScript에서 날짜 및 시간 이해
17. JavaScript에서 이벤트 이해
18. JavaScript에서 JSON으로 작업하는 방법
19. JavaScript로 조건문을 작성하는 방법
20. JavaScript에서 Switch 문을 사용하는 방법
21. JavaScript에서 While 및 Do ... While 루프 사용
22. JavaScript에서 For 루프를 생성하는 방법
23. JavaScript에서 함수를 정의하는 방법
24. JavaScript의 프로토 타입 및 상속 이해
25. JavaScript에서 클래스 이해
26. JavaScript에서 객체 메소드를 사용하는 방법
27. JavaScript에서 This, Bind, Call 및 Apply 이해

JavaScript에서 날짜 및 시간 이해 

소개 

날짜와 시간은 일상 생활의 일반적인 부분이므로 컴퓨터 프로그래밍에서 두드러지게 나타납니다. JavaScript에서는 일정, 기차 일정 또는 약속을 설정하기 위한 인터페이스가 있는 웹 사이트를 만들어야 할 수 있습니다. 이러한 응용 프로그램은 사용자의 현재 시간대를 기준으로 관련 시간을 표시하거나 도착 및 출발 또는 시작 및 종료 시간을 계산해야 합니다. 또한 매일 특정 시간에 보고서를 생성하거나 현재 열려 있는 식당 및 시설을 필터링 하려면 JavaScript를 사용해야 합니다.

이러한 모든 목표와 그 이상을 달성하기 위해 JavaScript에는 내장 된 Date 객체 및 관련 메소드가 제공됩니다. 이 자습서는 JavaScript에서 날짜 및 시간을 형식화 하고 사용하는 방법을 설명합니다.

https://www.digitalocean.com/community/tutorials/understanding-date-and-time-in-javascript 

날짜 객체 

Date 객체는 날짜와 시간을 저장하는 JavaScript의 내장 객체입니다. 해당 데이터를 형식화 하고 관리하기 위한 여러 가지 내장 방법을 제공합니다.

기본적으로 인수가 없는 새 Date 인스턴스는 현재 날짜 및 시간에 해당하는 객체를 만듭니다. 현재 컴퓨터의 시스템 설정에 따라 생성됩니다.

JavaScript의 날짜를 보여주기 위해 변수를 만들고 현재 날짜를 지정해 봅시다. 이 기사는 10 월 18 일 수요일 런던 (GMT)에서 작성되므로 아래에 표시된 현재 날짜, 시간 및 시간대입니다.

// Set variable to current date and time
const now = new Date();

// View the output
now;

출력을 보면 다음을 포함하는 날짜 문자열이 있습니다.

날짜와 시간은 우리가 인간으로서 이해할 수 있는 방식으로 분리되어 인쇄됩니다.

그러나 JavaScript는 1970 년 1 월 1 일 자정 이후 경과 한 밀리 초 수로 구성되는 Unix 시간에서 파생 된 타임 스탬프를 기준으로 날짜를 이해합니다. getTime() 메서드를 사용하여 타임 스탬프를 얻을 수 있습니다.

// Get the current timestamp
now.getTime();

현재 타임 스탬프에 대한 출력에 나타나는 큰 숫자는 2017 년 10 월 18 일의 위와 동일한 값을 나타냅니다.

0 시간이라고도 하는 에포크 시간은 1970 년 1 월 1 일 00:00:00 표준시 (UTC)와 0 타임 스탬프로 날짜 문자열로 표시됩니다. 타임 스탬프 0을 기반으로 새 변수를 만들고 새 Date 인스턴스에 할당하여 브라우저에서 이를 테스트 할 수 있습니다.

// Assign the timestamp 0 to a new variable
const epochTime = new Date(0);

epochTime;

Epoch 시간은 컴퓨터 프로그래밍의 초기 기준으로 시간을 측정하기 위한 표준으로 선택되었으며 JavaScript가 사용하는 방법입니다. 응용 프로그램의 설정 및 목적에 따라 사용될 수 있으므로 타임 스탬프 및 날짜 문자열 모두의 개념을 이해하는 것이 중요합니다.

지금까지는 현재 시간을 기준으로 새 Date 인스턴스를 만드는 방법과 타임 스탬프를 기반으로 인스턴스를 만드는 방법을 배웠습니다. JavaScript로 새 날짜를 만들 수 있는 형식에는 총 4 가지가 있습니다. 현재 시간 기본값 및 타임 스탬프 외에도 날짜 문자열을 사용하거나 특정 날짜 및 시간을 지정할 수 있습니다.

특정 날짜를 나타내는 여러 가지 방법을 시연하기 위해 1776 년 7 월 4 일 오후 12시 30 분 (GMT)에 세 가지 방법으로 표시 할 새로운 Date 객체를 만듭니다.

// Timestamp method
new Date(-6106015800000);

// Date string method
new Date("January 31 1980 12:30");

// Date and time method
new Date(1776, 6, 4, 12, 30, 0, 0);

위의 세 가지 예는 모두 동일한 정보를 포함하는 날짜를 만듭니다.

타임 스탬프 방법에 음수가 있음을 알 수 있습니다. Epoch 시간 이전의 모든 날짜는 음수로 표시됩니다.

날짜 및 시간 방법에서 초와 밀리 초는 0으로 설정됩니다. 날짜 작성에서 숫자가 누락되면 기본값은 0으로 설정됩니다. 그러나 순서를 변경할 수 없으므로 떠나기로 결정한 경우 명심하십시오. 숫자에서. 7 월이 보통 7이 아니라 6으로 표시되는 것을 알 수 있습니다. 이는 프로그래밍에서 대부분의 계산에서와 같이 날짜와 시간 번호가 0부터 시작하기 때문입니다. 자세한 차트는 다음 섹션을 참조하십시오.

get으로 날짜 검색 

날짜가 있으면 다양한 내장 방법으로 날짜의 모든 구성 요소에 액세스 할 수 있습니다. 이 메소드는 현지 시간대를 기준으로 날짜의 각 부분을 반환합니다. 이러한 각 메소드는 get으로 시작하고 상대 숫자를 리턴합니다. 아래는 Date 객체의 get 메서드에 대한 자세한 표입니다.

1980 년 7 월 31 일을 기준으로 새로운 날짜를 만들어 변수에 할당하겠습니다.

// Initialize a new birthday instance
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 (for GMT)

때때로 날짜의 일부만 추출해야 할 수도 있으며 내장 된 get 메소드가 이를 달성하는 데 사용하는 도구입니다.

예를 들어, 10 월 3 일의 날짜와 월에 대해 현재 날짜를 테스트하여 10 월 3 일인지 아닌지 확인할 수 있습니다.

// Get today's date
const today = new Date();

// Compare today with October 3rd
if (today.getDate() === 3 && today.getMonth() === 9) {
  console.log("It's October 3rd.");
} else {
  console.log("It's not October 3rd.");
}

글을 쓰는 시점은 10 월 3 일이 아니기 때문에 콘솔에 반영되어 있습니다.

get으로 시작하는 내장 Date 메소드를 사용하면 인스턴스화 된 오브젝트에서 검색하는 것과 연관된 숫자를 리턴 하는 날짜 구성 요소에 액세스 할 수 있습니다.

세트로 날짜 수정 

위에서 배운 모든 get 메소드에는 해당 set 메소드가 있습니다. get이 날짜에서 특정 구성 요소를 검색하는 데 사용되는 경우 set은 날짜의 구성 요소를 수정하는 데 사용됩니다. 아래는 Date 객체의 설정 방법에 대한 자세한 차트입니다.

이러한 set 메소드를 사용하여 날짜의 하나 이상의 구성 요소를 수정할 수 있습니다. 예를 들어, 생일 변수의 연도를 1980 년 대신 1997 년으로 변경할 수 있습니다.

// Change year of birthday date
birthday.setFullYear(1997);

birthday;

위의 예에서 생일 변수를 호출하면 출력의 일부로 새해를 받는다는 것을 알 수 있습니다.

set으로 시작하는 내장 메소드를 사용하면 Date 객체의 다른 부분을 수정할 수 있습니다.

UTC를 사용한 날짜 메소드 

위에서 설명한 get 메소드는 사용자의 현지 시간대 설정에 따라 날짜 구성 요소를 검색합니다. 그들은 UTC (협정 세계시) 표준을 기반으로 시간을 계산 제외하고 날짜와 시간 이상 증가 제어의 경우, 정확하게 get 메소드와 동일하다 getUTC 방법을 사용할 수 있습니다. 아래는 JavaScript Date 객체에 대한 UTC 메서드 표입니다.

로컬 및 UTC get 메소드의 차이점을 테스트하기 위해 다음 코드를 실행할 수 있습니다.

// Assign current time to a variable
const now = new Date();

// Print local and UTC timezones
console.log(now.getHours());
console.log(now.getUTCHours());

이 코드를 실행하면 현재 시간과 UTC 시간대의 시간이 인쇄됩니다. 현재 UTC 시간대에 있는 경우 위 프로그램을 실행하여 출력 된 숫자는 동일합니다.

UTC는 국제 시간 표준 참조를 제공한다는 점에서 유용하므로 개발 중인 표준에 해당되는 경우 시간대 간에 코드 일관성을 유지할 수 있습니다.

결론 

이 학습서에서는 Date 오브젝트의 인스턴스를 작성하고 내장 메소드를 사용하여 특정 날짜의 구성 요소에 액세스하고 수정하는 방법을 학습했습니다. JavaScript에서 날짜 및 시간을 보다 심도 있게 보려면 Mozilla 개발자 네트워크에서 날짜 참조를 읽으십시오.

JavaScript를 사용하는 많은 일반적인 작업에는 날짜 작업 방법을 아는 것이 중요합니다. 반복 보고서 설정부터 날짜 및 일정을 올바른 시간대로 표시하는 등 많은 작업을 수행 할 수 있습니다.