VanillaJS

VanillaJS

순수 자바스크립트로 면접 전 테스트 코딩 과제로 많이 사용한다.
카카오 경력 개발자 챌린지에 과제 테스트로 vanillaJS만 사용하여 과제를 수행해야 한다고 나왔을 정도..
이미 jquery에 익숙해졌지만 다시 부지런히 js만 해야겠다.!

Selector

document.getElementById("header"); // id 선택자.
document.querySelector("#header");
document.querySelector(".container"); // class 선택자.
document.querySelector("p");
document.querySelectorAll(".content"); // class 전체 선택자.
const container = document.querySelector(".container");
const contents = container.querySelectorAll(".contents");

기존에 사용했던 jquery의 경우 $('#id or .class name')을 넣어 사용했고, js의 경우엔
위의 코드처럼 엘리먼트에 접근해야 한다.

js가 jquery, css3랑 선택자가 너무 흡사해서 그런지..js만 해서 그런지 js 코드를 보는데 뭔가 익숙한 느낌이다. 2년차때까지만 해도 js는 어색하고 jquery만 편했는데 무슨 이유인지는 모르겠다.

js에서도 자식 또는 부모 엘리먼트에 접근 할 수 있다.

const photoList = document.querySelector('.photo_list');
let firstChild = photoList.firstElementChild;
let lastChild = photoList.lastElementChild;

위 코드를 보면 익순한 이유가 css에서도 first-child, last-child로 첫번째 요소 및 마지막 요소의 선택자와도 비슷하고 jquery와도 비슷하고.. element만 풀어써놨다고 생각하면 더 쉽게 머리에 들어오는듯..

addEventListener

이벤트를 등록하는 방식이고, ie8 이하에서는 호환되지 않으니 참고하기.
1월인가 2월에 win7이 사라졌고, 그에 대해서 ie 버전도 올라왔으니 기억만 하고 있음면 된다.

<button type="button" class="btn_prev">Prev</button>

const btnPrev = document.querySelector('.btn_prev');
btnPrev.addEventListener('click', function() {
	console.log('prev');  
});

위 코드 형식으로 엘리먼트에 접근하여 addEventListener로 하면 되며, 그 뒤부터는 jquery동일함.. 요새는 jquery, js, css3, scss 다 비슷비슷하게 보이고 실제로 흡사하다.

js style

<button type="button" class="btn_prev">Prev</button>
const btnPrev = document.querySelector('.btn_prev');
btnPrev.style.transform = "translate3d(-" + (photoWidth * (startNum + 1)) + "px, 0px, 0px)";

위 코드를 봐도 jquery를 풀어서 쓴다고 생각하면 쉽게 받아들여진다.
엘리먼트를 선택하고 style로 선언하여 어떤 속성을 사용할지 결정하면 된다.

기타

const photoList = document.querySelector('.photo_list');
let firstChild = photoList.firstElementChild;
let clonedFirst = firstChild.cloneNode(true);
photoList.appendChild(clonedFirst);
photoList.insertBefore(clonedLast, photoList.firstElementChild); //첫번째 인자에 해당하는 엘레먼트 요소에 두번째 인자의 엘레먼트를 삽입
photoList.add('photo_active'); //엘레먼트 추가
photoList.remove('photo_active'); //엘레먼트 제거