[FE] 02. WEB UI 개발

2. DB 연결 웹 애플리케이션 - WEB UI

 

* window 객체 (alert, setTimeout 등...)

 

window.setTimeout()
setTimeout() //window는 전역객체라서 생략 가능하다.

function run() {
    setTimeout(function() {
        var msg = "hello codesquad";
        console.log(msg);  //이 메시지는 즉시 실행되지 않습니다.
    }, 1000);
}

run();

1000(1초)이라고 설정해 둔 시간이 지나면 메시지(함수 실행)를 띄운다.

setTimeout 실행 순서: setTimeout의 실행은 비동기(asynchronous)로 실행되어, 동기적인 다른 실행이 끝나야 실행된다. 

setTimeout 안의 함수(콜백함수)는 run함수의 실행이 끝나고 나서 (정확히는 stack에 쌓여있는 함수의 실행이 끝나고 나서 실행) 실행된다.

 

• 비동기 처리 참고

• https://joshua1988.github.io/web-development/javascript/javascript-asynchronous-operation/

 

• 비동기 실행

특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하는 자바스크립트의 특성이다.

특정 로직의 실행이 끝날 때까지 기다려주지 않고 나머지 코드를 먼저 실행하는 것

=> 비동기 처리에 의한 문제점은 CallBack 함수로 해결 가능하다.

function getData(callbackFunc) {
	$.get('https://domain.com/products/1', function (response) {
		callbackFunc(response); // 서버에서 받은 데이터 response를 callbackFunc() 함수에 넘겨줌
	});
}

getData(function (tableData) {
	console.log(tableData); // $.get()의 response 값이 tableData에 전달됨
});

 

---

 

* DOM

 

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

브라우저에서는 DOM(document object model)이라는 개념을 통해서, 다양한 DOM API(함수 묶음정도)를 제공한다.

DOM Tree찾고 조작하는 걸 쉽게 도와주는 여러 가지 메서드(DOM API)를 말한다.

 

 

- getElementById()

특정 element를 찾을 때 => ID 정보를 통해서 찾을 수 있다.

document.getElementById("nav-cart-count");
nav-cart-count(id 값)을 찾아줌
뒤에 id, className, style.display, innerText 같은 속성들을 추가로 적용할 수 있음

 

- Element.querySelector()

Selector로 어떤 것을들 찾을 때

document.querySelector("div");

첫번째 div를 찾아준다.
id로 찾고 싶다면 맨 앞에 #을 붙인다. document.querySelector("#id");
클래스 앞에는 '.' 을 붙여야 함, 바로 아래 자식은 '>'

 

- css selector

다양한 이 문법을 사용하여 원하는 엘리먼트를 찾을 수 있다.

 

---

 

* Browser Event, Event object, Event handler

 

이벤트 등록

이벤트 등록 표준방법: addEventListener 함수

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

클릭이 일어나면 함수 안에 있는 내용을 실행해라 라고 이벤트를 설정해 둔 것, 함수를 이벤트 리스너라고 표현한다.

 

- 실습

위 코드를 실행하면 콘솔에 clicked!!이 출력된다.

el.addEventListener("click", function(e) { //이벤트 정보를 매개변수 추가 가능
	var target = e.target;
	consol.log("target.className", "target.nodeName"); //이벤트 발생 시 클레스 이름과 노드 이름 출력
	//타겟 정보를 이용해서 여러가지 정보를 확인 할 수 있음
	//debugger 추가하면 자세한 내용 확인 가능
});

 

 

이벤트 객체

브라우저는 이벤트 리스너를 호출할 때, 사용자로부터 어떤 이벤트가 발생했는지에 대한 정보를 담은 이벤트 객체를 생성해서 리스너 함수에 전달한다.

따라서 이벤트 리스너 안에서는 이벤트객체를 활용해서 추가적인 작업을 할 수 있게 된다.

var el = document.getElementById("outside");
el.addEventListener("click", function(evt){
 console.log(evt.target);
 console.log(evt.target.nodeName);
}, false);

evt.target은 이벤트가 발생한 element를 가리킨다. 이 외에도 다양한 event 타입들이 존재한다.

 

[참고] https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#Event_handler_properties

https://developer.mozilla.org/en-US/docs/Web/Events

 

---

 

* Ajax 통신의 이해

 

Ajax (XMLHTTPRequest 통신)

비동기로 서버로부터 데이터를 가져오는 것

이 기술은 웹에 데이터를 갱신할 때, 브라우저 새로고침 없이 서버로부터 데이터를 받는 것이 좋겠다는 생각에서 출발했다.

=> 더 좋은 UX를 제공할 수 있는 기술

 

Ajax를 사용하는 경우

상단에 탭을 누를때마다 컨텐츠가 달라지고 누르지도 않은 탭의 컨텐츠까지 모두 불러온다면 초기 로딩속도에 영향을 줄 것이다.

따라서 동적으로 필요한 시점에 컨텐츠를 받아와서 표현 (일부분만 갱신) => Ajax기술을 활용할 수 있는 대표적인 경우

 

• 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://www.example.org/getData?data=data");//parameter를 붙여서 보낼수있음. 
 oReq.send();
}

1. XMLHttpRequest라는 객체를 만든다

2. addEventListener

• open, send();까지 완료 후 콜백 함수(3번째 줄)만 남아서 따로 실행이 되는 것
• Ajax함수는 모두 다 반환이 되었고, 콜백 함수는 나중에 서버에서 오면 실행

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

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

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

이는 setTimeout함수의 콜백함수의 실행과 유사하게 동작하는 '비동기'로직 이다.

 

[참고] https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest

 

---

 

* JavaScript Debugging

 

자바스크립트은 실행 단계(런타임)에서 버그가 발견되기 때문에 그 타이밍에 어디가 문제인지 바로 확인하는 게 좋다.

• 바닐라 JS: 프레임워크 없이 실행할 수 있다. http://todomvc.com/examples/vanillajs/

크롬 개발자 도구 -> 우측 call stack, 브레이크 포인트 (콘솔로 위와 같이 확인 할 수있다.)

scope를 보면 현재 함수에서의 변수 값을 확인할 수 있다.

 

디버깅 컨트롤

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

• Step over next function call : 스텝 오버는 코드 라인을 한 스탭 진행하는데 현재 실행 라인에 함수 실행 코드가 있다면 함수는 실행하는데 이때 함수 안의 코드로는 진입하지 않는다. 즉 라인의 함수를 실행만 하게 된다.

• Step into next function call : 스텝 인투는 스텝 오버와 다르게 현재 실행 라인의 코드에 함수가 있다면 함수 안의 첫 번째 코드로 진입해 들어가 다시 하나씩 라인별로 코드를 실행할 수 있다.

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

• Active/Deactive breakpoint : 브레이크포인트를 끄거나 켤 수 있다.

• Pause on exception : 자바스크립트 예외가 발생하면 해당 위치에 브레이크포인트를 잡아준다.