[WEB] 웹 UI 개발
window 객체
window는 전역 객체라 해서 window 안에는 많은 메서드들이 있습니다. 참고로 window는 디폴트값이므로 생략할 수 있습니다.
setTimeout 활용
인자로 함수를 받고 있으며 보통 나중에 실행되는 함수를 콜백함수라 부릅니다. 자바스크립트는 함수를 인자로 받고, 함수를 반환할 수 있습니다.
function run() {
console.log("run start!");
setTimeout(function() {
var msg = "hello codesquad";
console.log(msg); //이 메시지는 즉시 실행되지 않습니다.
console.log("run ...ing");
}, 1000);
console.log("run end!");
}
run();
console.log("end");
위와 같은 코드의 출력은 아래와 같습니다.
run start!
run end
end
hello codesquad
run ....ing
setTimeout의 함수는 end가 출력되고 난 이후 1000 만큼 즉, 1초 이후에 콜백함수가 실행됩니다. 따라서 end가 출력되고 1초가 지난 후에 hello codesquad 가 출력되는 것을 확인 할 수 있습니다. 1000이 0으로 바뀌어도 순서는 바뀌지 않습니다.
이는 setTimeout이 비동기이기 때문에 동기적인 다른 실행이 모두 끝난 뒤에 실행됩니다. 즉 setTimeout 안의 함수(콜백함수) 는 run의 실행이 끝나고 나서 실행이되는데 정확히는 stack에 쌓여있는 함수들의 실행이 끝난 이후에 실행되는 것입니다.
DOM과 querySeletor
DOM은 앞서 다뤘던 document object model 입니다. 브라우저에서는 html을 DOM 형태의 트리구조로 저장하며 탐색을 용이하게 하기 위해서 DOM API를 제공합니다.
getElementById()
ID 정보를 통해서 찾을 수 있습니다.
Element.querySelector()
DOM을 찾는데 특히 유용한 querySelector 메서드입니다.
CSS 스타일을 결정할 때 사용하던, Selector 문법을 활용해 DOM에 접근할 수 있습니다.
DOM을 찾을 때 querySelector만 써도 충분하고 빠릅니다.
css selector
selector문법은 querySelector와 querySelectorAll메서드에서 사용할 수 있으며, css 스타일을 부여했을 때 익혔던 selector문법과 동일하다고 생각하고 사용할 수가 있습니다.
다양한 css selector문법을 사용해서 원하는 엘리먼트를 찾을 수 있습니다.
Event
이벤트란 우리가 키보드 또는 마우스로 특정 행위를 할때 일어나는 일입니다. 마우스로 화면의 크기를 조절할 수도 있고, 스크롤 또는 드래그를 하는 것을 비롯해 키보드로 문자를 입력하는 것 모두 이벤트라고 부를 수 있습니다.
이벤트 등록
var el = document.getElementById("outside");
el.addEventListener("click", function(){
//do something..
}, false);
addEventListner 함수를 사용해 이벤트를 등록할 수 있습니다. 이 함수의 두 번째 인자는 함수이며 나중에 이벤트가 발생할때 실행되는 함수로 Event Handler (Event Listner) 라고 합니다.
이벤트 객체
브라우저는 이벤트 리스너를 호출할 때, 사용자로부터 어떤 이벤트가 발생했는지에 대한 정보를 담은 이벤트 객체를 생성해서 리스너 함수에 전달합니다. 따라서 이벤트 리스너 안에는 이벤트 객체를 활용해서 추가적인 작업을 할 수 있게 됩니다.
var el = document.getElementById("outside");
el.addEventListener("click", function(evt){
console.log(evt.target);
console.log(evt.target.nodeName);
}, false);
가장 많이 쓰이는 건 event.target 입니다. event.target은 이벤트가 발생한 element를 가리킵니다.
element도 객체이므로 안에 nodeName이나 classname같이 element가 가진 속성을 사용할 수 있습니다.
Ajax 통신
Ajax
이 기술은 웹에 데이터를 갱신할 때, 브라우저 새로고침 없이 서버로부터 데이터를 받아오기 위해 만들어졌습니다.
| [##_Image | kage@bnK4UA/btqCbTRi1DA/Ly6oOKH2JNkkWA6VkeJfEK/img.png | CDM | 1.3 | {“originWidth”:1280,”originHeight”:1157,”style”:”alignCenter”,”width”:604,”height”:546}_##] |
Ajax의 대표적인 예시로 네이버 등에서 위와 같은 화면을 쉽게 찾아볼 수 있습니다. 상단의 탭을 누를 때마다 컨텐츠가 바뀌는데 누르지도 않은 탭의 컨텐츠를 초기로딩시점부터 모두 불러온다면 초기로딩속도에 영향을 줄 것입니다. 따라서 동적으로 필요한 시점에 컨텐츠를 받아와서 표현하는 것이 더 효과적입니다.
JSON
표준적인 데이터 포맷을 결정하기 위해 주로 JSON(JavaScript Object Notation) 포맷을 사용합니다.
예전에는 XML 과 같은 방법으로 정했지만 내용이 방대해짐에 따라 JSON에 따르게 되었다.
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");
oReq.send();
}
첫 번째로 ajax를 보내기 위해서는 XMLHttpRequest를 만들어야한다. 이후 똑같이 이벤트를 등록하고, url로 서버요청을 준비하고 send하면 서버로 날아가면서 ajax의 함수 실행이 끝납니다. 이후 콜백함수가 남아서 stack이 비워진 후에 실행되게 됩니다.
댓글남기기