#1-4 VanillaJS

 

자, 오늘 우리는 JavaScript가 굉장히 못났다는 걸 실감하게 될 것입니다.😈 왜냐면 이 언어가 오래되었기 때문입니다. 어느 부분에서는요. 그리고 업데이트를 할 수 없는 오래된 것의 경우 임시방편으로 때워야 하는 경우가 있습니다. 

예를 들자면  JavaScript를 쓰는 많은 웹사이트들이 있습니다. 그렇지만 그 중 몇은 엄청 오래된 버전의 JavaScript를 쓸거고 우린 그걸 전부 업데이트 해줄 수 없기 때문에 JavaScript를 모던하게, 180도 다르게 바꿔줄 수 없습니다. 만약 그렇게 할 경우엔 엄청나게 많은 인터넷 사이트들이 망가지게 될 것입니다. (엑박❌이 뜨는거죠!) 그리고 우린 그런 일이 일어나길 원치 않고요.

바닐라 자바스크립트는 브라우저를 통해 여러분에게 제공된 JavaScript라고 보면 됩니다. 온갖 임시방편과 지저분한 것들. 항상 사람들이 바닐라 자바스크립트에 대해 언급하는 것들입니다.
어떤 사람들은 바닐라 자바스크립트를 사용하지 않고 커피 스크립트 같은 것을 배웁니다. 좀 더 매력적인 버전의 JavaScript요. 또 어떤 사람들은 JavaScript를 엄청 현대적으로 바꾸는 법을 배우기도 하고 몇몇은 JavaScript를 묶어내는 걸 사용하기도 합니다.

예를 들어 누군가가 매우 현대적이지만 지지받지 못한 JavaScript를 만들었습니다. 그리고 그 것을 compiler 안에 실행시켰습니다. 일단 명칭 자체는 신경쓰지말고 그냥 코드를 상자안에 넣었다고 상상해보세요. 그리고 그 박스가 컴파일된 JavaScript를 전부 모든 브라우저에 뱉어내는 겁니다. 매력적인 JavaScript를 만들었지만 결국 받게 되는 건 컴파일 된 못생긴 JavaScript입니다. 

 

그리고 이게 이따금씩 문제가 되는데 왜냐면 JavaScript에 재능을 가진 사람을 찾는 게 매우 어려운 일이기 때문입니다. 
많은 사람들은 Library랑 Framework는 알고있을 것입니다. 이전 글에서 얘기했듯이 Library나 Framework는 메이크업, 화장 같은 존재입니다. JavaScript를 원래 모습보다 조금 더 예쁘게 만들어주는 거라 배우기 쉽지만 어려운 바닐라 자바스크립트는 잘 모릅니다.

 

그래서 이걸 처음에 배워두는 게 좋을 것 같다는 게 제 생각입니다. 바닐라 자바스크립트를 쓰는게 능숙해질 때 다음으로 넘어가는 것이죠. 

왜 그러냐고요? 전에도 말했듯이 JavaScript에 진짜 재능이 있는 사람을 찾을 수가 없어요. 리액트나 Jquery를 아는 사람들은 찾기 쉽습니다. Library를 다룰줄 알거나 Framework에 대한 전문가들은 찾기 쉽죠. 하지만 이런 사람들은 Framework에서만 전문가예요. 실제 필드에서는 실력 발휘를 못 하는 겁니다.

포토샵으로 예시를 들겠습니다. 여기서 얘기하는 포토샵은 포토샵을 잘 다룰줄 아는 사람이랑 동등한 겁니다. 소프트웨어를 잘 다루는것이죠. 그렇지만 사진은 잘 못 찍는사람이요. 예를 들자면 그런 것입니다. 기구는 사용할 수 있지만 핵심은 모르는 사람.

다른 예시! 포토샵을 잘 다루는데 색감에 대한 센스가 없는 사람이라고 생각해보세요.
색의 구성에 대해 아무것도 모르고, 멋진 사진이 뭔지 감각이 없는 사람. 색상에 대한 이해도가 낮고, 사진의 퀄리티에 대한 기준이 없는사람. 이게 더 정확한 예시가 될 수 있겠네요.

