[boostcourse] 2.2. WEB UI 개발 - FE

1. DOM과 querySelector

DOM (Document Object Model)

- 브라우저에서는 HTML 코드를 DOM이라는 객체 형태의 모델로 저장함

- 그렇게 저장된 정보를 DOM Tree라고 함

- 복잡한 DOM Tree를 탐색하기 위해, 브라우저에서는 DOM API를 제공함

getElementById()

- ID정보를 통해서 해당 Element를 찾음

ex) document.getElementById("nav-cart-count").innerText = "-1";

querySelector()

- DOM을 찾는 메소드. 첫번째 Element를 찾음

ex) document.querySelector("div"); 

-> 첫번째 div를 찾음

ex) document.querySelector("#nav-cart-count"); 

-> id를 찾기 위해서는 #, class를 찾기 위해서는 .을 붙임 (css selector처럼)

 

2. Browser Event, Event object, Event handler

이벤트

- HTML Element별로 어떤 이벤트(주로 키보드나 마우스 관련)가 발생했을 때, 특정 행위를 하고 싶다면 대상 Elemet를 찾고 어떤 일을 등록함

 

이벤트 등록

- addEventListener()

- 이벤트가 발생할 때 실행되는 함수를 Event handler 또는 Event listener라고 함

 

3. Ajax 통신의 이해

Ajax (Asynchoronous JavaScript and XML)

- 빠르게 동작하는 동적인 웹 페이지를 만들기 위한 개발 기법

- 웹 페이지 전체를 다시 로딩하지 않고도, 웹 페이지의 일부분만을 갱신할 수 있음

- 즉, Ajax를 이용하여 백그라운드 영역에서 서버와 통신하여 그 결과를 웹 페이지의 일부분에만 표시할 수 있음

- 이때 서버와는 다양한 형태의 데이터를 주고받을 수 있음 (JSON, XML, HTML 등)

 

JSON

- key : value 형식의 데이터 포맷

 

Ajax 실행 코드

function ajax(data) {
	// 1. XMLHttpRequest 객체 생성
	var oReq = new XMLHTTPRequest();
    
    // 4. 응답이 오면, load 이벤트가 발생하고 콜백함수가 실행됨
    oReq.addEventListener("load", function() {
    	consle.log(this.responseText);
    });
    
    // 2. 요청 준비
    oReq.open("GET", "http://example.org/getData?data=value");
    // 3. 서버로 보냄
    oReq.send();
}