💻 Vanilla Javascript
🔍 바닐라 자바스크립트를 소개합니다.
자바스크립트는 옛날에 만들어진 언어이기 때문에 딱 보면 되게 못생겼다. (대충 코드가 어지럽다는 뜻)
자바스크립트에 대한 라이브러리와 프레임워크가 많은 이유이기도 하다.
라이브러리와 프레임워크는 화장한, 꾸며놓은, 이쁘게 생긴 자바스크립트라고 할 수 있는데 한 눈에 보기에도 깔끔하고 배우기도 쉽기 때문이다.
대표적으로 JQuery, ReactJS, AngularJS 등이 있다.
그럼에도 불구하고 이 어려운 바닐라 자바스크립트를 굳이 가장 먼저 배워야 하는 이유는 말 그대로 기본이기 때문이다. 원리를 알고 나서 응용을 하자는 말이다.
아직 와닿지 않으니 바닐라 자바스크립트에서 예시를 보자.
💻 바닐라JS vs JQuery
앞에서도 잠깐 말했듯이, 자바스크립트는 함수형 프로그래밍이라 항상 변수를 선언해주어야 한다.
바닐라JS에서는 <id="thing">이라는 어떤 요소의 스타일을 s라는 변수로 선언하고,
opacity 효과를 1로 준다고 한다.
그리고 fade라는 함수는 s.opacity에서 0.1을 뺀(-=0.1) 수가 0보다 작으면 display:none 효과를, 아니면 40초 fade 효과를 주겠다고 한다.
이것을 제이쿼리(대표적인 자바스크립트 라이브러리)로 바꿔보자.
일단 제이쿼리를 사용하려면 오픈소스를 가져와야 하는데(나중에 아카데미 제이쿼리 블로깅에서 자세히 보자), 위에서는 구글 CDN을 이용했다.(대충 구글에서 제이쿼리 파일을 받아왔다는 뜻)
제이쿼리에선 아주 간단하게 $를 써주고 바로 아이디를 써주고, 효과를 써준다.
즉, document.getElementByID = $이고, 그 다음 코드를 CSS와 유사한 방식으로 입력한다.
(삼항연산자(바닐라JS의 막줄)대신 '(#thing).fadeout()')
이렇게 보란듯이 바닐라JS는 복잡하고, 라이브러리는 정말 깔끔하다.
하지만 바닐라JS를 알아야 나중에 제이쿼리든 리액트이든 뷰JS든 라이브러리든 프레임워크든 뭐든 빠르게 적용할 수 있다.
그러니 지금부터는 이 어렵고 이쁘지 않은 강력한 언어를 존버정신으로 배워볼 것이다.
📝 TIL
- 바닐라 자바스크립트 정의
- 라이브러리와 프레임워크
- 바닐라JS와 jQuery의 차이점
- 바닐라JS를 공부해야 하는 이유
