웹 개발 생태계팀 - 2월 마무리

Mariko Kosaka
X
웹 개발자 생태계팀에서 어떤 일이 있었는지 돌아보는 월별 마무리의 첫 번째 시간에 오신 것을 환영합니다. ✨

엔지니어와 커뮤니케이터로 구성된 팀이며, 이 웹사이트의 웹 기초와 새로운 포털인 web.dev와 같은 자료와 코드 샘플을 만듭니다. YouTube 채널에서 작업한 내용을 확인하고 @ChromiumDev를 팔로우하는 것도 잊지 마세요. :)

2월은 짧은 달이지만 콘텐츠가 부족하지는 않습니다. 팀의 대규모 출시부터 시작해 보겠습니다

발표곡

Workbox

반가운 소식입니다. Workbox 4.0이 불과 며칠 전에 출시되었습니다.🎉 이 버전에는 workbox-window와 같은 멋진 새 기능과 기존 워크박스 패키지의 개선사항이 포함되어 있습니다. 이미 Workbox를 사용 중인 경우 v3에서 v4로의 이전 가이드를 확인하세요. 기존 프로젝트에서 Workbox를 사용하는 방법이 궁금하신가요? 원하는 번들러와 함께 사용하는 방법에 관한 가이드를 참고하세요. 문제 해결에 도움이 되는 워크박스가 무엇인가요? State of the Web Show에서 서비스 워커에 대한 인터뷰를 확인하세요.

lit-html 및 LitElement

polymer 프로젝트팀은 차세대 웹 개발 라이브러리 2가지인 lit-html 및 LitElement의 안정적인 출시 작업을 진행했습니다. 사용해 보시겠어요? LitElement 사용해 보기 가이드로 시작하세요. 📝

신뢰할 수 있는 웹 활동

Chrome 72 출시와 함께 신뢰할 수 있는 웹 활동 (TWA)이 시장에 출시되었습니다. TWA를 사용하면 Android 활동 내에서 전체 화면 Chrome을 사용할 수 있으므로 웹 콘텐츠를 app- Sphere로 가져올 수 있습니다. 📱 이 시작 가이드를 확인하거나 @svenbudak에서 Google Play 스토어에 PWA를 추가한 방법을 알아보세요.

다음 단계

Chrome 73 안정화 버전 (3월 12일)이 다가오고 있으며, 흥미로운 기능이 많이 준비되어 있습니다.

V8 - Chrome의 JavaScript 엔진에는 Object.fromEntries 및 String.prototype.matchAll를 비롯하여 여러 업데이트가 있습니다. v8 출시 노트를 확인하세요.

웹에서 오디오 및 동영상으로 작업하시나요? 하드웨어 미디어 키 지원이 도입되었으며 PIP 모드 창의 '광고 건너뛰기'가 오리진 트라이얼로 제공됩니다. 자세한 내용은 Chrome 73의 오디오/동영상 업데이트를 참고하세요.

오리진 트라이얼과 관련하여 가져오기 우선순위를 사용하여 가져오기 우선순위에 대비하면 개발자는 <script>, <img> 또는 <link> 요소의 중요도를 설정하여 브라우저에 로드 방법을 제공할 수 있습니다. 이 기능은 아직 실험 단계에 있으므로 사용해 보시고 의견을 보내주세요.

렌더링 성능은 항상 최우선 순위입니다. Chrome 73에서는 루트 타겟 (창, 문서 또는 본문)에 등록된 wheel 및 mousewheel 리스너가 기본적으로 수동 리스너가 되어 기본적으로 휠 스크롤을 빠르게 제공합니다.

새로운 기능이 출시됨과 동시에 서비스가 종료되므로 Chrome 73의 지원 중단 및 삭제도 확인하세요.

신규 개발

근처 브라우저에서도 지원하기 위해 작업 중인 몇 가지 기능을 소개합니다.

Google에서는 교차 사이트 스크립팅을 방지하기 위해 신뢰할 수 있는 유형이라는 새 API를 개발하고 있습니다. 신뢰할 수 있는 유형을 선택 (콘텐츠 보안 정책을 통해)하면 문서가 DOM 삽입에서 차단됩니다. Google에서는 이와 관련된 더 많은 코드 예와 가이드를 제공하기 위해 노력하고 있지만 그동안 신뢰할 수 있는 유형에 관해 자세히 알아보고 사용해 보세요.

Chrome에서 뒤로/앞으로 버튼을 누르는 속도가 곧 매우 빨라집니다. 사용자가 페이지에서 나갈 때 메모리 내 페이지를 캐시하기 위한 새로운 뒤로-앞으로 캐시를 살펴보고 있습니다. 이 게시물에서 bfcache에 관한 설명 및 프로토타입을 확인하세요.

마지막으로 Intersection Observer v2에서는 타겟의 실제 '가시성'을 추적하는 개념이 도입되었습니다.

우리가 고수할 작업

Google의 노력은 브라우저 기능으로 끝나지 않습니다. 또한 웹 애플리케이션의 성능을 살펴보고, 웹 앱을 빌드하고, 전 세계 웹 개발자를 돕기 위한 다양한 방법을 모색합니다. 다음은 이번 달에 저희가 준비한 몇 가지 사항입니다.

새 동영상 및 팟캐스트

마틴은 자바스크립트 검색엔진 최적화라는 새로운 시리즈를 시작합니다. 첫 번째 에피소드에서는 Google 검색에서 자바스크립트 사이트의 색인을 생성하는 방법을 다룹니다. 메긴은 최근 정기 모임에서 web.dev 프로젝트에 대한 고찰을 발표했습니다. 제이크와 수르마가 이미지 순환게재 실험에 대해 논의하는 새로운 HTTP203 팟캐스트 에피소드와 함께 돌아왔습니다.

또한 YouTube 채널에서 'New in Chrome', 'What's New in DevTools', 'The State of the Web'과 같은 프로그램을 정기적으로 운영하고 있습니다.

특별 인사

Puppeteer 예시를 본 적이 있으신가요? 작년에 에릭 비델만의 트윗인 "📯The 12 Days of Puppeteer 🤹 ♂️🎁"에서 보셨을 겁니다. 브라우저로 할 수 있는 작업에 대해 창의적으로 생각할 수 있는 멋진 Puppeteer 코드 샘플 모음입니다. 꼭 확인해 보세요.

(새로운 파트너 에릭에게 행운을 빕니다. 그동안 이용해 주셔서 감사합니다.)

요약

첫 월간 마무리가 어땠나요? 도움이 되었거나 개선 아이디어가 있다면 트위터 @kosamari로 알려주세요. ✅

여기에 도입된 기능을 사용하여 새로운 기능을 구축했거나 Google 도움말에 따라 코드베이스를 변경한 경우 @ChromiumDev로 알려주시기 바랍니다.

3월에는 모바일 웹 경험에 대해 더 자세히 알아보기 위해 인도로 떠난 분들이 있습니다. ✈️ 그곳에서 배운 내용을 공유해 드릴 수 있기를 기대하겠습니다.

다음 달에 뵙겠습니다👋