이게 바로 JavaScript를 제대로 모르고 사용하는 사람에 대한 설명입니다. 그리고 바닐라 자바스크립트에 재능이 있는 사람을 발견하기 어려운 이유이기도 하고요.

여기 바닐라 자바스크립트 웹사이트가 있습니다.

 

http://vanilla-js.com/  

이건 패러디 웹사이트입니다. 바닐라 자바스크립트가 빠른 Framework라고 설명하거든요. 그리고 이게 페이스북, 구글, 유튜브, 야후, 위키피디아 같은 온갖 유명한 곳들에 쓰인다고 되어있습니다. 어떻게보면 사실입니다. 이건 JavaScript 중 하나고 다들 JavaScript를 이용해야 할테니까요.

 

그리고 바닐라 자바스크립트를 이용해보고 싶니? 그럼 너에게 꼭 필요한 이걸 고르도록 해! 라고 되어있습니다. 
그래야 각종 바닐라JS를 원하는대로 꾸밀 수 있으니까요. 그리고 또 원하는걸 고를 수 있습니다. 다 하고 싶다고 가정하고, 몽땅 골라보겠습니다. 

 

파일 사이즈는 0바이트입니다. 이렇게 해주면 돼요. 이 웹사이트가 웃긴게 많은 사람들이 여기에 자신의 Library를 만들고 다른 사람들이 자신의 것을 다운 받아주길 원합니다.

 

예시를 하나 보여주겠습니다. 아직 무서워 하지는 마세요. HTML이 뭔지는 알고 계실 겁니다. ID가 뭔 줄도 알고 말이죠.

예를 들어 내가 JavaScript에서 ID를 갖고 싶고 HTML 파일로 들어가고 싶으면 아이디 하나를 잡고 JavaScript에서 사진 속 Vanilla Js Code를 이용해야 합니다. 하지만 Dojo같은 걸 이용한다면 사진 속 Dojo 코드를 써야겠죠. PrototypeJS를 쓰면 PrototypeJS Code를, Jquery를 쓰면 Jquery를 말입니다.

그리고 이 전부가 맨 위에 적힌 document.getElementById('test-table');를 다른 프로그램에서 실행하기 위한 코드입니다.이게 이 카테고리에서 여러분에게 Dojo나 Jquery같은 걸 가르치지 않는 이유입니다. 여러분에게 Make-up(대체할 수 있는 것)이 아닌 실질적인 것을 알려주고 싶거든요.

저 모든 코드가 맨 위의 코드를 다르게 해석한 것일 뿐입니다. 

 

여기 보이는 것처럼 일반 JavaScript가 다른 것들에 비해 엄청 빠릅니다. 120만개가 넘는 Operation을 1초에 할 수 있죠.
완전 멋있죠? 좋아요.

여기까지가 Vanilla JS는 어떤건지 왜 이걸 공부해야하는지에 대한 설명을 한 것입니다. Vanilla JS를 잘하게 되고 이 언어에 대해 더 많이 알게되면 리액트와 같은 다른 언어로 넘어갈 때도 아무런 문제가 없을 것입니다. 비디오 게임이나 다른 것들을 만들 때도 JavaScript의 영향력을 알게 될 것이고 업무를 하면서 마주하는 거의 모든 Library를 이해할 수 있게 될 것입니다.

Vanilla JavaScript를 배운다는 건 웹에서의 기초가 되는 언어를 배우는 것과 같습니다. 이 언어는 예쁘고 우아하지만은 않습니다. 답답한 부분이 굉장히 많을 것입니다.

그러나 웹상에서 본 모든 것들은 이 언어로 구성이 되어있습니다. 그래서 이 언어가 강력하죠.

Vanilla JS에 대한 소개는 이정도면 충분하죠? 아직까지도 왜 배워야 하는지 설득 당하지 못했다면... 미안해요. 제가 멋진 세일즈맨은 아니네요^_^...

만약 설득당했다면 당장 시작해봐요. 왜냐면 다음 글 부터 JavaScript를 대체 어떻게 사용하면 되는지, 어디에 넣는건지 배울 것이기 때문입니다. 글이 길었죠? 읽느라 수고했어요! 그럼 다음 글에서 만나요. 안녕!