이 글은 web.dev 엔지니어링 블로그의 첫 번째 게시물입니다. Google은 앞으로 몇 달 동안 작업 과정에서 얻은 활용 가능한 분석 정보를 공유할 수 있기를 바랍니다. 엔지니어링 블로그 태그가 포함된 게시물을 기대해 주세요. 여기서는 정적 사이트의 빌드 프로세스와 (선택사항) 웹 구성요소에서 지원되는 자바스크립트입니다.
web.dev에서는 최신 웹 환경 빌드에 관한 콘텐츠를 제공하고 사이트의 성능을 측정할 수 있습니다. 경험이 풍부한 사용자는 측정 페이지가 Lighthouse의 인터페이스에 불과하며, Chrome의 DevTools에서도 사용할 수 있다는 사실을 깨닫게 될 것입니다. web.dev에 로그인하면 사이트에서 정기적으로 Lighthouse 감사를 실행하여 시간 경과에 따른 점수 변화를 확인할 수 있습니다. 꽤 특별하다고 생각되는 측정 페이지를 나중에 다시 방문하겠습니다. 🎊
소개
기본적으로 web.dev는 마크다운 파일 모음에서 생성된 정적 사이트입니다. Google에서 선택한 Eleventy는 마크다운을 HTML로 쉽게 변환할 수 있게 해주는 세련되고 확장 가능한 도구이기 때문입니다.
또한 type="module"(async 및 await 포함)를 지원하는 브라우저에만 제공되는 최신 자바스크립트 번들도 사용합니다.
또한 상시 브라우저에서는 지원되지만 이전 버전에서는 지원되지 않는 기능을 사용할 수도 있습니다.
Google 사이트는 정적 사이트이므로 콘텐츠를 읽기 위해 자바스크립트가 필요하지는 않습니다.
정적 HTML을 생성하고 자바스크립트를 Rollup과 묶는 빌드 프로세스가 완료되면 web.dev를 간단한 정적 서버로 호스팅하여 테스트할 수 있습니다. 이 사이트는 거의 정적인 상태이지만 커스텀 Node.js 서버의 이점을 누릴 수 있도록 몇 가지 특별한 요구사항이 있습니다. 여기에는 향후 국제화 기능을 위해 사용자의 기본 언어를 파싱하는 코드 및 잘못된 도메인에 대한 리디렉션이 포함됩니다.
정적 생성
web.dev의 각 페이지는 마크다운으로 작성됩니다. 모든 페이지에는 각 게시물의 메타데이터를 설명하는 앞부분이 포함됩니다. 이 메타데이터는 각 페이지의 레이아웃으로 처리되어 제목, 태그 등을 만듭니다. 예를 들면 다음과 같습니다.
---
layout: post
title: What is network reliability and how do you measure it?
authors:
- jeffposnick
date: 2018-11-05
description: |
The modern web is enjoyed by a wide swath of people…
---
The modern web is enjoyed by a wide swath of [people](https://www.youtube.com/watch?v=dQw4w9WgXcQ), using a range of different devices and types of network connections.
Your creations can reach users all across the world...
이러한 프론트 이슈를 통해 작성자, 게시 날짜, 태그와 같은 임의의 속성을 정의할 수 있습니다. Eleventy는 지능적인 작업을 수행하려는 거의 모든 플러그인, 템플릿 또는 기타 컨텍스트에서 전면 문제를 데이터로 편리하게 노출합니다. 또한 데이터 객체에는 Eleventy가 데이터 캐스케이드라고 설명한 항목이 포함되어 있습니다. 데이터 캐스케이드는 각 개별 페이지, 페이지가 사용하는 레이아웃 및 계층 구조 폴더 구조에 있는 데이터로부터 가져온 다양한 데이터입니다.
고유한 각 레이아웃은 서로 다른 유형의 콘텐츠를 설명하며 다른 레이아웃에서 상속할 수 있습니다. web.dev에서는 이 기능을 사용하여 하나의 최상위 HTML 레이아웃을 계속 공유하면서 다양한 유형의 콘텐츠 (게시물 및 Codelab 등)의 프레임을 올바르게 조정합니다.
컬렉션
Eleventy는 임의의 콘텐츠 컬렉션을 구축하는 프로그래매틱 방식을 제공합니다. 이를 통해 페이지로 나누기 지원을 빌드하고 게시물 작성자를 위한 가상 페이지 (디스크에 일치하는 마크다운 파일이 없는 페이지)를 생성할 수 있습니다. 예를 들어 퍼머링크 표현식 (모든 작성자에 대해 템플릿이 다시 렌더링되도록)이 포함된 템플릿과 보조 컬렉션을 사용하여 작성자 페이지를 구성합니다.
예를 들어 Addy의 모든 게시물이 포함된 간단한 페이지가 생성됩니다.
제한사항
현재 Eleventy의 빌드 프로세스는 명령적이라기보다는 선언적이므로 이 프로세스에 쉽게 매료될 수 없습니다. 즉, 원하는 방식보다는 원하는 것을 설명합니다. Eleventy는 명령줄 인터페이스를 통해서만 호출할 수 있기 때문에 더 큰 빌드 도구의 일부로 실행하기 어렵습니다.
템플릿
web.dev는 원래 Mozilla에서 개발한 Nunjucks 템플릿 시스템을 사용합니다. Nunjucks에는 루프 및 조건문과 같은 일반적인 템플릿 기능이 있지만 추가 HTML을 생성하거나 다른 로직을 호출하는 shortcode를 정의할 수도 있습니다.
정적 콘텐츠 사이트를 구축하는 대부분의 팀과 마찬가지로 소규모로 시작한 후 단축 코드를 추가했습니다(지금까지는 약 20개). 이들은 대부분 추가로 HTML을 생성합니다 (맞춤 웹 구성요소 포함). 예를 들면 다음과 같습니다.
{% Aside %}
See how Asides work in the web.dev codebase
{% endAside %}
다음과 같이 나타납니다.
그러나 실제로는 다음과 같은 HTML이 만들어집니다.
<div class="aside color-state-info-text">
<p>See how Asides work in the web.dev codebase</p>
</div>
web.dev는 이 게시물에서 다루지 않지만 메타프로그래밍 언어의 한 유형으로 단축 코드를 사용하기도 합니다. 단축 코드는 인수를 허용하며 인수 중 하나가 포함된 콘텐츠입니다. 단축 코드는 아무것도 반환하지 않아도 되므로 상태를 빌드하거나 다른 동작을 트리거하는 데 사용할 수 있습니다. 🤔💭
스크립트 작성
앞서 언급했듯이 web.dev는 정적 사이트이므로 JavaScript 없이 type="module" 또는 기타 최신 코드를 지원하지 않는 이전 브라우저에서 제공하고 사용할 수 있습니다.
이는 누구나 web.dev에 액세스할 수 있도록 하는 저희 접근 방식에서 대단히 중요한 부분입니다.
그러나 최신 브라우저용 코드는 두 가지 주요 부분으로 구성됩니다.
- 전역 상태, 애널리틱스, SPA 라우팅을 위한 코드가 포함된 부트스트랩 코드
- 사이트를 점진적으로 개선하는 웹 구성요소용 코드 및 CSS
부트스트랩 코드는 매우 간단합니다. web.dev에서 새 페이지를 단일 페이지 애플리케이션 (SPA)으로 로드할 수 있으므로 로컬 <a href="..."> 요소의 클릭을 수신 대기하는 전역 리스너를 설치합니다.
SPA 모델은 사용자의 현재 세션에 대한 전역 상태를 유지하는 데 도움이 됩니다. 그렇지 않으면 새 페이지를 로드할 때마다 사용자의 로그인 상태에 액세스하기 위해 Firebase에 호출을 트리거할 수 있습니다.
또한 방문한 URL에 따라 사이트에 몇 가지 진입점을 지정하고 동적 import()를 사용하여 올바른 URL을 로드합니다.
이를 통해 사이트가 코드로 개선되기 전에 사용자가 필요로 하는 바이트 수를 줄일 수 있습니다.
웹 구성요소
웹 구성요소는
자바스크립트에서 제공하는 런타임 기능을 캡슐화하는 맞춤 요소이며, <web-codelab>와 같은 맞춤 이름으로 식별됩니다.
이 디자인은 web.dev와 같은 정적인 사이트에 적합합니다. 사이트의 HTML이 업데이트될 때 브라우저에서 요소의 수명 주기를 관리하며, 요소가 페이지에서 연결되거나 분리될 때 이를 올바르게 알립니다.
그리고 구식 브라우저는 웹 구성 요소를 완전히 무시하고 DOM에 남아있는 것을 렌더링합니다.
각 웹 구성요소는 connectedCallback(), disconnectedCallback(), attributeChangedCallback() 등의 메서드가 있는 클래스입니다.
web.dev의 맞춤 요소는 대부분 복잡한 구성요소의 간단한 기반을 제공하는 LitElement에서 상속됩니다.
web.dev는 여러 페이지에서 웹 구성요소를 사용하지만 측정 페이지보다 필요한 곳은 없습니다. 다음 두 가지 요소는 이 페이지에 표시되는 기능의 대부분을 제공합니다.
<web-url-chooser-container></web-url-chooser-container>
<web-lighthouse-scores-container></web-lighthouse-scores-container>
이러한 요소는 더 많은 기능을 제공하는 추가 요소를 생성합니다. 무엇보다 이러한 요소는 일반 마크다운 소스 코드의 일부일 뿐이며 Google 콘텐츠팀은 측정 노드뿐만 아니라 모든 페이지에 확장된 기능을 추가할 수 있습니다.
Google의 웹 구성요소는 React의 인기를 얻은 컨테이너 구성요소 모델을 가장 흔히 사용하지만, 이 모델은 이제는 약간 통과합니다.
각 -container 요소는 Unistore에서 제공하는 전역 상태에 연결한 다음 시각적 요소를 렌더링합니다. 그런 다음 시각적 요소를 렌더링하여 스타일이나 기타 기본 제공 기능이 있는 실제 DOM 노드를 렌더링합니다.
Google의 가장 복잡한 웹 구성요소는 전역 동작과 상태를 시각화하기 위해 존재합니다. 예를 들어 web.dev를 사용하면 좋아하는 사이트를 감사한 다음 측정 페이지에서 벗어날 수 있습니다. 돌아오면 태스크가 아직 진행 중인 것으로 표시됩니다.
간단한 구성요소는 전역 상태와는 아무런 관계가 없는, 순전히 정적인 콘텐츠를 개선하거나 멋진 시각화를 만들어냅니다 (예: 각 선 그래프는 고유한 <web-sparkline-chart>임).
상담을 받아보시겠어요?
web.dev 엔지니어링팀 (롭, 에와, 마이클, 샘)이 곧 보다 기술적인 내용을 심층 탐구할 예정입니다.
저희의 업무 진행 방식을 듣고 프로젝트를 위한 아이디어를 얻으셨기를 바랍니다. 이 블로그에 대한 질문 또는 주제 요청이 있으면 Twitter를 통해 알려주세요.