[웹 프로그래밍(풀스택)] Web UI 개발 -FE

1. Window 객체(setTimeOut)

window는 전역 개체이며, 많은 매서드들이 존재하며, 아래처럼 사용할 수 있다. window는 디폴트에 개념임으로 생략할수 있다. 

setTimeout 활용

인자로 함수를 받고 있으며, 보통 나중에 실행되는 함수를 콜백함수라고 한다. 자바스크립트는 함수를 인자로 받을 수 있다. 혹은 함수를 반환할 수도 있다. setTimeout을 활용한 예제를 살펴보자

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

브라우저 콘솔창에 입력해보았더니 1초 후에 hello codesquad가 올라왔다. run()이라는 함수는 1초(1000) 후에 hello codesquad를 출력하라는 함수인 것이다. 2000으로 바꿔주면 2초 후가 된다. 여기서 코드를 조금 수정해보자.

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 start, run...ing, run end 순으로 출력이 될까? 결과는 그렇지 않다. run start, run end, run...ing이 출력이 된다. 만약 run start와 run end를 함수 밖으로 빼내게 되면 어떻게 될까? 이 또한 마찬가지로 run start, run end, run..ing가 실행되게 된다. 그러면 다음과 같이 작성해보자

function run(){
    setTimeout(function() {
        var msg = "hello codesquad";
        console.log(msg);
    }, 1000);
console.log("run function end");
}

console.log("start");
run();
console.log("end");

출력 결과는 start, run function end, end, hello codesquad가 된다. 지연을 줄여보면 어떻게 될까? 1000ms를 0ms로 바꿔도 나중에 실행된다. 비동기 함수는 스택에 쌓여 있는 함수가 모두 실행되고 마지막에 실행이 된다는 점만 기억하자. 비동기 함수는 이벤트 큐라는 곳에 따로 보관되다 스택이 모두 비워지면 실행이 된다. 

2. DOM(Document Object Model)

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

[출처: Naver Boostcourse]

복잡한 DOM Tree를 탐색하기 위해 JavaScript로 탐색 알고리즘을 구현하면 너무 힘들다. 그래서 브라우저는 DOM이라는 개념을 통해서 다양한 DOM API(함수 묶음으로 생각)를 제공하고 있다. 브라우저는 DOM Tree를 찾고 조작하는 걸 쉽게 도와주는 여러가지 메서드를 제공한다. 

getElementById()

ID 정보를 통해 찾을 수 있다. 위 그림을 보면 document가 있는데 이는 최상위 html을 포함하고 있는 최상위 루트 객체다. 강의에서는 아마존의 오른쪽 위 카트를 실습에 이용했다. document.getElementId(찾고 싶은 아이디 이름)을 통해 우리가 바꾸려는 html 객체를 찾아주고, 그 뒤에 .style.display = "block"으로 해준다던지 .innerText = "ㅋ";이런식으로 바꿔줄 수 있었다. Selector를 통해 찾고 싶으면 document.querySelector() 메서드를 이용하면 된다. 안에 div를 쓰면 맨 처음 div를 출력하고, 안에 만약 id를 통해 찾고 싶으면 그냥 아이디명을 입력하는 것이 아닌 #을 붙여줘야 한다. 클래스는 .클래스명으로 찾아주면 된다. 셀렉터를 통해 찾는 문법을 css Selector라고 한다. 또한 querySelectorAll이라는 메서드도 있다. 이는 만약 div를 찾으면 이름이 div인 모든 element가 다 나오고 이걸 노드 리스트로 반환한다. 

3. Browser Event, Event Object, Event Handler

Event

브라우저에는 많은 이벤트가 발생한다. 이벤트란 화면의 크기를 마우스로 조절하거나, 스크롤, 이동하거나 선택하는 것을 칭한다. 이벤트를 브라우저가 발생시켜주니, 우리는 그때 어떤 일을 하라고 할 일을 등록할 수 있다. HTML 엘리먼트별로 어떤 이벤트(주로 키보드나 마우스 관련)가 발생했을 때 특정 행위를 하라고 하고 싶다면, 대상 엘리먼트를 찾고 어떤 일을 등록하면 된다. 그것을 자바스크립트로 구현할 수 있다.

