게시일: 2025년 3월 4일
기준은 Chrome팀에서 시작되었으며 현재 WebDX 커뮤니티 그룹에서 정의합니다. 기준은 브라우저 간에 상호 운용되는 기능을 명확하게 합니다. 모든 주요 브라우저 엔진에서 사용할 수 있는 기능과 사용할 수 없는 기능을 식별하는 데 도움이 되도록 설계되었습니다. 그러나 이러한 기능을 식별할 방법이 필요합니다.
다행히 웹 플랫폼 대시보드를 사용하여 기준 새로 또는 널리 사용 가능한 기능을 쿼리할 수 있습니다. 이 대시보드는 web-features npm 패키지로 구동됩니다. HTTP API를 사용하여 이 정보에 액세스하여 기준 데이터를 도구 워크플로에 통합할 수도 있습니다. 이 가이드에서는 방법을 설명합니다.
웹 플랫폼 대시보드의 관련 기준 쿼리 문법
웹 플랫폼 대시보드는 특정 쿼리 문법을 사용하여 웹 기능 지원을 검색하는 데 도움을 줍니다. 이 쿼리 문법은 대시보드 자체에서 직접 사용할 수 있습니다.
baseline_status:newly 검색 쿼리를 사용하여 기준 새로 사용 가능한 기능만 표시하는 검색을 기반으로 합니다.
페이지 상단의 검색창에 입력하면 웹 기능을 필터링하는 데 사용할 수 있는 여러 쿼리 매개변수가 표시됩니다.
쿼리 문법은 표현력이 뛰어나 대시보드에 표시되는 웹 기능을 필터링하는 방법을 매우 유연하게 지정할 수 있습니다. 다음 스크린샷은 id 쿼리 매개변수를 사용하여 특정 기능으로 범위를 좁히는 방법을 보여줍니다.
id 매개변수 값은 html입니다. 이는 <html> 요소에 대한 지원을 나타내며, 이는 (놀랍지 않게도) 기준 널리 사용 가능합니다.
쿼리 문법은 문서화되어 있지만 기능의 기준 데이터를 찾는 데 모든 문법을 알 필요는 없습니다. 대시보드에서 이러한 옵션을 사용할 수 있지만 특히 유용한 옵션은 다음과 같습니다.
baseline_status: 이 매개변수를 사용하여 세 가지 열거된 값으로 기능을 필터링합니다.limited: 브라우저 지원이 제한된 기능을 반환합니다. 이 값으로 필터링하면 기준 상태에 도달하지 않은 기능만 수신됩니다.newly: 기준 새로 사용 가능한 기능을 반환합니다.widely: 기준 널리 사용 가능한 기능을 반환합니다. 이는 기준이 30개월 이상인 기능입니다. 브라우저 지원 또는 폴리필에 대해 걱정하지 않고 사용할 수 있는 기능입니다.
baseline_date:YYYY-MM-DD..YYYY-MM-DD형식을 사용하여 기능이 기준에 도달한 시점의 상한과 하한을 지정합니다. 예를 들어 1년 동안의 모든 기능을 찾으려면2024-01-01..2025-01-01과 같은 값을 사용합니다.id: 지정된 기능의 식별자입니다. 이러한 식별자는 web-features 패키지에 정의되어 있습니다. 예를 들어 의 기능 항목은Promise.try()ID에 매핑됩니다.promise-trygroup: 기능의 여러 열거된 그룹 이름 중 하나입니다. 웹 플랫폼 기능의 특정 하위 집합만 쿼리하려는 경우 유용한 기준입니다. 예를 들어css값을 사용하여 CSS 기능 목록으로 필터링할 수 있습니다.
대시보드 프런트엔드는 확실히 유용하지만 직접 쿼리할 수 있는 HTTP API를 기반으로 합니다. 예를 들어 새로 사용 가능한 모든 기준 기능을 가져오는 엔드포인트는 다음과 같습니다.
https://api.webstatus.dev/v1/features?q=baseline_status:newly
JSON 응답 구조
HTTP API에서 수신하는 JSON 응답은 모든 기능에 대해 일관된 형식을 갖습니다. 반환된 응답에는 최상위 수준에 data 속성이 포함되어 있습니다. 이 속성에는 일치하는 모든 기능의 배열이 포함되어 있습니다. JSON 응답에서 사용할 수 있는 모든 필드의 전체 목록은 아니지만 기준과 관련하여 유용한 필드는 다음과 같습니다.
baseline: 다음 하위 필드가 있는 지정된 기능의 기준 상태에 관한 일반적인 정보를 포함합니다.status: 기능의 기준 상태입니다. 값은limited,newly또는widely일 수 있습니다. 참고:status값이limited인 경우 이 하위 필드만 있습니다.low_date: 지정된 기능이 기준 새로 사용 가능하게 된 날짜를 나타냅니다. 이 필드는status가newly또는widely인 경우에만 표시됩니다.high_date: 지정된 기능이 기준 널리 사용 가능하게 된 날짜를 나타냅니다. 이 필드는status가widely인 경우에만 사용할 수 있습니다.
feature_id: 기능의 ID입니다. 예를 들어 CSS 그리드의 경우 값은"grid"입니다.name: 기능의 형식이 지정된 이름입니다. 경우에 따라feature_id와 비슷할 수 있지만 일반적으로는 다릅니다. 예를 들어feature_id의Promise.try()값은"promise-try"인 반면 동일한 기능의name필드는"Promise.try()"입니다.spec: 이 필드에는 사양 및 기타 리소스에 대한 링크 배열인links라는 하위 필드가 포함되어 있습니다.
특정 지원 브라우저가 기능을 구현한 버전, 웹 플랫폼 테스트에 관한 데이터, 관심이 있을 수도 있고 없을 수도 있는 기타 사항에 관한 정보가 포함된 다른 필드도 있습니다.
쿼리 예
사용 가능한 쿼리 매개변수에 관한 간단한 설명을 확인했으므로 도구 및 스크립트에서 워크플로에 유용할 수 있는 웹 상태 기능을 선택하는 데 사용할 수 있는 쿼리 예를 살펴보세요.
단일 기능의 데이터 가져오기
API에 익숙해지는 좋은 방법은 단일 웹 기능의 데이터를 가져오는 기본 예시로 시작하는 것입니다.
// Specify and encode the query for a query string:
const query = encodeURIComponent('id:grid');
// Construct the URL:
let url = `https://api.webstatus.dev/v1/features?q=${query}`;
// Fetch the resource:
const response = await fetch(url);
if (response.ok) {
// Convert the response to JSON:
const { data } = await response.json();
// Log data for each feature to the:
console.log(data);
}
이 경우 기준 널리 사용 가능한 CSS 그리드의 기능 지원 정보를 가져오기 위해 grid 값이 있는 id 매개변수를 지정합니다. 예를 들어 이 정보를 사용하여 기능 사용을 감지하고 지원에 대해 걱정하지 않고 모든 최신 브라우저 엔진에서 기능을 사용할 수 있음을 사용자에게 알릴 수 있습니다.
하지만 이는 시작일 뿐이며 HTTP API는 단일 기능의 데이터를 가져오는 것보다 훨씬 더 많은 작업을 수행할 수 있습니다.
기준 새로 및 널리 사용 가능한 모든 기능 가져오기
기준 새로 또는 널리 사용 가능한 모든 기능을 가져오는 스크립트를 사용하고 싶다고 가정해 보겠습니다. 예를 들어 일정 간격으로 실행되는 스크립트가 있고 제한된 가용성에서 기준 상태로 기능이 나타날 때 변경되는 업데이트된 목록을 가져오려는 경우에 유용할 수 있습니다.
const query = encodeURIComponent('-baseline_status:limited');
let url = `https://api.webstatus.dev/v1/features?q=${query}`;
const response = await fetch(url);
if (response.ok) {
const { data } = await response.json();
console.log(data);
}
이 쿼리는 모든 기준 새로 및 널리 사용 가능한 기능을 가져오는 것이 아니라 처음 100개만 가져옵니다. 검색된 기능 수가 이를 초과하는 경우 JSON 응답의 최상위 수준에 최대 2개의 하위 필드를 포함할 수 있는 metadata 필드가 있습니다.
next_page_token: 백엔드에 대한GET요청의 쿼리 문자열에 추가할 수 있는 토큰이 포함된 문자열입니다. 이를 사용하고 webstatus.dev 백엔드에서 데이터를 다시 가져오면 일치하는 기능의 다음 일괄 처리가 반환됩니다. 참고: 현재 쿼리가 100개 미만의 결과를 반환하거나 현재 쿼리가 결과 집합의 끝에 있는 경우 이 필드를 사용할 수 없습니다.total: 현재 쿼리에 사용할 수 있는 총 기능 수를 나타내는 정수입니다.
이러한 필드는 페이지 매김에 유용합니다. 이를 사용하여 많은 양의 데이터를 반환하는 쿼리의 모든 결과를 가져오는 다음 코드를 시도해 볼 수 있습니다.
async function queryWebStatusDashboard (query, token) {
const urlBase = 'https://api.webstatus.dev/v1/features?q=';
let queryUrl = `${urlBase}${encodeURIComponent(query)}`;
if (token) {
queryUrl += `&page_token=${encodeURIComponent(token)}`;
}
const response = await fetch(queryUrl);
if (response.ok) {
const { data, metadata } = await response.json();
console.log(data);
// See if there's a page token in this query:
if ('next_page_token' in metadata) {
const { next_page_token } = metadata;
queryWebStatusDashboard(query, next_page_token);
} else {
console.log('All results collected');
}
}
}
// Make the first query, and if there are more
// than 100 entries, the function will run
// recursively until all features are fetched
queryWebStatusDashboard('-baseline_status:limited');
기준 새로 사용 가능한 모든 CSS 기능 가져오기
CSS에 특별히 중점을 두는 엔지니어이고 기준 새로 사용 가능한 기능이 되는 CSS 기능에 관심이 있다고 가정해 보겠습니다. 이는 group 쿼리 값과 webstatus.dev를 쿼리할 때 AND 연산자를 사용하는 방법을 위한 완벽한 사용 사례입니다.
const query = encodeURIComponent('baseline_status:newly AND group:css');
let url = `https://api.webstatus.dev/v1/features?q=${query}`;
const response = await fetch(url);
if (response.ok) {
const { data } = await response.json();
console.log(data);
}
group에 css 값을 지정하면 기준 새로 사용 가능한 모든 기능을 쿼리할 수 있습니다. 기준 널리 사용 가능한 CSS 기능도 포함하도록 범위를 확장하려면 마지막 코드 샘플의 접근 방식을 사용하고 -baseline_status:limited AND group:css'와 같은 쿼리와 함께 부정 연산자를 사용할 수 있습니다.
쿼리할 수 있는 또 다른 필드는 snapshot 필드입니다. 이 필드는 특정 ECMAScript 기능 집합에 속하는 JavaScript 기능을 찾는 데 유용합니다. 다음 코드는 ecmascript-2023 스냅샷에 속하는 모든 기준 새로 사용 가능한 기능을 확인합니다.
const query = encodeURIComponent('baseline_status:newly AND snapshot:ecmascript-2023');
let url = `https://api.webstatus.dev/v1/features?q=${query}`;
const response = await fetch(url);
if (response.ok) {
const { data } = await response.json();
console.log(data);
}
기간 내 모든 기준 기능 가져오기
baseline_date 필드를 쿼리하여 특정 기간 내에 기준이 된 모든 기능을 찾을 수 있습니다.
const query = encodeURIComponent('baseline_status:widely AND baseline_date:2022-01-01..2022-12-31 AND group:css');
let url = `https://api.webstatus.dev/v1/features?q=${query}`;
const response = await fetch(url);
if (response.ok) {
const { data } = await response.json();
console.log(data);
}
이전 코드 샘플은 2022년의 어느 시점에서든 기준 널리 사용 가능하게 된 CSS 기능을 쿼리합니다. baseline_date의 쿼리 문법을 사용하면 시작일과 종료일을 ..로 구분하여 지정할 수 있습니다.
결론
이 가이드의 쿼리는 webstatus.dev 백엔드를 쿼리하는 방법을 실험하기 위한 시작점으로 사용됩니다. 사용 가능한 쿼리 매개변수의 수에 관계없이 애플리케이션에 맞는 결과를 얻을 수 있습니다.
웹 플랫폼 대시보드의 HTTP API를 쿼리하는 방법을 알면 작업에 유용할 수 있는 도구를 빌드하고 프로젝트에 사용하려는 기능이 충분한 브라우저 지원을 제공하는지 확인할 수 있습니다. 즉, 안전하게 사용할 수 있는 최신 브라우저 기능을 사용하여 웹 애플리케이션을 빌드하여 훨씬 더 즐거운 개발자 환경을 제공할 수 있습니다.