부스트코스 DB연결 웹앱 #2 WEB UI 개발- FE

1. 배운것들

1. setTimeout을 필요한 곳에 사용할 수 있다.
2. 비동기가 무엇인지 기본개념을 이해한다.

window 메서드는 여러가지 있지만 그 중에 setTimeout이라는 메서드가 있다.

윈도우 메서드의 경우 window.setTimeout()이런식으로 안하고 setTimeout()이렇게 해도 선언이 된다.

이 메서드는 함수를 인자로 받을 수 있다. setTimeout(function(){}, 1000) 이런식으로 하면 이 함수가 1초뒤에 실행되는 것이다.

 

function run() {

console.log("start");

setTimeout(function() {

var msg = "hello codesquad";

console.log(msg);

}, 1000);

console.log("end");

}

run();

 

이 함수의 경우 실행순서는 start, end, hello codesquad 순으로 실행된다.

여기서 런 밑에 또다른 코드가 있다면

function run() {

console.log("start");

setTimeout(function() {

var msg = "hello codesquad";

console.log(msg);

}, 1000);

console.log("end");

}

run();

console.log("hihihi");

 

실행순서는 start, end, hihihi, hello codesquad순으로 실행된다.

 

이렇게 되는 이유는 비동기라는 방식인데

비동기란 함수가 실행되지 않고 스택에 쌓여있다가 다른 코드가 실행되는 중에 조건을 만족하면 실행되는 것을 의미한다.

 

setTimeout의 경우 1000을 입력하면 1초뒤 실행인데 일단 실행을 보류해놓고 다른 코드를 실행하다가 1초가 지나면 이 코드를 실행한다. 

 

 

 

 

 

2. 배운것들

• DOM Tree
• DOM API
• querySelector

 

 

HTML에서 DOM Tree라는 것이 있다. 객체형태의 모델로 저장된 것을 DOM Tree라고 한다. 말이 어려운데 풀어서 설명하자면

 

HTML의 경우 html head, body , footer등이 있다. 그 안에도 div나 span같은 태그들이 존재한다. 이것을 각각

html head body div 이런 순서로 하는 것이 아니라 head body footer라는 태그들 밑에 각각의 div나 span을 관리한다. 예로들면 중세시대 봉건제도랑 비슷하다.

html태그는 유일하니 왕이라고 치고 body와 head는 동등한 귀족이다. 서로 밑에 자식들은 건드릴 수 없으므로 body밑에 태그들은 body.div이런식으로 들어가야한다.

 

이 방법덕분에 메서드를 찾기 쉬워진다. 찾는방법을 제공하는 DOM API를 살펴보면

getElementById("nav-menu")를 하면 id명이 nav-menu인 태그를 찾아준다. id는 중복이 안되는 유일한 것이기 때문에 따로 body 밑에 span 밑에 nav-menu를 할 필요가 없다.

 

두 번쨰 방법은 querySelector()이다. 이것은 아까말한 돔트리 형태로 찾아야 한다. 최상위 즉 왕은 여기서 html이 아닌

document이다. 그래서 사용법은 document.querySelector("div")를 하면 최상위 div태그를 찾는다.

클래스를 찾으려면 .을 붙이면 되고 id는 #을 붙이면 된다.

 

돔트리형식으로 찾는것을 예로들면

FORM = document.querySelector(".form") ,

INPUT = FORM.querySelector("input") 이런식으로 해도 되고

 

INPUT = FORM.querySelector(".form > input")이렇게 찾아도 된다.

input태그가 하나라면 그냥 input을 해도 되지만 규모가 커진 경우 form태그도 클래스명을 toDoForm이런식으로 지정한 후 밑에 input태그또한 toDoInput이런식으로 하는 것이 좋다.

 

이것을 활용해서

remove(변수명)으로 변수를 삭제할 수도 있고

INPUT.createElement(tagname)로 태그를 생성할 수도 있다.

 

 

 

3. 배운것들

• Event listener
• addEventListener
• event object

우리가 특정행동을 하면 event가 발생한다. 우리가 지정하지 않아도 브라우저에서는 그 이벤트들이 이미 기록되어있다.

그래서 필요한 경우 발생한 이벤트명을 입력한 후 코드를 타이핑하면 이벤트를 다룰 수 있다.

표준방법으로 addEventListener가 있다.

var el = document.querySelector(".outside");

el.addEventListener("click", function(){

//do something..

});

 

우리가 클릭할 경우 click라는 이벤트가 발생하고 우리가 지정한 el이라는 변수에 해당하는 클래스가 클릭됐을 경우 지정된 함수를 실행한다. 저기에 console.log("clicked")를 하면 outside라는 클래스를 클릭할 시 콘솔창에 clicked가 출력된다.

 

한가지 더 덧붙이자면 클릭뿐만 아니라 클릭에 대한 이벤트정보도 넘어간다. 이것을 써도되고 안써도 된다.

 

var el = document.querySelector(".outside");

el.addEventListener("click", function(event){

console.log(event.target);

console.log(event.target.nodeName);

});

 

event객체에 target이라는 메서드가 있다. 타겟 외에도 무수히 많은 메서드가 있는데 알아서 활용하면 된다.

타겟을 활용해서 내가 outside클래스를 클릭한 경우 그 태그 위치를 콘솔창에 출력해준다.

 

 

 

4.배운것들

• XMLHTTPRequest
• Ajax

ajax는 XMLHTTPRequest통신이라고 한다. 이 기술은 웹에 데이터를 전송할 필요 없이 서버로부터 데이터를 받는 것을 의미한다. 네이버홈페이지에 보면 탭을 누를때마다 광고라던지 기사같은것이 변하는 경우를 볼 수 있는데 이게 ajax통신을 이용한 경우다. 기본적인 사용법은

 

function ajax(){

    var oreq = new XMLHttpRequest();

    oreq.addEventListener("load", function(){

        console.log("tetete");

    });

    oreq.open("GET", "http:://www.naver.com");

    oreq.send();

}

이런식으로 실행하며 이벤트리스너와 마찬가지로 로드라는 이벤트가 발생하면 함수가 실행된다.

객체생성 후 오픈메서드로 요청을 준비하고 send로 서버로 보낸다.