[Boostcourse] DB 연결 웹 - 2. WEB UI 개발 FE

WEB UI 개발 - FE

1. Window 객체 (setTimeout)

window.setTimeout()
setTimeout()

setTimeout 활용 (비동기 함수)

setInterval 도 활용

인자로 함수를 받음, 보통 나중에 실행되는 함수를 콜백함수로 한다.

js는 함수를 매개변수로 받고, 함수를 리턴할 수도있다.

function run() {
  setTimeout(function() {
    var msg = "hello code";
    console.log(msg);
  }, 2000);
}

run();

2초 뒤에 함수실행

function run() {
  setTimeout(function() {
    var msg = "hello code";
    console.log(msg);
    console.log("run ...ing");
  }, 2000);

  console.log("run end");
}
>>>
run end
hello code
run ...ing

2000 milisecond

--> 0 milisecnod로 설정해도, setTimeout 안 함수가 가장 늦게 실행 된다. (비동기 함수)

setTimeout의 실행은 비동기(asynchronous)라서 동기적인 다른 실행이 끝나야 실행된다.

1) setTimeout 함수 실행

2) setTimeout 안의 익명함수를 브라우저(Web API)가 hold

3) 주어진 시간이 지나면 event queue(또는 task queue)로 익명함수 이동

4) call stack이 비워지면 setTimeout 안의 함수가 call stack으로 이동(push) 후 실행(pop)

2. DOM & querySelector

DOM (Document Object Model)

DOM Tree

DOM API

querySelector

브라우저는 HTML 코드를 DOM 객체형태의 모델로 저장한다.

이를 DOM Tree라고 하며, HTML element는 Tree형태로 저장된다.

DOM API (함수묶음정도)를 통해, Tree를 쉽게 수정가능하다.

• getElementById

  document.getElementById("nav-car-count");

  ​ .id

  ​ .className

  ​ .style

  ​ .style.display

  ​ .innerText

• Element.querySelector()

  ​ .querySelector("div");

  ​ .querySelector("a");

  ​ .querySelector("#nav-car-count");

  ​ .querySelector(".nav-line-2");

  ​ .querySelector("body .nav-line-2");

  ​ .querySelector(".nav-line-2 > .nav-arrow"); >> CSS selector

  ​ querySelectorAll

• removeChild(child): 삭제
• replaceChild(newChild, oldChild): 대체
• appendChild(child): 노드의 마지막 자식으로 주어진 엘리먼트를 추가한다.
• document.createElement(tagname): tagname 엘리먼트 노드를 생성한다.
• document.createTextNode(data): 텍스트 노드를 생성한다.

3. Browser event, Event object, Event handler

어떤 영역을 마우스로 클릭하거나, 화면을 스크롤하거나, 다른 작업에서 브라우저가 반응한다.

브라우저가 Event 기반으로 동작되게 만들어졌기 때문이다.

Event listener

addEventListener

event object

1) Event

HTML element 별로 어떤 이벤트(keyboard or mouse IO)가 발생했을 때, 특정행위를 하려면 대상엘리먼트를 찾고 어떤일을 등록하면 된다.

2) 이벤트 등록

이벤트 등록의 표준 방법

var el = document.getElementById("outside");
el.addEventListener("click", function() {
  // do something
}, false);

Event Listener(= Event handler) 콜백함수는 이벤트가 발생할 때 실행 됨.

addEventListener의 3번째 인자는 호환성을 위해 대부분 false로 설정한다.

이벤트 리스너가 등록된 해당 dom 엘리먼트에 실제 이벤트가 발생했을 때 어떤 순서로 부모 dom에 전파가 되는지를 결정하는 값이다.

var el = document.querySelector(".outside");
el.addEventListener("click", function(e) { // e는 event
  console.log("clicked!!", e);
}, false);

>> (web)
clicked!! MouseEvent {isTrusted: true, screenX: 863, screenY: 113, clientX: 95, clientY: 8, …}

e 를 매개변수로 받으면,

마우스 클릭 좌표, target 등의 정보를 알 수 있다.

가장 많이 쓰는 것은 event.target이다. 이벤트가 발생한 element를 가리킨다.

var el = document.querySelector(".outside");
el.addEventListener("click", function(e) {
  // console.log("clicked!!", e);
  var target = e.target;
  console.log(target.className, target.nodeName, target.innerText);
  debugger;
});

