범부 개발자 아등바등 살아남기

 웹 개발을 하다 보면 여러 이벤트가 순차적으로 발생하는 상황을 종종 있다. 이러한 이벤트의 실행 순서를 제대로 이해하면, 이벤트 간의 충돌을 방지하고 원하는 대로 기능을 구현할 수 있다.

 최근, 검색어를 입력 받아 해당 입력 값에 해당하는 요소를 보여주는 UI 컴포넌트를 만들었다. 이 컴포넌트에서 의도한 동작 과정은 다음과 같다.

1. Input 창에 포커스가 가면 해당 input 태그 아래에 자동 완성된 결과물을 보여준다. (focusin 이벤트)
2. Input 창에서 포커스가 사라지면 결과물 창을 사라지게 한다. (blur 이벤트)
3. 자동 완성된 결과물을 클릭하면 해당 요소의 값이 input의 값으로 들어가게 된다. (click 이벤트)

 그러나 결과물을 클릭해도 값이 input에 들어가지 않는 문제가 발생했다. 이는 결과물을 클릭하는 이벤트보다 포커스가 사라지는 이벤트가 더 빨리 실행되기 때문인 듯 했다.

See the Pen clickevent- by ka0824 (@ka0824) on CodePen.

 이벤트의 순서를 알아보기 위해 다음과 같은 코드를 작성했다:

const test1DOM = document.getElementById("test1");
const test2DOM = document.getElementById("test2");

test1DOM.addEventListener("mousedown", (e) => {
  console.log("test1 mousedown");
});
test1DOM.addEventListener("focusin", (e) => {
  console.log("test1 focusin");
});
test1DOM.addEventListener("mouseup", (e) => {
  console.log("test1 mouseup");
});
test1DOM.addEventListener("click", (e) => {
  console.log("test1 click");
});
test1DOM.addEventListener("blur", (e) => {
  console.log("test1 blur");
});

test2DOM.addEventListener("mousedown", (e) => {
  console.log("test2 mousedown");
});
test2DOM.addEventListener("focusin", (e) => {
  console.log("test2 focusin");
});
test2DOM.addEventListener("mouseup", (e) => {
  console.log("test2 mouseup");
});
test2DOM.addEventListener("click", (e) => {
  console.log("test2 click");
});
test2DOM.addEventListener("blur", (e) => {
  console.log("test2 blur");
});

이 코드를 통해 알게 된 이벤트 실행 순서는 다음과 같았다.

1. mousedown 이벤트
2. (다른 요소의) blur 이벤트
3. focusin 이벤트
4. mouseup 이벤트
5. click 이벤트

 앞서 작성한 코드에서 자동 완성된 결과물을 선택하더라도 input에 값이 넣어지지 않았던 이유는 해당 요소의 클릭 이벤트 이전에 blur 이벤트가 발생했기 때문이다. blur 이벤트가 발생하면 자동 완성된 요소가 화면에서 사라지게 되어 실제로 클릭 이벤트가 일어나지 않았을 것이다.

 따라서, 클릭 이벤트 대신 mousedown 이벤트를 사용하면 원하는 대로 기능을 적용할 수 있다. 이는 mousedown 이벤트가 blur 이벤트보다 먼저 발생하기 때문이다.

See the Pen event-order-example-2 by ka0824 (@ka0824) on CodePen.

 ARIA 속성은 웹 접근성을 향상시킨다. 실제 동작에 영향을 주진 않지만, HTML 요소의 역할, 상호 작용 대상등을 명시함으로써 웹페이지에 대한 이해를 높일 수 있다.

• 스크린 리더기 사용자 보조
• 키보드만 사용하는 경우에도 이용 보조
• ARIA 속성으로 각 HTML 요소의 역할 등을 명시하여 코드의 가독성을 높임

1. role

요소의 역할을 정의한다. div 태그를 사용했으나, 실제 기능은 button의 역할을 하는 경우 등에 사용할 수 있다.

<div role="button" onclick="closeButton()">close</div>

2. aria-label

현재 속성이 어떠한 의미를 가지고 있는 지 명시한다.

<button aria-label="close">X</button>

3. aria-labelledby

어떤 레이블을 통해 제공되는 요소인 지 명시한다.

<label id="username">username</label>
<input aria-labelledby="username" />

4. aria-describedby

해당 요소를 설명하는 요소를 명시한다.

<label id="username">username</label>
<input aria-labelledby="username" aria-describedby="username-description" />
<p id="username-description">유저 이름은 최소 8자 이상이어야 합니다.</p>

5. aria-desabled

해당 요소가 비활성화 되었는지 여부를 나타낸다.

<button aria-disabled="true">확인</button>

6. aria-hidden

요소가 화면에 표시되는 지 여부를 나타낸다.

<button aria-hidden="true">로그 아웃</button>

7. aria-expanded

요소가 접힌 상태인지 펼쳐진 상태인지 여부를 나타낸다.

<div aria-expanded="true">열린 상태</div>

8. aria-controls

어떤 요소를 제어하는 지 명시한다.

<button aria-controls="menu">메뉴 펼치기</button>
<div id="menu">메뉴</div>

9. aria-valuemin, aria-valuemax

값의 범위를 나타낸다.

<input type="number" aria-valuemin="0" aria-valuemax="100" />

웹 페이지가 어떠한 방식을 걸쳐 그려지는 지 알아봅니다.