2025년 3월 기준 월간 요약

Jeremy Wagner

게시일: 2025년 3월 31일

한 달이 지났고 지난 기준점 월간 요약 이후 많은 일이 있었습니다. 이번 호에서는 web.dev에 게시된 몇 가지 게시물, 출시된 몇 가지 새로운 기준 기능, 커뮤니티의 도구 업데이트를 요약합니다.

ESLint 0.6.0이 출시되었습니다.

최근에 ESLint에서 CSS 린팅 지원을 출시했다는 소식을 전해 드렸습니다. 이번 출시의 일환으로 프로젝트에서 사용하는 CSS 기능을 린트하고 특정 기준점 기준점에 도달하는지 확인하는 새로운 ESLint 규칙인 require-baseline가 포함되었습니다.

최근 ESLint는 require-baseline 규칙의 이름을 use-baseline로 바꾸는 중요한 새 업데이트가 포함된 @eslint/css 패키지 버전 0.6.0을 출시했습니다. 이 업데이트는 사소해 보이지만 규칙의 가독성이 개선됩니다. 중첩된 CSS 블록을 린트하는 use-baseline 규칙의 추가 기능과 같은 다른 몇 가지 중요한 기능과 버그 수정사항도 이 버전에 포함되어 있습니다. 이전 버전의 @eslint/css를 사용 중인 경우 이 업데이트를 확인하세요.

웹 플랫폼 대시보드를 쿼리하는 방법

이달 초에 웹 플랫폼 대시보드 쿼리에 관한 게시물을 게시했습니다. 이 대시보드는 HTTP API를 통해서도 쿼리할 수 있지만 프런트엔드에서도 쿼리할 수 있습니다. API를 쿼리하여 특정 기준점 기준점에 도달한 기능을 찾을 수 있으므로 기준점 도구에 유용할 수 있습니다.

이 API는 특정 기능에 관한 정보를 빠르게 가져와야 하는 도구에 유용할 수 있습니다. 예를 들어 이 유형의 도구를 사용하여 최근에 기준 출시 또는 정식 버전으로 출시된 기능을 일정 간격으로 알려주는 스크립트를 작성할 수 있습니다. 이 방법이 유용하다고 생각되면 게시물을 읽어보세요.

기준 및 폴리필에 대한 생각

기준점의 사명은 안전하게 사용할 수 있는 기능을 명확하게 하는 것입니다. 하지만 명확하게 한다고 해서 웹 애플리케이션에 적합한 방식으로 기능을 채택하는 방법을 생각해야 합니다. 폴리필은 이 프로세스의 중요한 부분입니다. 기준은 기능이 새로 제공되는지 또는 광범위하게 제공되는지에 대해 폴리필을 고려하지 않으며 폴리필을 사용할지 여부를 알려주지 않습니다. 이 결정은 애플리케이션에 따라 다르지만 중요한 고려사항입니다.

최근에 기준점과 폴리필에 대한 생각에 관한 게시물을 게시했는데, 이 게시물은 기준점과 폴리필을 사용하는 방법을 생각하는 데 도움이 되는 프레임워크를 제공합니다. 새로운 기준이 되거나 광범위하게 사용 가능해지는 기능을 통해 폴리필의 필요성이 줄어들기를 바랍니다. 폴리필은 개발 도구 상자에서 유용한 도구임에는 틀림없지만 단점도 있습니다. 웹사이트 성능에 부정적인 영향을 미칠 수 있으며 경우에 따라 접근성 문제가 발생할 수도 있습니다. 이 가이드가 이 어려운 질문을 해결하는 데 도움이 되기를 바랍니다.

contenteditable="plaintext-only"가 이제 기준점으로 새로 제공됩니다.

HTML 요소의 contenteditable 속성을 사용하면 사용자가 텍스트 필드인 것처럼 콘텐츠를 변경할 수 있습니다. 즉, 예를 들어 <p> 요소에 속성을 배치하면 사용자가 <textarea>처럼 상호작용할 수 있습니다. 일부 사용 사례에서는 contenteditable를 사용하면 일반적인 양식 요소보다 유리합니다.

