[JS 강의] Nicolas, 초보자를 위한 바닐라 JavaScript (#2 Practice)(노마드코더 후기)

앞전의 강의에서는 Vanilla JS의 필요성을 설명해주고 Practice부터는 JS의 문법들을 설명 해준다. 전에 JS책을 한권 보면서 DOM관련해서 별 깨달음 없이 그냥 읽어 내려갔었다. id를 갖고 오는 구나 정도만 인지 했다. 하지만 이번 강의를 듣고 나니 JS를 확실히 내 스스로도 사용 할 수 있겠구나 라는 생각이 든다. 물론 이것저것 값을 바꿔 가면서 코딩을 한다면 처음에는 시간이 조금 걸리겠지만 말이다. 스스로 작성을 할 수 있다는 것이 중요하다.

앞에 강의까지는 몰랐지만 JS를 처음 공부하는사람이라면 반드시 들어야 되는 강의이다.

리액트만 잘 사용하는게 중요한게 아니었다.

- 모르는 내용 있으면 찾아보고 나아가자.

- 궁금한 것이 있으면 JS는 찍어보자.

- 다음 파트의 앱을 만들기 시작할 때 만들어가는 순서(과정)을 눈여겨 보자.

노마드코더

강의내용중.

- console이라는 obejct가 있고 그 안에 log라는 함수(속성)이 있어. console.log()

-> console.log(console) 찍어보자.

- About function (making, calling)

- About string( " ",  ' ', ` `)

function sayHello(name, age) {
console.log("My name: ", name, ", My age: ", age);
console.log(`My name: ${name}, My age: ${age}`);
}

- 위에서 이야기 했듯이 object안에 함수 선언 가능

const cal = {
plus: function(a, b) {
return a+b;
}
}

const plus = cal.plus(10+5);

- html에 있는 모든 요소들을 갖고 오고 객체로 변경 -> DOM(Document Object Module)

(객체로 변경하면 innerHTML같은 속성도 사용 가능) 

const title = document.getElementById('title');
title.innerHTML = "Hi! JS!!";
//console.dir(title) title내부를 보기 위해서는 dir로 확인
//확인 후 속성들을 변경 가능 위에 innerHTML처럼 변경 가능
//title.style.color = "red";

-> 변경 하고 싶은 내용들을 확인 후 변경 할 수 있다.

- 자바스크립트는 css와 html을 갖고오는데 그치지 않고 이벤트를 주기 위해서 만들어 졌다.

-> 클릭, 크기조절, 드래그, 마우스엔터, 온라인, 오프라인 등등의 이벤트들. 이벤트는 MDN에서 찾아보자.

function handleResize(event) {    //이벤트를 다룰 함수를 만들 때 event 인자가 붙어. 인자 안 쓰고 사용하지 않아도 무방
console.log("I have been resized");
console.log(event)            // 그래도 event한번 찍어보자.

}

window.addEventListenet("resize", handleResize);
//handleResize()라고 호출 하면 이벤트 리슨 없이 바로 호출된다. 이 이벤트는 윈도우 창이 리사이즈 될 때 호출.

title.addEventListenet("click", clickHandleFunc);

- if문에 할 일 없으면 block