이벤트 등록

이벤트 등록 표준 방법은 addEventListener를 사용하면 된다. 이 메서드는 element 객체 아래에 있는 메서드다. elm.addEventListener로 호출할 수 있다.

var el = document.getElementById("outside");
el.addEventListener("click", function(){
//시킬 명령(이벤트 핸들러 혹은 이벤트 리스너라고 표현함)
}, false);

el이라는 객체 안에 outside라는 아이디를 가지고 있는 html 객체를 할당해준 후, 만약 이 객체가 클릭을 받으면, 뒤에 있는 이벤트 리스너를 실행해달라고 하는 것이다. 이벤트를 등록할 때 이벤트 객체를 매개변수로 가져오기도 한다.

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

target이라는 객체 안에는 정말 많은 정보가 들어있다. 클릭이 된 객체가 무엇인지, 그 객체의 attribute등을 이벤트 객체를 통해 얻을 수 있다. 클릭 외에도 키보드 이벤트 타입으로는 keyup, keydown, keypress가 있고, 마우스는 click, mousedown, mouseup이 있다. 

4. Ajax 통신의 이해

Ajax(XMLHTTPReqeust 통신)

웹에 데이터를 갱실할 때 브라우저 새로고침 없이 서버로부터 데이터를 받는것이 좋겠다는 생각에서 출발하였다. 더 좋은 UX(User Experience)를 제공할 수 있는 기술이다. 

네이버의 탭을 살펴보자. 그림의 윗 탭이 바뀔 때마다 화면이 컨텐츠가 달라진다. 누르지도 않은 탭의 컨텐츠까지 초기 로딩시점에 모두 불러오면 로딩 속도에 영향을 줄 것이다. 따라서 동적으로 필요한 시점에 컨텐츠를 받아와서 표현하는 것이 더 좋다. 이 경우가 Ajax 기술을 활용 할 수 있는 대표적인 경우다.

JSON

표준적인 데이터 포멧을 결정하기 위해 주로 JSON(JavaScript Object Notation) 포멧을 사용한다. 클라와 서버가 문자열 포멧으로 데이터를 주고 받기 위한 약속이다. JSON은 키와 value의 값으로 구성되어 있다.

{
	"이름": "Daniel",
    "나이": 23,
}

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();
}

기본적으로 Ajax는 비동기 함수이다. addEventListener가 실행되기 전 open으로 서버에 요청을 준비하게 되고, send를 하면 서버로 날아가는데, 그 다음 ajax라는 함수는 실행이 끝나고, 콜백 함수인 addEventListener가 load가 실행이 될 때, 나중에 서버에서 오면 실행이 된다. 정리하자면 Ajax는 비동기식으로 데이터를 서버에서 받아오는 것이고, 받아오는 포멧은 JSON 형태로 받아오고 이 형태는 key와 value 쌍으로 이루어져 있다. 서버로부터 요청을 준비하고 send 메서드를 통해 서버로 요청이 날라가는데, 이 모든 과정이 끝난 후에 로드가 시작될 때 요청한 데이터를 비동기식으로 받아오는 것이다. 

5. JavaScript Debugging

프로그램을 만들다 보면 버그는 무조건 생기기 마련이다. 이를 해결하기 위해 디버깅이 존재한다. 자바스크립트는 브라우저에서 실행되는 런타임 단계에서 실행되는 언어이기 때문에 브라우저에서 디버깅을 많이 한다. 브라우저에서 검사를 들어가보면 디버깅을 할 수 있는데 문제가 있는 단계에서 브레이크 포인트를 걸 수 있다. 코드 라인 숫자를 클릭하면 파란색으로 변하는데 그 상태로 둔 뒤 어떤 기능을 실행하면 그 단계에서 멈추게 되있다. 이 상태에서 콘솔창에 this, viewcmd 등으로 현재 어떤 기능을 실행하고 있는지 확인 할 수 있다. 또한 어디서 어떤 패러미터가 넘어왔는지 확인하고 싶으면 옆에 Call Stack 항에서 어떤 메서드가 스택에 있는지 확인할 수 있다.