노마드 코더 바닐라 js 배운점

제법 귀엽다 

웹을 만들기 위해 허겁지겁 node를 먼저 배우느라 바닐라 js에 대한 이해가 조금 부족하다고 느껴졌다.

그래서 바닐라 js 에 대해 조금더 배워보기 위해 노마드코더의 크롬 앱 클론코딩을 수강했다. 

 

그래서 나에게 필요한 ch 3 까지만 수강했다. 

ch2까지는 그냥 js 문법 관련 내용이라 너무 기본적이라 빨리 봤다.

 

ch3에서 좀 좋은 내용을 배울 수 있었다. 

 

배운점 

1. 변수

 js 에서 변수는 기본적으로 const를 사용한다.  값의 변경이 필요한 경우는 var 대신 let을 사용한다. 

 

2. document를 통해서 html 을 javascript의 입장에서 볼 수 있다.

다양한 방법으로 document 에서 인자를 받아오는 법을 배웠다.

//document 에서 id 를 통한 접근 
const title = document.getElementById("title");

querySelector를 이용하여 HTML의 인자를 선택하는 법을 배웠다. 

//querySelector은 하나의 element를 return해준다. 
// 같음
const title1 = document.querySelector(".hello h1");
const title2 = document.getElementsByClassName("hello");

// 모든 쿼리를 반환하고 싶으면 
//querySelectorAll을 사용한다.

//같다
const title4 = document.querySelector("#hello");
const title5 = document.getElementById("hello");

 

 

3. EventListner를 통해서 웹 페이지를 동적으로 처리 

function handleTitleClick(){
    const clickedClass = "clicked"
    //토글은전설이다..
    h1.classList.toggle(clickedClass);
     
}

h1.addEventListener("click", handleTitleClick);
h1.addEventListener("mouseenter", handleMouseEnter);
h1.addEventListener("mouseleave", handleMouseLeave);

window.addEventListener("resize", handleWindowResize);
window.addEventListener("copy", handleWindowCopy);

window.addEventListener("offline", handleWindowOffline);
window.addEventListener("online", handleWindowOnline);

자바 스크립트만으로도 어느정도 웹을 컨트롤 할 수 있다. 

 

 

4. javascript 를 이용한 css control 

 % 가장 중요! % 

자바스크립트를 이용하여 css를 control 할 때 니꼬쌤은 js에서 직접적으로 css를 바꾸는걸 선호하지 않았다. 

아래 코드가 js에서 직접적으로 css를 바꾸는 경우이다. 

const h1 = document.querySelector("div.hello:first-child h1");
h1.style.color = "blue"

왜냐하면 js와 css 두 언어를 섞는게 not sexy 하다고 하신다 .ㅋㅋ 

그래서 아래와 같은 방법으로 css를 변경한다. 

.clicked {
    color:tomato;
}

function handleTitleClick(){
    const clickedClass = "clicked"
    if (h1.className ===clickedClass){
        h1.className ="";
    }else{
        h1.className =clickedClass;
    }
     
}