하지만 사용자가 수정 가능한 요소에 항목을 붙여넣을 때 붙여넣은 항목에 서식 있는 텍스트 형식이 포함될 수 있으므로 형식이 지정되지 않은 텍스트를 필드에 붙여넣으려는 사용자에게 불편을 줄 수 있습니다. contenteditable="plaintext-only" 속성/값 조합을 사용하면 이러한 일이 방지되며, 최근에 기준점으로 새로 사용할 수 있게 되었습니다. 자세한 내용은 공지사항 게시물을 참고하고 불필요한 내용 없이 텍스트를 붙여넣기만 원하는 사용자에게 더 나은 수정 환경을 제공하는 방법을 알아보세요.

Intl.DurationFormat가 이제 기준점으로 새로 제공됩니다.

웹사이트를 방문한 적이 있다면 어떤 이벤트가 시작되기 전 또는 종료된 후의 시간을 알려주는 텍스트를 보았을 것입니다. 이러한 텍스트는 '2일 6시간 3분'과 같은 문자열로 표시되는 경우가 많습니다. 이 데이터는 시의적절한 정보를 전달하는 데 유용하지만 라이브러리에서 제공하는 경우가 많습니다. 또한 이 정보를 여러 언어로 출력할 수도 있습니다.

최근에 기준으로 새로 제공된 다국어 기능인 Intl.DurationFormat를 입력합니다. Intl.DurationFormat 클래스를 사용하면 문자열로 형식을 지정할 시간 단위가 포함된 객체를 생성자에 전달할 수 있으며, 생각할 수 있는 거의 모든 언어로 할 수 있습니다.

const duration = {
  years: 1,
  hours: 20,
  minutes: 15,
  seconds: 35
};

// English output: '1 year, 20 hours, 15 minutes, 35 seconds'
new Intl.DurationFormat('en', { style: 'long' }).format(duration);

// German output: '1 Jahr, 20 Stunden, 15 Minuten und 35 Sekunden'
new Intl.DurationFormat('de', { style: 'long' }).format(duration);

// Spanish output: '1 año, 20 horas, 15 minutos y 35 segundos'
new Intl.DurationFormat('es', { style: 'long' }).format(duration);

흥미로운 점은 애플리케이션에서 라이브러리를 사용하여 이와 같이 문자열 형식을 지정하는 경우 곧 라이브러리 없이 이를 실행할 수 있으므로 사용자의 킬로바이트를 절약할 수 있다는 것입니다. 자세한 내용은 Intl.DurationFormat에 관한 공지사항 게시물을 읽고 이 편리한 새 기능을 활용하는 방법을 알아보세요.

2025년 W3C 브레이크아웃 데이 기준

최근 W3C는 3월 26일에 2025년 버전의 브레이크아웃 데이를 개최하여 회원들이 다양한 주제에 대해 발표했으며 기준에 관한 유용한 세션이 제공되었습니다.

기준선을 처음 사용하는 경우 이 세션에서 빠르게 개요를 파악할 수 있습니다. 이 가이드에서는 '신규' 및 '널리 사용 가능' 개념과 같은 기준점의 기본사항을 다루지만, 이러한 정의가 데이터에 의해 결정되는 방식도 다룹니다. browser-compat-data에서 시작하여 어떤 기능이 어떤 기준점 기준점에 해당하는지 파악하는 데 도움이 되는 web-features 데이터에 이르기까지 다룹니다.

이 세션을 놓쳤더라도 걱정하지 마세요. 세션의 슬라이드는 이미 제공되므로 궁금한 점이 있으면 살펴보세요.

완료했습니다.

이번 월간 요약에서는 월말뿐만 아니라 분기말도 함께 살펴봅니다. 이전 버전의 다이제스트를 놓쳤다면 1월 및 2월 버전을 확인하여 올해 1분기에 기준에 적용된 모든 사항을 알아보세요. 평소와 같이 기준치와 관련하여 누락된 사항이 있으면 Google에 알려주세요. 향후 버전에 반영될 수 있도록 하겠습니다. 한 달 후에 뵙겠습니다.