자바스크립트에서 현재 시간을 가져와서 매초마다 변경되는 

실시간 시계를 만들어 보겠습니다. 

아주 간단합니다 Date Object를 가져와서 시간 분 초를 뽑고 

값을 넣어주면 간단하게 완성입니다. 

일단 간단하게 크롬 개발자도구를 이용해서 보여드리겠습니다.  

var date = new Date();

데이트 객체를 받아와서 출력해보면 시간정보가 정확하게 나옵니다. 

date.getMonth();

현재 1월달입니다 getMonth()는 0~11월까지를 표시해줍니다. 

즉 +1을 해주면 현재 몇월인지 알수있습니다. 

date.getDate();

현재 24일로 getDate()는 현재 몇일인지 나옵니다.

Month는 0월부터 시작하는데 Date는 1일부터 시작하네요 

date.getDay();

현재 무슨요일인지를 출력해줍니다. 

4가 출력되고 오늘이 목요일인걸 봐선 

0은 일요일 6은 토요일 입니다. 

date.getHours();

getHours는 현재 시간을 보여줍니다.

14인걸로 봐서는 24시간제로 2시를 뜻합니다. 

date.getMinutes();

getMinutes는 현재 분을 보여줍니다. 

date.getSeconds();

getSeconds는 현재 초를 보여줍니다.

그럼 이것들을 종합해서 현재시간을 보여주는 시계를 만들어 보겠습니다.

00:00

<h1 id="clock" style="color:gray;">00:00</h1>

<script>

var clockTarget = document.getElementById("clock");

function clock() {
    var date = new Date();
    // date Object를 받아오고 
    var month = date.getMonth();
    // 달을 받아옵니다 
    var clockDate = date.getDate();
    // 몇일인지 받아옵니다 
    var day = date.getDay();
    // 요일을 받아옵니다. 
    var week = ['일', '월', '화', '수', '목', '금', '토'];
    // 요일은 숫자형태로 리턴되기때문에 미리 배열을 만듭니다. 
    var hours = date.getHours();
    // 시간을 받아오고 
    var minutes = date.getMinutes();
    // 분도 받아옵니다.
    var seconds = date.getSeconds();
    // 초까지 받아온후 
    clockTarget .innerText = `${month+1}월 ${clockDate}일 ${week[day]}요일` +
    `${hours < 10 ? `0${hours}` : hours}:${minutes < 10 ? `0${minutes }`  : minutes }:${seconds < 10 ? `0${seconds }`  : seconds }`;
    // 월은 0부터 1월이기때문에 +1일을 해주고 
    // 시간 분 초는 한자리수이면 시계가 어색해보일까봐 10보다 작으면 앞에0을 붙혀주는 작업을 3항연산으로 했습니다. 
}

function init() {
clock();
// 최초에 함수를 한번 실행시켜주고 
setInterval(clock, 1000);
// setInterval이라는 함수로 매초마다 실행을 해줍니다.
// setInterval은 첫번째 파라메터는 함수이고 두번째는 시간인데 밀리초단위로 받습니다. 1000 = 1초 
}

init();

</script>

애초에 자바스크립트는 html css를 조작목적 보다는 

이벤트를 받으려고 만들어졌다. 

실제로 많은 사람들이 

이벤트를 받으려면 JQuery를 사용해야하고 

이벤트리스너 자체를 JQuery와 함께 배우다 보니 

순수 자바스크립트로는 기능구현을 못한다는 생각들을 많이한다. 

하지만 바닐라스크립트 즉 아무런 라이브러리를 사용하지 

않고도 이벤트리스너를 만들수 있다.

이벤트 종류는 

(click, resize, submit, inputchange, load)등이 있다

자바스크립트에선 이런것들을 JQuery를 사용하지 않아도 

이벤트리스너를 만들수 있다. 

ex) 버튼1 JQuery를 사용한 이벤트 리스너

<script src="//code.jquery.com/jquery.min.js"></script>  
<input type="button" id="button1" value="버튼1">

<script>
$("#button1").click(function() {
alert("버튼1을 누르셨습니다.");
});
</script>

