자바스크립트 튜토리얼 3 | 시간 객체 사용하기 Date 클래스 | 자바스크립트 API 문서 찾아 보기
자바스크립트는 웹브라우저에서 동작하니까 시간 사용하는 방법 부터 알아두면 유용할 것이다.
웹에 쓰는 모든 글에는 대체적으로 시간이 들어있다. 시간 정보가 없는 웹사이트의 글이라는게 좀 이상할 것 같다. 안그러면 이게 오늘 쓴 글인지 1년전에 쓴 글인지 알수가 없다.
Date 클래스의 인스턴스를 생성해보자.
-> 자바스크립트 역시 객체지향 프로그래밍 기능이 탑재되어 있다. 객체지향 프로그래밍을 잘 몰라도 상관없다. 그냥 시간을 다루기 위해서 클래스의 인스턴스라는 것을 만들어서 사용한다. 사용하다 보면 이유는 알게 된다.
자바스크립트는 비주얼 스튜디오 코드를 사용하면 빠르게 코드를 작성할 수 있다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>
자바스크립트 예제
</h1>
<script>
let name = "댕멍이";
document.write("<b><big>" + name + " 님</big></b>, 안녕하세요?(^^)");
let now = new Date();
document.write("<br><h2>현재 시각 " + now.toLocaleDateString() + "</h2>");
document.write("<h2>현재 시각 " + now.toLocaleTimeString() + "</h2>");
document.write("<h2>현재 시각 " + now.toLocaleString() + "</h2>");
document.write("<br><h2> 연도: " + now.getFullYear() + "</h2>");
document.write("<h2> 월(0~11): " + now.getMonth() + "</h2>");
document.write("<h2> 일: " + now.getDate() + "</h2>");
document.write("<h2> 시: " + now.getHours() + "</h2>");
document.write("<h2> 시: " + now.getMinutes() + "</h2>");
document.write("<h2> 시: " + now.getSeconds() + "</h2>");
</script>
</body>
</html>
let now = new Date();
이렇게 생성하면 그 다음 부터는 쉽다.
now + . + 메서드(함수) 를 호출하면 위와 같은 다양한 형식으로 현재 일자와 시간을 추출할 수 있다. toLocaleDateString 이라는 이름에 뜻이 담겨 있다. 원래 시간은 지구가 자전을 하기 때문에 국가 마다 다르다. 정확히는 경도에 따라 시간이 차이가 난다.
그러면 나라마다 시간 차이가 나니까 전세계의 컴퓨터들은 시간이 경도에 따라 다 달라지는 문제가 생긴다. 이렇게 되면 심각한 문제가 발생할 수 있다. (2000년의 밀레니엄 핵전쟁? 같은 공상도 이 시간 문제에서 나왔다) 따라서 어떻게 하느냐?
1970년 1월1일 UTC 국제표준시를 기준으로 현재까지의 밀리초를 기준으로 정한다. 다음은 오늘 기준으로 70년 1월1일부터 현재까지 지나간 시간을 밀리세컨드로 받은 것이다. 이 숫자는 절대로 거꾸로 가지 못한다. 시간과 세월이 흐르는 것을 느끼게 해주는 마성의 시계다.
1970년을 기준으로 정한 것은 국제적인 기준을 갖기 위해서이다. 70년대가 제대로된 컴퓨터가 발명되기 시작할 무렵이다. 그걸 지금까지 사용하고 있는 것이다. 세계 각국의 각종 컴퓨터장치에서 표현을 다르게 하더라도 UTC 시간은 똑같다. 어떤 컴퓨터의 시간 기록도 UTC 시간만 알게되면 전세계의 시간으로 다 변환이 가능하다.
document.write("<h2> UTC Return : " + now.getTime() + "</h2>");
변환 법칙이 복잡하니까 메서드로 다 제공을 하는 것이다. 시간을 로컬타임이라고 하는 것은 UTC를 경도에 맞춰서 계산해서 나오는 것이다.
한국시간을 GMT + 9 이라 하는데, 같은 말이다.
UTC = GMT
컴퓨터에서는 UTC란 용어를 쓰니까 UTC + 9 (hour) 가 한국시간이다.
저 위에 긴 숫자는 밀리세컨(1000분의 1초)이다. 저것을 초로 바꾸고 분으로 바꾸고 ... 년도로 바꿔서 1970년1월1일0시에 더한 다음에 UTC + 9 를 더하면 한국의 Locale 시간이 나온다. 그런데 윤년이 있는 연도는 366일이니까 그것까지 계산을 해야 제대로된 날짜가 나온다.
생각보다 이 날짜 다루는게 쉽지가 않다. 원래 문명마다 날짜 체계가 달랐다고 하고 지금 우리도 음력 달력이란게 있다. 그런 날짜를 표현하려면 별도로 계산하거나 그런 메서드가 있는 클래스를 사용해야 한다.
다행히 자바스크립트의 사용자들은 이 복잡한 시간을 Date 클래스 하나로 해결할 수 있다. 그래서 클래스를 쓰는 것이다. Date 의 사용법과 함수들이 더 있는데 수백가지가 있다. 시간을 다루는데 그것들을 모두 알거나 혹은 암기해서 사용하는 사람은 별로 없다.
요즘은 무작정 외우는 것보다 필요한 레퍼런스를 찾는 능력이 더 중요해지고 있다. 라이브러리 API 는 날이갈수록 늘어나고 있고 무슨 기능이 들어있는지 알 수가 없다.
자바스크립트의 경우 MS처럼 MDN Web docs 에 모든 것이 저장되있다.
MDN 은 모질라 재단이 운영하는 웹사이트 개발자 커뮤니티이다.
MDN docs 사이트에서 자바스크립트의 API 문서를 열람할 수 있다. 한글화를 하고 있긴 한데 워낙 방대한 자료라 다 되어있지는 않다. 문서는 많지만 아무래도 좀 복잡하고 직역이 많아 좀 빳빳한 문서긴 하다.
그러나 레퍼런스 자료의 양과 질에서 가장 높다.
Date
Date 생성자는 시간의 특정 지점을 나타내는 Date 객체를 생성합니다.
developer.mozilla.org
좀더 간소화된 레퍼런스로 빨리 열람하기 좋은 것은 W3SCHOOL 이다. 웹의 표준을 정하는 3W 재단에서 운영하는 사이트인 만큼 표준적인 레퍼런스로 정리되있다.
www.w3schools.com/jsref/jsref_obj_date.asp
JavaScript Date Reference
JavaScript Date Reference Date Object The Date object is used to work with dates and times. Date objects are created with new Date(). There are four ways of instantiating a date: var d = new Date(); var d = new Date(milliseconds); var d = new Date(dateStri
www.w3schools.com
위의 두 문서를 읽고도 이해가 되지 않는다면 커뮤니티나 블로그를 찾는 것이 좋다. 블로그는 천차만별이긴 한데 구글로 검색하면 대체로 설명이 잘되있는 페이지가 상위 페이지에 뜨게 되있다. (아니면 오래되거나...)
영어로 stackoverflow 에서 많은 답을 얻을 수 있겠지만 솔직히 필자도 영어를 좀 하지만 한글자료가 더 편하다. 영문 자료는 전문가들이 잘 정리한 pdf 자료들이 좋지 stackoverflow 에 써놓은 말은 일단 질문부터가 장황한 경우가 많다. 답변이 많다고 꼭 좋지는 않다. 어떤 주제나 질문을 하더라도 스스로 알아서 해야 한다는 개념이 깔려있기 때문이다.
우리가 영어 공부를 강조하긴 하는데 그렇다고 영어 사용자들이 항상 좋은 문장을 쓰는게 아니다. 오히려 미국 영어 사용자, 히스패닉 계열의 영어 사용자, 인도 계열의 영어 사용자 등 혼재되어 있어서 그 스타일이라는게 읽는 속도가 느려질 때도 많다.
그러니까 굳이 모든 레퍼런스를 영어로 찾아봐야 한다고 말하지 않는다. 영어로 된 가치있는 자료는 많다. 특히 미국과 유럽의 컴퓨터 교육자들은 아주 쉽고 간결한 API 문서를 많이 만들었다 (인도와 동남아시아도 괜찮다).
필자는 간혹 구글에 일본어로 검색을 하기도 하는데 또 좋은 문서들을 만나면 신선한 느낌이 든다. 아~ 이렇게도 이해할 수 있구나. 우리가 컴퓨터 언어를 배우지만 언어는 원래 인간이 하는 것이다. 당연히 인간 언어에 따라 컴퓨터를 다루는 방식과 바라보는 관점도 차이가 있다. 컴퓨터 언어 공부도 중요하지만 우리 인간의 언어를 아는 것도 중요하다.
www.programiz.com/javascript 프로그래미즈 (동남아시아나 중동 쪽에서 운영하는 것으로 보인다)
Learn JavaScript Programming
About JavaScript Programming Prototype based Object-oriented - JavaScript is an object-oriented programming language. It used prototypes instead of classes. Objects are used to represent the real-world entity in the program. Interpreted Language - JavaScri
www.programiz.com
* 결론적으로 API 레퍼런스가 필요할 때는 공식 문서부터 찾는다. 이해가 안되면 블로그와 커뮤니티를 뒤진다. 그래도 못찾으면 구글에서 영문 검색을 한다. (이 시점에서는 웬만하면 찾을 것이다)
이런 방법을 알고 있으면 설령 지금은 모르는 기술이라고 하더라도 아이디어만 있다면 충분히 기획해서 개발할 만 하다. 그만큼 현재의 웹 기술이 발달했다. 잘 활용해야겠다.
마지막으로 생활코딩 전설의 이고잉님의 자바스크립트 강의를 추천한다. 무려 2014년의 강의긴 하지만 기본 준비운동 정도는 될 것이다. 강의가 아니라 수면 ASMR 이라는 이야기가 있다. 수면중에 들으면 자바 스크립트의 달인이 될 것 같은 기분이다. 자바 스크립트의 절대 신공을 한번 노려보는 것도 어떨지 ㅋ
