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

Mariko Kosaka
X
웹 개발자 생태계팀에서 지난 한 달 동안 있었던 일을 돌아보는 월간 실적 요약의 첫 번째 버전을 소개합니다.✨

저희는 이 웹사이트 웹 기본사항 및 새로운 포털 web.dev와 같은 도움말과 코드 샘플을 제작하는 엔지니어 및 커뮤니케이터로 구성된 팀입니다. YouTube 채널에서 저희의 작업을 확인하고 @ChromiumDev를 팔로우해 주세요. :)

2월은 짧은 달이지만 콘텐츠는 결코 짧지 않습니다. 먼저 팀의 주요 출시 소식을 살펴보겠습니다.

출시

Workbox

바로 며칠 전에 Workbox 4.0이 출시되었습니다.🎉 이 버전에는 workbox-window와 같은 멋진 새 기능과 많은 기존 Workbox 패키지의 개선사항이 포함되어 있습니다. 이미 Workbox를 사용 중인 경우 v3에서 v4로의 이전 가이드를 확인하세요. 기존 프로젝트에서 Workbox를 사용하는 방법을 알아보려면 다음은 원하는 번들러와 함께 사용하는 방법에 관한 가이드입니다. Workbox가 어떤 문제를 해결하는 데 도움이 되는지 잘 모르시겠다면 State of the Web 프로그램에서 서비스 워커에 관한 인터뷰를 확인하세요.

lit-html 및 LitElement

polymer 프로젝트의 팀은 차세대 웹 개발 라이브러리인 lit-html 및 LitElement의 안정화 버전을 출시하기 위해 분주하게 노력하고 있습니다. 사용해 보시겠어요? LitElement 사용해 보기 가이드부터 시작해 보세요 📝

신뢰할 수 있는 웹 활동

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

향후 계획

Chrome 73 안정화 버전 (3월 12일)이 출시될 예정이므로 다루어야 할 흥미로운 기능이 많습니다.

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

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

출처 체험판에 관해 말하자면 가져오기 우선순위를 사용하여 가져오기 우선순위에 대비하세요. 개발자는 <script>, <img> 또는 <link> 요소의 중요성을 설정하여 브라우저에 요소를 로드하는 방법을 제공할 수 있습니다. 아직 실험 단계이므로 사용해 보고 의견을 보내주세요.

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

새로운 기능을 소개하는 동시에 지원 중단되는 기능도 있으니 Chrome 73의 지원 중단 및 삭제도 확인하세요.

신규 개발

다음은 YouTube에서 진행 중이며 곧 브라우저에 적용될 몇 가지 기능입니다.

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

Chrome에서 뒤로 및 앞으로 버튼을 누르면 곧 정말 빠르게 이동할 수 있습니다. Google에서는 사용자가 다른 곳으로 이동할 때 메모리에 페이지를 캐시하는 새로운 뒤로/앞으로 캐시를 모색하고 있습니다. 이 게시물에서 bfcache의 설명 및 프로토타입을 확인하세요.

마지막으로 교차 관찰자 v2에서는 타겟의 실제 '표시'를 추적하는 개념을 도입합니다.

현재 조정 중인 사항

Google의 노력은 브라우저 기능에서 그치지 않습니다. 또한 웹 애플리케이션 성능을 살펴보고 웹 앱을 빌드하며 전 세계 웹 개발자를 지원하는 다양한 방법을 모색합니다. 이번 달에 이루어진 업데이트 사항을 몇 가지 소개해 드립니다.

새로운 동영상 및 팟캐스트

마틴이 JavaScript SEO라는 새 시리즈를 시작합니다. 첫 번째 에피소드는 Google 검색에서 JavaScript 사이트의 색인을 생성하는 방법에 관한 내용입니다. 멕긴은 최근에 Meetup에서 web.dev 프로젝트에 관한 생각을 발표했습니다. 제이크와 Surma가 이미지 회전 실험에 대해 논의하는 새로운 HTTP203 팟캐스트 에피소드로 돌아왔습니다.

YouTube 채널에서는 'Chrome의 새로운 기능', 'DevTools의 새로운 기능', '웹 상태'와 같은 정기 프로그램도 제공합니다.

특별 언급

Puppeteer 예시를 확인해 보셨나요? 작년 에릭 비델만의 트윗 '📯Puppeteer 12일 🤹🏻‍♂️🎁'에서 확인했을 수도 있습니다. Puppeteer 코드 샘플의 멋진 모음으로, 브라우저로 할 수 있는 작업에 대해 창의적으로 생각할 수 있습니다. 한번 확인해 보세요.

에릭님, 새로운 도전에 행운이 함께하길 바랍니다. 그동안 이용해 주셔서 감사합니다.)

요약

첫 번째 월간 실적 요약은 어떠셨나요? 즐겁게 시청하셨거나 개선 아이디어가 있으면 트위터 @kosamari를 통해 알려주세요. ✅

여기에 소개된 기능을 사용하여 새로운 것을 빌드했거나 도움말을 바탕으로 코드베이스를 변경한 경우 @ChromiumDev에서 알려주세요.

3월에 YouTube에서는 모바일 웹 환경에 대해 자세히 알아보기 위해 인도로 떠납니다 ✈️ 인도에서 얻은 정보를 공유해 드리겠습니다.

다음 달에 뵙겠습니다👋