ex) 버튼2 순수 자바스크립트를 이용한 이벤트 리스너(addEventListener)

<input type="button" id="button2" value="버튼2">

<script>
function clickEvent() {
alert("버튼2을 누르셨습니다.");
}

const button = document.getElementById("button2");
button.addEventListener("click", clickEvent);
</script>

코드가 실제로 JQuery를 사용하는것보다 조금더 길어지긴 했으나 

실제 성능차이는 많이 난다고 한다. 

물론 이런 작은규모 수준에서는 아니지만 

추후 각종 이벤트들로 스크립트파일 하나가 몇천줄이되는 순간 

많은 성능차이가 발생하게 될것이다. 

추가로 document.get~를하면 JQuery와 같이 다양한 방법으로 타겟을

잡을수 있다. 

centOS에서 사양이나 정보를 확인하는법을 알아보겠습니다. 

보통의 centOS에서는 통용되는 명령어들입니다. 

예외상황이 있으나 거의 적용 될듯합니다. 

현재 시스템 bit 확인 하기 

$ cat /etc/issue.net

CPU  정보 확인 하기 

$ cat /proc/cpuinfo

메모리 확인 하기 

$ cat /proc/meminfo

or 

$ free -m 

디스크 확인 하기 

$ df

아이피 확인 하기 

$ ifconfig

커널버전 확인 하기 

$ uname -a

호스트명 확인 하기 

$ hostname

모든 정보 확인 하기 

$ dmesg

( 정보량이 너무많아서 dmesg > info.txt 로 저장해서 읽는게 좋습니다. )

앞으로 바닐라JS를 배워보기 앞서 간편하게 웹상에서 웹개발을 할수있는 사이트를 소개 한다. 

사이트 이름은 repl 이라는 사이트다. 

    <이미지 클릭시 해당 사이트로 이동됩니다.>

간단 하게 구글, 깃허브, 페이스북을 통해 로그인 할수 있으며 별도로 회원가입도 가능하다. 

가입후 간단하게 프로젝트를 생성하면 

웹상에서 HTML, CSS, JS 등 여러가지를 코딩할수있으며 

장점으로는 바로바로 직접 결과값을 확인하거나 console창을 확인할수있다. 

또한 버전관리까지 해주는 혜자 사이트다 그리고 각종 여러가지 혜택을 더얻으려면 

한달에 7불정도를 지불해야한다. 

사실 지불하지 않고도 이미 충분한 기능을 제공하기에 일단 각종 텍스트에디터를 설치하기 이전인 

입문자들을 위해 간단히 겪어보기 좋다. 

"VanillaJs"란 ? 

 자바스크립트의 수 많은 프레임웍, 라이브러리를 사용하지 않고 순수하게 javascript만 사용하는것을 일컫는다.

요즘 수많은 개발자들이 javascript의 무거운 라이브러리등을 버리고 작고 가볍고 빠른 VanillaJs를 선택하고 있다. 

바닐라JS 는 공식사이트를 통해 다운 받을수 있다. 

실제로 사이트를 통해 VanillaJs를 다운 받으면 파일 사이즈가 0kb이다. 

바닐라JS는 실제로 사용하기 위해선 별도의 파일이 필요 없다는 의미이다. 

그 이유는 이미 우리가 사용하는 크롬, 사파리, 익스플로 등 브라우저에는 이미 바닐라JS가 자체적으로 내장이 되어 있기 때문이다.

바닐라JS 공식 사이트에서는 바닐라JS가 마치 프레임워크, 라이브러리처럼 가벼운것은 물론이고 빠르고 호환성이 좋다라는 문구들이 써있는데

이말이 바닐라JS가 프레임워크나 라이브러리로 오해 할 수 있지만 JQuery같은 라이브러리가 전혀 포함되있지 않아서 

훨씬더 빠르다는 말로 받아들이면 될 것 같다. 

국내에서는 아직도 많은 개발자들이 JQuery 없이는 개발하기 힘들어 하는 경향이 있는데 

앞으로 다음 포스팅부터는 과연 JQuery없이 어떻게 개발하며 JQuery없이도 각종 기능들을 구현할수 있게끔 하는데 노력해볼것이다.