웹프로그래밍을 하게 되면 Server설정, 인프라, 스토리지, 비즈니스 로직, Transaction 등 고려해야 할 것들이 많다.
물론 백단의 작업이 어렵고 아키텍쳐를 설계하는 것이 꽤 흥미롭고 중요한 작업임은 개발자들은 알 것이다.
그러나 뒷단만 잘 만든다고 좋은 품질의 서비스를 보장하지는 않는다.
사용자 경험을 반영한…좀 이해하기 쉬운 말로 사람들이 쓰기 편한 UI를 제공해야 비로소 좋은 평가를 받기 시작한다.
개발자들은 UI단을 소홀히 생각하는 경향이 있는 것 같은데 UI는 서비스나 앱이나 사용자가 가장 처음으로 접하는 프로그램의 얼굴이다.
사용자의 입장에서 뒷단은 위대하고 복잡한 트랜젝션을 우아한 로직과 패턴으로 깔끔하게 처리한 코드(뒷단)가 적용되어 있어도 볼 수 없다.
결론은 둘다 잘해야 한다….;;
서두가 길었는데 웹 작업의 가장 마지막 UI부분을 프로그래밍 하고 있노라 하면 브라우저 호환성을 지원하는 자바스크립트 프로그래밍이 중요하다.
오늘의 주제는 Event Bubbling이다.
Event Bubbling은 DOM형식에서 일어나는 event 메커니즘 중 하나이다.
빠르게 기능을 요약해보면 childNode에서 onclick event가 발생하게 되면 상위 object에서도 onclick event가 발생한다.
이를 이용하여 좀더 사용성 있는, 그리고 생산성 있는 코드를 작성할 수 있는데 event bubbling이 필요하지 않을 때도 있다.
브라우저 호환성을 지원하는 코드는 다음과 같다.
if (!e) var e = window.event;
e.cancelBubble = true;
if (e.stopPropagation) e.stopPropagation();
보다 자세한 것은 아래 사이트와 셈플 코드를 만들어 보면서 공부하길 바란다.
hothead 