2026년 7월 베이스라인 월간 요약
요약
본 기사는 웹 개발자들이 주목해야 할 최신 웹 플랫폼 기능과 API들을 소개합니다. Lighthouse의 Baseline Features 감사 사용법부터 React 앱을 대상으로 한 Modern Web Guidance 테스트, 그리고 2026년까지 추가될 네 가지 핵심 웹 API 등을 다룹니다. 이를 통해 개발자들은 구식 패턴을 식별하고 모범 사례를 적용할 수 있습니다.
핵심 포인트
- Lighthouse의 Baseline Features 감사로 최신 웹 기능 추적 가능
- React 앱에 대한 Modern Web Guidance 테스트가 진행됨
- Navigation API, container style queries 등 4가지 신규 API 소개
- Intl.Locale 및 Array.fromAsync() 등 새로운 표준화된 기능 사용 가능
월간 Baseline 요약에 오신 것을 환영합니다. 이번 에디션에서는 웹 개발자 커뮤니티가 공유한 웹 플랫폼 기능, 기사 및 도구들을 탐색해 보세요.
Lighthouse에서 Baseline 기능 감사 사용 가능
사이트가 사용하는 Baseline 기능을 추적하려면 Lighthouse의 Baseline Features audit를 사용하세요. The Baseline Features audit is now available in Lighthouse를 참조하여 이 감사가 어떻게 감사 과정에서 최신 웹 기능을 식별하는지 알아보세요.
React 앱에 대한 Modern Web Guidance 테스트
Ahmad Alfy가 프로덕션 React 애플리케이션을 대상으로 Modern Web Guidance를 테스트하여 에이전트 코딩 스킬이 실제 코드베이스에서 어떻게 수행되는지 확인했습니다. Testing Google's "modern-web-guidance" skill against a real React app를 읽고 이것이 어떻게 구식 패턴을 식별하고 현재의 모범 사례를 제시하는지 알아보세요.
Baseline 2026: 코딩 방식을 바꾼 4가지 API
Dennis Morello가 Navigation API, container style queries, :open, 그리고 Math.sumPrecise()를 포함하여 2026년에 Baseline에 도달한 네 가지 웹 플랫폼 API를 소개합니다. Baseline 2026: 4 APIs That Changed How I Code를 참조하여 이러한 추가 기능들이 외부 의존성을 제거하고 내장된 플랫폼 기능을 사용하는 방법을 보여주는 것을 확인해 보세요.
Baseline에서 새로 사용 가능한 기능들
다음 기능들은 모든 핵심 브라우저 엔진에서 지원되며, 이제 Baseline에서 새롭게 사용할 수 있게 되었습니다.
Intl.Locale
국제화 및 로케일 식별자 처리가 Intl.Locale로 더 쉬워졌습니다. Intl.Locale 객체는 사용자 정의 문자열 파싱 로직 없이 언어, 스크립트, 지역 하위 태그와 같은 유니코드 로케일 태그를 구문 분석(parse), 조작(manipulate) 및 쿼리(query)하는 표준 방법을 제공합니다. Intl.Locale에 대한 MDN 문서를 참조하세요.
Baseline에서 광범위하게 사용 가능한 기능들
이러한 기능들은 이제 모든 주요 브라우저 엔진에서 충분히 지원되어 Baseline Widely available로 간주할 수 있으며, 폴리필(polyfill) 없이 안전하게 사용할 수 있습니다.
Array.fromAsync()
비동기 이터러블을 배열로 바로 변환하고 싶다면 Array.fromAsync()를 사용하세요.
이제 상호 운용 가능합니다. 이는 Array.from()과 유사하게 작동하지만, 비동기 데이터 스트림을 위해 특별히 구축되었습니다. 더 자세한 정보는 MDN의 Array.fromAsync() 문서를 참조하십시오.
이미지 파일 유형 및 형식 가이드
웹에 적합한 이미지를 선택하는 것은 많은 옵션을 포함합니다. 업데이트된 MDN 가이드는 최신 이미지 포맷에 대한 브라우저 지원을 상세히 설명하여 사이트의 이미지 전략을 세우는 데 도움을 줍니다. 더 자세한 정보는 MDN Image file type and format guide를 참조하십시오.
rect()
CSS 함수
CSS에서 직사각형 클립 경로 및 오프셋 경로를 정의하는 것은 rect() 기본 도형 함수를 사용하면 훨씬 깔끔해집니다. 이 함수를 사용하면 포함 블록(containing block) 가장자리로부터의 안쪽 거리(inset distances)를 직접 지정할 수 있습니다. 구문에 대한 더 많은 정보는 MDN의 rect() 문서를 참조하십시오.
마무리!
이번 달 요약은 여기까지입니다. 만약 놓친 Baseline 업데이트나 커뮤니티 게시물이 있다면, 다음 호에 포함될 수 있도록 팀에게 알려주십시오. Baseline에 대해 질문이나 피드백이 있으시면 이슈 트래커(issue tracker)에 이슈를 제기해 주십시오.
AI 자동 생성 콘텐츠
본 콘텐츠는 Web.dev (Google)의 원문을 AI가 자동으로 요약·번역·분석한 것입니다. 원 저작권은 원저작자에게 있으며, 정확한 내용은 반드시 원문을 확인해 주세요.
원문 바로가기