소개

안녕하세요, 이 게시물은 현대 및 표준 웹 기술(프레임워크/라이브러리가 없음을 의미함)로 구현된 공통 UI 패턴을 탐구한 "Web Apps From Scratch"라는 시리즈의 첫 번째 게시물입니다.

이제 동기는 프레임워크에 반대하는 것이 아니라 대신 프레임워크 없이 구축함으로써 프레임워크가 우리를 위해 하는 일에 감사하는 것입니다. 또한 새로운 HTML 요소, css 및 javascript 기능을 사용해 볼 기회도 있습니다.

모달

모달은 매우 인기 있는 UI 구성 요소입니다. 경고, 확인 및 프롬프트를 마지막으로 사용한 시간은 언제입니까? 모달은 우리가 원하는 대로 스타일을 지정할 수 있는 팝업 방식으로 상황별 콘텐츠를 플래시하거나 사용자 입력을 요청하는 수단을 제공합니다.

Photo Credit: UX Planet

대화 요소

그러나 이를 위한 HTML 5 요소가 있습니다. 그것은 dialog이라고 불리며 이를 지원하는 브라우저에 대해 기본적으로 우수한 기능과 접근성을 제공합니다.



API는 매우 간단합니다. 시작하려면 다음과 같이 페이지에 대화 태그를 추가합니다.

<dialog role="dialog" aria-modal="true" id='myDialog' class="modal-content card">
  <button id="closeModal">&times;</button>
  <h1>Person Details</h1>
  <main></main>
</dialog>

역할 및 aria-modal은 페이지의 액세스 가능성을 향상시키는 속성입니다ARIA.

×는 닫기 버튼에 사용할 수 있는 깔끔한 X를 렌더링하는 HTML Symbol입니다.

이제 "open"속성을 태그에 넣지 않는 한 대화 상자의 의도된 동작이 내용을 표시하지 않습니다. 그러나 Chrome에서는 기본적으로 표시되므로 다음 스타일을 적용하여 이 동작을 재정의합니다.

dialog:not([open]) {
    display: none;
}

상태 저장 UI

다음으로 데이터를 대화에 전달하고 싶지만 이 시리즈에서는 프레임워크의 상태 관리에 의존할 수 없습니다. 한 가지 해결책은 이벤트 기반 프로그래밍을 활용하고 요소에서 데이터를 전달하고 해당 요소에서 발생하는 이벤트를 전달하는 것입니다. 예를 들어 표시하려는 사람 데이터 모음이 있습니다.



이름은 카드에 표시되지만 세부 정보 버튼을 클릭하면 모달에서 더 많은 데이터를 볼 수 있습니다.



이러한 카드는 클라이언트나 서버에서 렌더링할 수 있지만 각 카드가 해당 데이터를 모달에 전달하도록 하기 위해 data attribute/custom attributes 을 사용할 수 있습니다.

카드 마크업은 다음과 같습니다.

<section>
    <div class="card">
      <p>John Smith</p>
      <button  data-firstname="John" data-lastname="Smith" data-age="35" data-height="5.11" onclick='onModalOpen(event)'>Details</button>
    </div>

    <div class="card">
      <p>Sally Smith</p>
      <button  data-firstname="Sally" data-lastname="Smith" data-age="31" data-height="6.1" onclick='onModalOpen(event)'>Details</button>
    </div>

    <div class="card">
      <p>Paul Smith</p>
      <button  data-firstname="Paul" data-lastname="Smith" data-age="29" data-height="5.2" onclick='onModalOpen(event)'>Details</button>
    </div>

</section>

각 버튼에는 해당하는 사람의 데이터가 포함되며, 이는 대신 데이터를 검색하는 데 사용할 수 있는 ID일 수 있습니다. 또한 onclick 속성에서 eventHandler를 호출할 때 event 개체를 전달해야 합니다.

이제 버튼의 클릭 이벤트에 대한 이벤트 핸들러에서 특정 버튼과 관련 데이터를 가져올 수 있습니다.

    const dialog = document.querySelector('#myDialog');
    function onModalOpen(event){
      const button = event.target;//get the button from the event
      const buttonData = button.dataset;
      const html  = dataTemplate(buttonData);//get the values of all data attributes
      document.querySelector('dialog > main').innerHTML = HTML;
      //querySelector over getElementById, more flexible and doesn't require making ids
      dialog.showModal();
      //showModal() method available on all dialog elements to display the dialog on the screen
    }

buttondata는 기본적으로 데이터 속성의 키와 값을 문자열로 포함하는 객체입니다DOMStringMap. buttonData를 기록하면 다음을 얻습니다. template literals을 사용하여 모달에 표시되어야 하는 동적 HTML을 반환하는 템플릿 함수에 buttonData를 전달합니다.

    function dataTemplate({firstname, lastname, age, height}){
      //using object destrucuring to get the fields of the object
      return `<p>First Name: ${firstname}</p>
              <p>Last Name: ${lastname}</p>
              <p>Age: ${age}</p>
              <p>Height: ${height}</p>`;
      //using template literals to interpolate data
    }

또한 destructuring을 사용하여 데이터 필드를 변수로 가져옵니다.

폴리필

브라우저가 현재 표준 기능의 지원이 부족할 때마다 종종 polyfill이라는 라이브러리가 만들어지므로 중단되지 않습니다. 모달이 사파리와 파이어폭스에서 계속 작동하도록 pollyfill을 페이지에 추가할 수 있습니다.

<script src="https://cdnjs.cloudflare.com/ajax/libs/dialog-polyfill/0.5.6/dialog-polyfill.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dialog-polyfill/0.5.6/dialog-polyfill.min.css">

끝맺음

모달을 닫으려면 닫기 버튼에 다른 이벤트 핸들러를 추가하기만 하면 됩니다.

const closeModal = document.querySelector('#closeModal');
closeModal.addEventListener('click', function(){ 
  dialog.close(); 
  document.body.focus();
});

스크린 리더와 같은 보조 장치가 모달을 닫을 때 페이지의 주요 부분으로 돌아가는 것을 알 수 있도록 본문을 다시 포커스로 설정했습니다.

결론

이것을 모두 합치면 다음과 같은 결과를 얻습니다.


전체 예제는 this Repl link에서 볼 수 있습니다. 이 시리즈의 첫 번째 게시물이 유익한 정보가 되길 바라며 Nest One을 계속 지켜봐 주시기 바랍니다!