피곤할 때는 술 한잔을 하고 자면 풀릴까 하고 두잔을 하고 잤더니 피곤이 풀리기는 커녕 눈꺼풀만 무겁다. 7시 알람이 휴대폰에서 요란하게 울리지만 20분을 뒤척인 끝에 DOM생각에 벌떡 일어나 냉동실에 얼려 놓은 찹쌀떡을 하나 먹고 길을 나썼다. 관악산의 산바람이 시원하게 얼굴을 스치고 반바지 아래로 차가움이 감싼다. 2일차 DOM강의실로 삼양 컵라면 하나를 들고와서 따끈한 국물을 마시고 손놀릴 준비를 한다.
Event
"다큐멘트에서 발생하는 이벤트를 설정하고 작용한다."
이벤트 설정에는 이벤트 타입이 있다. 이벤트 처리는 핸들러/리스너라 부르지만 리스너가 표준(스펙)용어이다. 캡쳐/버블은 DOM Tree와 관련이 있다. 이벤트의 버블링은 document 밑의 html 객체까지 올라간다. 기본이 이벤트 전파이기 때문에 적절히 방지를 해주어야 한다.
window부터 캡쳐링 된다. DOM의 path구조를 메모리상에 만들어 놓고 캡쳐/버블링 phase로 찾아간다. 예로 아래와 같이 파란색의 tr을 클릭하면 먼저 밑으로 간 후 위쪽으로 버블링된다. 3번의 버블링은 막을 수 있지만 1번 단계는 막을 수 없다. 왜 버블링을 발생하고 막게 할 수 있을까?
UX적으로 더블클릭은 제외시킨다. click은 mouseup, mousedown을 포함한다. 모바일에서는 mousemove를 쓰지말고 touchmove를 통해 하고 움직일때 x/y 좌표값을 계산하는 DOM parsing을 하지 않도록 프로퍼티를 먼저 설정해준다. 사용자의 베터리를 절약해 줘야 한다.
keydown, keyup 에서 input 태그에서 추천단어(suggest)를 보여주려고 할때는 keydown시 계속 누를 수 있으므로 keyup을 잡아준다. Firefox의 한글 사용 경우는 spacebar넣어야 suggest가 된다. keypress는 keydown <-> keyup 사이에 발생한다. 이를 이용해서 Firefox의 제약을 해결할 수 있다.
var results = ModelName.query({ search : 'all' }, onSuccessFn, onFailureFn);
//get a specific record
var record = ModelName.get({ id : 123 }, onSuccessFn, onFailureFn); //onSuccessFn and onFailureFn are optional callback functions where you can further customize the response
//create a new ModelName record
var record = new ModelName();
//update that record
record.someAttr = 'someValue';
record.$save();
//or if you prefer to submit your data in a different way
ModelName.save({
id : record.id
},{
somePostObject : {
attr1 : 'value',
attr2 : 'value2'
}
});
//destroy the record (and include a token)
record.destroy({ token : record.token });
9. Directives
- HTML 코드를 통하여 만들어 놓은 플러그인과 링크를 설정해 주는 것이다. 애플리케이션내에서 블럭을 격리시켜준다. (그냥 컴포넌트 개념을 생각하며 되겠다. 화면 구성을 위하여 UI 컴포넌트 추가하는 것 처럼)
- 웹앱을 구조화하는데 도움을 준다
- Plugin, Validation(유효성검사), Dynamic text properties 또는 i18n, l10n 에도 활용한다
// link 는 Controller와 Directive가 $scope 를 통하여 데이터를 공유하는 중요 통로이다