debugger를 통해 여러 event 객체들을 파악해본다.

target안에 어떤 객체가 있는지도 살펴보자.

event type

"click"

"keypress"

"mouseover"

"mousemove"

등등

4. Ajax

브라우저의 새로고침 없이 데이터를 얻어오는 방법

사용자가 더 빠르게 변경된 데이터를 화면의 새로고침 없이 확인할 수 있는 방법으로

더 좋은 UX(User Experience)에 해당하는 방법이다.

1) Ajax (XMLHTTPRequest 통신)

비동기 통신과 XML을 사용해, 비동기 통신구현.

화면의 새로고침없이 웹페이지의 일부분만, 받아온 데이터를 갱신할 수 있다. 화면의 다른 곳에 영향을 주지 않는다.

누르지도 않은 탭의 컨텐츠까지 초기로딩시점에서 불러오면 초기로딩속도에 영향을 준다. 따라서 동적으로 필요한 시점에 컨텐츠를 받아와서 표현하는 것이 효율적이다.

Ajax기술을 활용할 수 있는 대표적인 경우이다.

2) JSON

​ 표준적인 데이터 포맷을 결정하기 위해 주로 JSON(JavaScript Object Notation) 포맷을 사용한다. 예전에는 XML이었는데 읽기가 어렵고 내용이 커져서 json으로 바뀌었다.

Ajax통신으로 XML, Plain Text, JSON 등 다양한 포맷의 데이터를 주고 받을 수 있다. 일반적으로는 사용이 편리한 JSON 포맷으로 데이터를 주고 받는다.

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

  oReq.open("GET", "http://example.com/getData?data=data");
  oReq.send();
}
ajax();

1) XMLHttpRequest 객체를 생성해서, open 메서드로 요청을 준비하고, send 메서드로 서버로 보낸다.

2) 요청처리가 완료되면(서버에서 응답이 오면) load 이벤트가 발생하고, 콜백함수가 실행된다.

​ 콜백함수가 실행될 때는 이미 ajax 함수를 반환하고 콜스택에서 사라진 상태이다.

3) "http://example.com/getData?data=data"여기서 받아온 정보는 console 창에 출력된다.

---

Ajax는 비동기로 통신한다.

GET, POST방식으로 데이터를 전송하는 방법도 살펴보자.

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

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

서버에 json 객체를 불러올 수 있다.

{
  "name" : "crong",
  "favorites" : ["apple", "orange"]
}

---

CORS (Cross-Origin Resource Sharing)

추가 http헤더를 사용하여 브라우저가 한 출처에서 실행중인 웹 어플리케이션에 선택된 액세스 권한을 부여하도록 하는 메커니즘이다.

즉, 다른 출처의 자원, 웹 응용 프로그램은 자체와 다른 출처(도메인, 프로토콜, 포트)를 가진 리소스를 요청할 때 cross-origin HTTP 요청을 실행한다.

5. JavaScript Debugging

자바스크립트는 실행단계(런타임)에서 버그가 발견된다.

그 타이밍에 어디가 문제인지 바로 확인하는게 좋다.

chrome developer tools

debugging

디버깅 컨트롤

• Pause, Continue: 첫 번째 버튼은 평소에는 Pause 버튼 상태인데, break point가 잡힌 상태에선 Continue버튼이 된다. 다른 breakpoint가 잡힐 때까지 코드를 진행한다.

• Step over next function call : 코드 라인을 한 스텝 진행한다. 현재 실행 라인에 함수 실행 코드가 있다면 함수를 실행하는데, 이 때 함수 안으로 코드 진입하지는 않는다.

• Step into next functio call : 현재 실행 라인의 코드에 함수가 있다면 함수 안의 첫번째 코드로 진입해서 라인별로 코드를 실행한다.

• Step out of current function : 함수를 끝까지 실행하고 밖으로 빠져나와 해당 함수를 실행한 함수로 돌아간다.

• Active/Deactive breakpoint : 브레이크포인트를 on/off할 수 있다.

• Pause on exception: javascript 예외가 발생하면 해당 위치에서 breakpoint를 잡아준다.

---

reference
[https://www.edwith.org/boostcourse-web/lecture/19878]