구글 크롬 135의 새로운 기능: COMMAND로 더 간편해진 웹 개발

by

안녕하세요, 오늘은 웹 개발자 분들을 위한 유용한 소식을 전해드리려고 합니다. 많은 분들이 사용하고 있는 구글 크롬의 최신 버전(135)에서 새로운 기능이 도입되었기 때문인데요, 그 기능은 바로 'COMMAND'와 'COMMANDFOR'입니다. 이제 더 직관적이고 선언적인 방법으로 버튼의 기능을 확장할 수 있게 됐습니다!

무엇이 달라졌나요?

크롬 135에서는 기존의 'popovertargetaction'과 'popovertarget' 속성을 개선하고 대체할 'COMMAND'와 'COMMANDFOR' 속성을 도입했습니다. 이것이 무엇을 의미하는지 간단히 살펴보겠습니다.

  • 동작의 선언적 관리: 이제 버튼이 특정 요소와 엮이는 방식을 간단히 속성으로 선언할 수 있게 되었습니다. 예전에는 복잡한 JavaScript 코드로 구현해야 했던 상태 관리가 훨씬 쉬워진 것이죠.

  • 향상된 접근성: 예를 들어, 메뉴를 열고 닫는 기능을 구현할 때 더 이상 JavaScript를 사용해 'aria-expanded' 속성을 조작할 필요가 없습니다. 이로 인해 접근성이 대폭 개선됐습니다.

COMMAND와 COMMANDFOR 예제

쉽게 이해될 수 있도록 예제를 들어보겠습니다. 다음 코드는 버튼을 눌렀을 때 팝오버 메뉴를 여는 기능을 포함하고 있습니다:

<button commandfor="my-menu" command="show-popover">Open Menu</button>
<div popover id="my-menu">
  <!-- 메뉴 내용이 여기에 포함됩니다 -->
</div>

위 예제에서 보듯이, 버튼은 'my-menu'라는 ID를 가진 요소를 대상으로 'show-popover' 명령을 실행합니다. 실제로는 JavaScript 없이도 이런 기능을 구현할 수 있습니다.

사용자 정의 명령의 매력

뿐만 아니라 HTML을 통해 사용자 정의 명령을 만들 수도 있습니다. 개발자 여러분이 직접 명령을 정의하고, 그것을 컴포넌트로 노출시킬 수 있는 길이 열린 것이죠. 예를 들어, 이미지 회전과 같은 기능도 선언적 접근 방식으로 구현할 수 있습니다.

앞으로의 전망

현재 구글 크롬 팀은 이 기능을 더욱 확장할 계획이라고 합니다. 향후 명령들이 추가되면서 버튼과 행동간의 연결이 더욱 강력하고 다양해질 것입니다. 특히 그간 복잡한 JavaScript 코드가 필요했던 다양한 기능이 훨씬 간편해질 것입니다.

이 새로운 업데이트는 웹 개발자들에게 많은 기회를 제공할 것이며, 적절히 활용한다면 웹 인터페이스의 사용자 경험을 크게 향상시킬 수 있을 것입니다. 새로운 기능들을 직접 시도해 보시고 여러분의 개발 삶을 한층 더 편리하게 만들어 보세요!

Leave a Comment