WEB UI와 JavaScript - Modest Study

콜백 함수

다른 함수의 인자로써 이용되는 함수
어떤 이벤트에 의해 호출되어지는 함수
- 예시: window.setTimeout() //window는 전역객체라 생략 가능
```
function run() {
  setTimeout(function() {
      var msg = "hello codesquad";
      console.log(msg);  //이 메시지는 즉시 실행되지 않습니다.
  }, 3000); //3초 뒤 실행된다. (지연실행)
}
run(); // 이처럼 늦게 실행되는 것을 비동기라 한다. 
```
- 동기(synchronous): 동시에 일어난다. 요청을 하면 응답을 받아야지만 다음 동작이 일어난다. 직렬적으로 실행된다.
- 비동기(asynchronous): 동시에 일어나지 않는다. 요청한 그 자리에서 결과가 주어지지 않는다. 병렬적으로 실행된다.
- 비동기 처리 방식이 필요한 이유: 동기적으로 앱, 웹을 구성할 경우 데이터를 수신하는 것과 페이지를 표시하는 것이 순차적으로 진행되기 때문에 실행속도가 기하급수적으로 느려진다. 비동기적으로 처리할 경우 데이터를 수신하고, 페이지를 구성하는 것이 병렬적으로 실행되어 더 효율적인 처리가 가능해진다.

DOM(Document Object Model)

domtree

브라우저에서는 HTML 코드를 DOM(Document Object Model) 이라는 객체 형태의 모델로 저장한다.

브라우저는DOM Tree를 탐색하기 위해 쉽게 도와주는 여러 가지 메소드를 제공한다.

getElementById() : id정보를 통해 찾을 수 있다.

document.getElemntById("idname");
document.getElemntById("idname").style.display = "block";  //display="block"으로 변경
document.getElemntById("idname").innerText="HI"; //innerText 변경

querySelector(): CSS 스타일을 결정할 때 사용하던 Selector 문법을 이용해 DOM에 접근

document.querySelector("#idname"); //id로 검색
document.querySelector(".classname"); //class로 검색
document.querySelector("body .classname"); //body 안의 class 검색
document.querySelector(".classname1 > .classname2"); //classname1의 자식요소인 classname2 검색

querySelectorAll() : All 메소드 Nodelist로 검색한 결과를 반환한다.

var divtag = document.querySelectorAll("div"); //id, class도 위와 같이 검색 가능, div 태그 모두 반환한다. 리스트 형식으로 접근 가능하다. 
console.log(divtag[0]); //첫번째 div 태그
console.log(divtag[2]); //두번째 div 태그

Browser Event, Browser Object, Event handler

Event: 사용자가 브라우저에서 일어나는 일을 모두 이벤트라 한다.
- 예: 마우스로 화면의 크기를 조절, 어떤 것을 클릭, 스크롤, 드래그 등
EventListener(EventHandler) 등록

var el = document.querySelector(".classname");
el.addEventListener("click", function(){
//do something..  //el 변수에 저장한 값을 클릭하면 함수를 실행한다.
}, false);

콜백함수는 이벤트 발생시 실행

Browser Object

var el = document.getElementById("div");
el.addEventListener("click", function(evt){
 console.log(evt.target);
 console.log(evt.target.nodeName); //el 변수에 저장된 값을 클릭하면 콘솔로그에 요소와 노드이름을 남기는 함수를 실행한다.  
}, false);

Ajax(Asynchronous JavaScript and XML) 통신

빠르게 동작하는 동적 웹 페이지를 만들기 위한 개발 기법
웹 페이지 모두를 새로고침하지 않고 일부분만 갱신할 수 있는 방법
JSON, XML, HTML, 텍스트 파일 등으로 데이터를 주고 받을 수 있다.
Ajax 실행 코드 표준 방법

function ajax(data) {
 var oReq = new XMLHttpRequest();
 oReq.addEventListener("load", function() {
   console.log(this.responseText);
 });    
 oReq.open("GET", "http://www.example.org/getData?data=data");//parameter를 붙여서 보낼수있음. 
 oReq.send();
}

json.txt

{
    "name" : "ddungi"
    "favorites" : ["appple", "orange"]
}

Ajax 실습

var oReq = new XMLHttpRequest();
oReq.addEventListener("load", function() {
   console.log(this.responseText);
 });    

 oReq.open("GET", "./json.txt");
 oReq.send();

open 메소드로 요청을 준비하고, send 메소드로 json 파일을 서버로 보낸다.
요청처리가 완료(서버에서 응답이 오면) load 이벤트 실행되고 콜백함수 실행된다. 이때 콜백함수가 실행될 때는 ajax함수는 반환하고 콜스택에서 사라진 상태이다.
이는 setTimeout 함수와 유사한 비동기 로직이다.

Referce:

웹 프로그래밍(풀스택)_부스트코스를 학습한 내용입니다.
동기, 비동기 차이점_lsj8367
querySelector,querySelectorAll_susu.log
Ajax_TCP school
chrome으로 디버깅하기

← Previous Post Next Post →