Chrome은 더 나은 웹을 만들기 위해 오픈소스 프레임워크와 협력하고 있습니다
Chrome은 웹 프레임워크 생태계에 적극적으로 기여하고 있으며, Chrome Dev Summit 2019의 강연에서는 지난 한 해 동안 Google에서 진행한 작업을 다룹니다.
추가 세부정보 및 리소스가 포함된 강연 요약본을 계속 읽어보세요.
어떻게 하면 더 나은 웹을 만들 수 있을까요?
Chrome팀의 목표는 모두 웹을 개선하는 것입니다. Google은 Chrome을 구동하는 핵심 JavaScript 및 WebAssembly 엔진인 V8과 브라우저 API를 개선하여 개발자가 훌륭한 웹페이지를 빌드하는 데 도움이 되는 기능을 갖추기 위해 노력하고 있습니다. 또한 Google은 다양한 방식으로 오픈소스 도구에 기여함으로써 현재 프로덕션 단계에 있는 웹사이트를 개선하기 위해 노력하고 있습니다.
대부분의 웹 개발자는 가능한 경우 오픈소스 도구를 사용하며 완전한 커스텀 인프라를 빌드하는 것을 선호하지 않습니다. 클라이언트 측 JavaScript 프레임워크와 UI 라이브러리가 오픈소스 사용에서 차지하는 비중이 증가하고 있습니다. 가장 많이 사용되는 세 가지 클라이언트 측 프레임워크 및 라이브러리인 React, Angular, Vue의 데이터는 다음을 보여줍니다.
- MDN의 첫 번째 연례 웹 개발자 및 디자이너 설문조사 참가자의 72% 는 이러한 프레임워크 및 라이브러리 중 하나 이상을 사용합니다.
- HTTP Archive에서 분석한 상위 500만 개 URL 중 320,000개 이상의 사이트에서 이러한 프레임워크 및 라이브러리 중 하나 이상을 사용합니다.
- 사용 시간별로 그룹화하면 상위 100개 URL 중 30개가 이러한 프레임워크 및 라이브러리 중 하나 이상을 사용합니다. (내부 데이터에 대한 조사가 진행되었습니다.)
이는 오픈소스 도구를 개선하면 웹이 직접적으로 향상되기 때문에 Chrome 엔지니어는 외부 프레임워크 및 라이브러리 작성자와 직접 협업하기 시작했습니다.
웹 프레임워크 참여
웹페이지를 빌드하고 구조화하는 데 일반적으로 사용되는 프레임워크는 다음 두 가지 범주로 나뉩니다.
- UI 프레임워크 (또는 라이브러리 (예: Preact, React, Vue)는 구성요소 모델 등을 통해 애플리케이션의 뷰 레이어를 제어하는 기능을 제공합니다.
- 웹 프레임워크(예: Next.js, Nuxt.js, Gatsby)는 서버 측 렌더링과 같은 독자적인 기능이 내장된 엔드 투 엔드 시스템을 제공합니다. 이러한 프레임워크는 일반적으로 뷰 레이어에 UI 프레임워크 또는 라이브러리를 활용합니다.
개발자는 프레임워크를 사용하지 않더라도 뷰 레이어 라이브러리, 라우터, 스타일 지정 시스템, 서버 렌더러 등을 연결하여 결국 자체 유형의 프레임워크를 만드는 경우가 많습니다. 웹 프레임워크는 독자적인 의견도 있지만 기본적으로 이러한 우려사항을 상당 부분 해결해 줍니다.
이 게시물의 나머지 부분에서는 Chrome팀의 기여를 비롯하여 최근 다양한 프레임워크와 도구에 적용된 여러 개선사항을 중점적으로 설명합니다.
Angular
Angular 팀은 프레임워크 버전 8에 여러 가지 개선된 기능을 제공했습니다.
- 차등 로드: 최신 브라우저에서 불필요한 polyfill을 최소화합니다.
- 지연 로드 경로의 표준 동적 가져오기 구문을 지원합니다.
- 웹 작업자 지원: 기본 스레드와 별도로 백그라운드 스레드에서 작업을 실행합니다.
- 기존 프로젝트의 경우 더 나은 재컴파일 성능과 번들 크기 감소를 제공하는 Angular의 새로운 렌더링 엔진인 Ivy를 미리보기 모드로 사용할 수 있습니다.
이러한 개선사항에 관한 자세한 내용은 'Angular 버전 8'을 확인하세요. Chrome팀은 내년에 더 많은 기능이 출시됨에 따라 긴밀하게 협력할 수 있기를 기대합니다.
Next.js
Next.js는 React를 뷰 레이어로 사용하는 웹 프레임워크입니다. Next.js는 많은 개발자가 클라이언트 측 프레임워크에서 기대하는 UI 구성요소 모델 외에도 다음과 같은 여러 가지 기본 제공 기본 기능을 제공합니다.
- 기본 코드 분할을 사용한 라우팅
- 컴파일 및 번들링 (Babel 및 webpack 사용)
- 서버 측 렌더링
- 페이지별 수준에서 데이터를 가져오는 메커니즘
- 캡슐화된 스타일 지정 (styled-jsx 사용)
Next.js는 축소된 번들 크기에 맞게 최적화되며, Chrome팀은 성능 개선에 도움이 될 영역을 파악하는 데 도움을 주었습니다. 주석 (RFC)과 pull 요청 (PR)에 대한 요청을 확인하여 각 항목에 대해 자세히 알아볼 수 있습니다.
- 더 세분화된 번들을 내보내 여러 경로를 통해 가져오는 중복 코드의 양을 줄이는 향상된 웹팩 청크 전략(RFC, PR)
- module/nomodule 패턴을 사용한 차등 로드: 코드 변경 없이 Next.js 앱에서 총 자바스크립트 양을 최대 20% 까지 줄일 수 있습니다 (RFC, PR).
- User Timing API(PR)를 활용하여 성능 측정항목 추적이 개선되었습니다.
또한 Next.js를 사용하는 사용자 및 개발자 환경을 개선하기 위해 다음과 같은 다른 기능도 모색하고 있습니다.
- 동시 모드를 사용 설정하여 구성요소의 점진적 또는 부분 하이드레이션을 잠금 해제합니다.
- 모든 소스 파일과 생성된 애셋을 분석하여 더 나은 오류 및 경고 (RFC)를 표시하는 Webpack 기반 적합성 시스템입니다.
Nuxt.js
Nuxt.js는 Vue.js를 다양한 라이브러리와 결합하여 독자적인 설정을 제공하는 웹 프레임워크입니다. Next.js와 마찬가지로 이 API에는 즉시 사용 가능한 여러 기능이 포함되어 있습니다.
Google은 다양한 도구의 성능을 개선하기 위해 직접 노력하는 동시에 더 많은 오픈소스 프레임워크 및 라이브러리에 금전적 지원을 제공하기 위해 프레임워크 펀드를 확대했습니다. Google이 최근 Nuxt.js를 지원함에 따라 더 스마트한 서버 렌더링 및 이미지 최적화를 비롯한 몇 가지 기능이 조만간 제공될 예정입니다.
Babel
Google은 또한 언급된 거의 모든 프레임워크인 Babel에서 중요한 기본 도구의 성능을 개선하는 데 진전을 이루었습니다.
Babel은 최신 구문을 포함하는 코드를 다양한 브라우저가 이해할 수 있는 코드로 컴파일합니다.
@babel/preset-env를 사용하여 다양한 브라우저 타겟을 지정하여 선택한 모든 환경에 필요한 충분한 polyfill을 제공할 수 있는 최신 브라우저를 타겟팅하는 것이 일반화되었습니다. 타겟을 지정하는 한 가지 방법은 <script
type="module">를 사용하여 ES 모듈을 지원하는 모든 브라우저를 타겟팅하는 것입니다.
이러한 경우에 맞게 최적화하기 위해 새로운 사전 설정인 @babel/preset-modules를 출시했습니다. 브라우저 버그를 방지하기 위해 최신 구문을 이전 구문으로 변환하는 대신 preset-modules는 손상되지 않은 가장 가까운 최신 구문으로 변환하여 특정 버그를 각각 수정합니다. 따라서 최신 코드를 대부분의 브라우저에 거의 수정되지 않은 상태로 전달할 수 있습니다.
이미 preset-env를 사용하는 개발자도 곧 preset-env에도 통합되므로 별도의 조치를 취할 필요 없이 이러한 최적화의 이점을 누릴 수 있습니다.
다음 단계
더 나은 환경을 제공하기 위해 오픈소스 프레임워크 및 라이브러리와 긴밀하게 협력하는 것은 Chrome팀이 사용자와 개발자 모두에게 근본적으로 중요한 것이 무엇인지를 깨닫는 데 도움이 됩니다.
웹 프레임워크, UI 라이브러리 또는 모든 형태의 웹 도구 (번들러, 컴파일러, 린터) 작업을 하는 경우 프레임워크 펀드를 신청하세요.