본문 바로가기
JavaScript/Clone Website

[JavaScript] #1.4 Vanilla JS (#코딩공부)

by 함께 공부해요 2020. 3. 7.

https://youtu.be/1fc0MHYb_DE


<복습>

https://wook-2124.tistory.com/58

 

[JavaScript] #1.2 Super Powers of JS / #1.3 ES5, ES6 ESWTF (#코딩공부)

https://youtu.be/dBH_aMCuztk <복습> https://wook-2124.tistory.com/57 [JavaScript] #1.1 Why JS (#코딩공부) https://youtu.be/FP9QEHzqwRM <준비물> https://repl.it/ Online IDE, Editor, and Compiler - Fa..

wook-2124.tistory.com

 

<자료>

http://vanilla-js.com/

 

Vanilla JS

Vanilla JS Vanilla JS is a fast, lightweight, cross-platform framework for building incredible, powerful JavaScript applications. Introduction The Vanilla JS team maintains every byte of code in the framework and works hard each day to make sure it is smal

vanilla-js.com


1. Vanilla JS(JavaScript)

Vanilla JS

Vanilla JS는 웹사이트를 들어가서 보면 알 수 있듯이, 그냥 순수한 JavaScript를 일컫는 말이다. Vanilla는 비격식으로 평범한, 특별할 것 없는 이라는 뜻을 가진 형용사이다.  

 

Speed Comparison

Dojo, Prototype JS, Ext JS, jQuery, YUI, MooTools 모두 Vanilla JS 코드를 다르게 해석한 것이다. 그러나 Vanilla JS는 120만개가 넘는 Operation(ops)을 1초(sec)에 할 수 있다. 이것만으로 엄청난 차이를 보이는 것이다.

 

document.getElementByID("test-table");

 

이 표현은 html(document)에 있는 id="test-table" element를 가져오라는 말이다. 

 

Code Examples

Vanilla Js를 잘하게 되고 이 언어에 대해 더 많이 알고 이해하면, React나 다른 언어로 넘어갈 때 아무런 문제가 없을 것이다.

 

예제에서는 var을 썻지만, 지금은 const(변하지 않는 변수), let(변하는 변수)를 쓴다.

 

Introduction & Download

Who's using Vanilla JS? Glad you asked! Here are a few: 라고 말하는데 그 예제들이 대단하다.

 

Facebook, Google, YouTube, Yahoo, Wikipedia, ..., Amazon, ..., Microsoft, Tumbir, Apple, ..., Netflix, ...

 

IT 대기업들 중 Vanilla JS를 안쓴 기업은 찾아보기 힘들 정도..!!

 

그리고 웹사이트에 있는 여러가지 파일을 다운로드 받으면, 실제로 exe 파일은 없고 0byte가 뜨면서 "그냥 바로 코딩을 시작해라"라는 주석이 뜬다.

 

이처럼 이 사이트는, JavaScript 코딩에 있어 여러가지 프레임워크/라이브러리가 필요하다는 의견을 비꼬기 위해 만들어진 개그 사이트인 것이다. 그저 코딩하는 것만으로 여러가지 산출물을 만들 수 있으니까!

 

정리하면, Vanilla JS를 배운다는 것은 웹에서의 기초가 되는 언어를 배우는 것과 같다.


※ 신종 코로나 바이러스 조심하세요!!!!

댓글