mengkko의 IT 블로그

애초에 자바스크립트는 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와 같이 다양한 방법으로 타겟을

잡을수 있다. 

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

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

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

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

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

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

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

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

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

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

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

"VanillaJs"란 ? 

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

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

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

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

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

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

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

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

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

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

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