1. 소개
Baseline은 오늘날 상호 운용 가능하고 안전하게 사용할 수 있는 웹 기능에 관한 명확한 메시지를 제공하는 이니셔티브입니다. 이제 Baseline 도구의 발전 덕분에 프로젝트에서 Baseline을 Browserslist 쿼리로 직접 사용할 수 있으므로 도구 모음이 선택한 Baseline 타겟에 따라 코드 출력을 변경할 수 있습니다.
이 Codelab에서는 샘플 프로젝트에서 Baseline을 사용하는 방법과 특정 Baseline 타겟을 선택하도록 구성하는 방법을 알아봅니다. 선택한 기준선 타겟에 따라 프로젝트 도구 체인의 출력이 어떻게 달라지는지도 확인할 수 있습니다.
2. 로컬 머신에서 데모 설정
먼저 원하는 터미널 애플리케이션으로 이동하여 데모 저장소를 클론한 후 프로젝트 디렉터리를 입력합니다.
git clone git@github.com:GoogleChromeLabs/baseline-demos.git
cd baseline-demos/tooling/webpack
이 시점에는 데모에 이미 Baseline이 통합되어 있지만 처음부터 시작하는 커밋을 확인해야 합니다.
git checkout d3793f25
저장소를 클론했으므로 이제 데모를 실행할 수 있습니다. 이 프로젝트는 nvm를 사용하여 노드 버전 관리를 합니다. 최근 버전의 Node가 전역적으로 설치되어 있다면 이 단계를 완료하지 않아도 됩니다. 하지만 nvm를 사용하는 경우 다음 명령어를 실행하세요.
nvm install
nvm use
여기에서 프로젝트의 패키지를 설치합니다.
npm install
데모를 보려면 다음 명령어를 실행합니다.
npm start
그런 다음 http://localhost:8080으로 이동합니다. 데모 자체는 페이지 상단의 양식 필드를 사용하여 필터링할 수 있는 카드 목록입니다. 앱 자체는 기준선 기준에 도달한 기능을 혼합하여 사용합니다.
데모를 완료한 후 터미널로 이동하여 언제든지 Ctrl+C를 눌러 데모 실행을 중지합니다.
3. 프로젝트에 Baseline을 통합하는 방법
이 데모는 시작 시 Browserslist 구성을 지정하지 않습니다. Browserslist는 도구 모음에 지원해야 하는 최소 브라우저 버전을 알려주는 간결한 쿼리 구문입니다. 예를 들어 last 3 years 쿼리를 사용하면 다양한 타겟이 지정됩니다. 이 데모에서는 도구 모음에서 사용할 수 있는 Baseline 타겟과 일치하는 Browserslist 쿼리를 지정합니다. 기준 타겟은 다음 중 하나일 수 있습니다.
- 이동 타겟: 새 브라우저가 출시됨에 따라 시간이 지남에 따라 업데이트됩니다.
- 새로 제공되는 기준: 현재부터 30개월 전까지 핵심 브라우저 세트에 구현된 상호 운용 가능한 기능과 일치합니다.
- 기준선 널리 사용 가능: 30개월 전에 핵심 브라우저 세트에 구현된 상호 운용 가능한 기능을 포함합니다.
- 고정 타겟: 특정 시점의 브라우저 버전을 나타냅니다. 2016년부터 현재 연도까지의 연도로 표시됩니다.
먼저 프로젝트에 대해 널리 제공되는 이동 기준선 타겟을 선택합니다. 이렇게 하려면 package.json를 열고 다음을 추가합니다.
"browserslist": "baseline widely available"
4. 다양한 기준 타겟을 선택하여 코드 출력의 변경사항 관찰
데모 프로젝트의 타겟으로 널리 사용 가능한 기준을 선택했습니다. 다음으로 프로젝트를 빌드합니다.
npm run build
@babel/preset-env의 debug 옵션이 프로젝트의 babel.config.js에서 true로 지정되어 있으므로 추가 출력이 많습니다. 먼저 번들러 통계에서 CSS 및 JavaScript의 크기를 확인합니다.
assets by status 213 KiB [emitted]
asset js/home.5f3c5480.js 208 KiB [emitted] [immutable] [minimized] (name: home) 2 related assets
asset css/home.20db50ef.css 3.64 KiB [emitted] [immutable] (name: home) 1 related asset
asset index.html 564 bytes [emitted]
여기서 JavaScript 번들은 208KiB이고 CSS는 3.64KiB입니다. 이 프로젝트에서는 JavaScript 폴리필에 core-js을 사용하고 아직 완전히 상호 운용되지 않는 CSS 속성에 공급업체별 접두사를 적용하는 데 autoprefixer을 사용하기 때문입니다. core-js와 autoprefixer 모두 선택한 기준 브라우저 목록 쿼리의 영향을 받습니다.
출력에서 또 다른 주의할 점은 Baseline Widely available에 대한 Browserslist 쿼리가 Browserslist 쿼리로 변환되는 방식입니다. 프로젝트에서는 다음과 같이 표시됩니다.
Using targets: {
"chrome": "108",
"edge": "108",
"firefox": "108",
"ios": "16",
"safari": "16"
}
빌드 출력에서 core-js에 의해 삽입된 폴리필을 확인합니다.
The corejs3 polyfill added the following polyfills:
es.iterator.constructor { "chrome":"108", "edge":"108", "firefox":"108", "ios":"16", "safari":"16" }
es.iterator.filter { "chrome":"108", "edge":"108", "firefox":"108", "ios":"16", "safari":"16" }
es.iterator.map { "chrome":"108", "edge":"108", "firefox":"108", "ios":"16", "safari":"16" }
기준선 타겟을 변경하면 이 출력이 변경될 수 있습니다. 더 엄격한 SLA로 인해 애플리케이션이 훨씬 오래된 브라우저를 지원해야 한다고 가정해 보겠습니다. 이러한 경우 더 보수적인 타겟을 선택할 가능성이 높습니다. package.json 파일에서 다음을 반영하도록 Browserslist 구성을 변경합니다.
"browserslist": "baseline 2016"
이렇게 하면 기준 2016이 타겟으로 선택되며 Browerslist 쿼리로 변환됩니다. 빌드를 다시 실행한 후 도구 모음 출력의 차이점을 확인할 수 있습니다.
npm run build
먼저 번들러 통계에서 프로젝트의 JavaScript 및 CSS 파일 크기의 변경사항을 확인합니다.
assets by status 237 KiB [emitted]
asset js/home.b228612d.js 232 KiB [emitted] [immutable] [minimized] (name: home) 2 related assets
asset css/home.0c3e4fd7.css 3.91 KiB [emitted] [immutable] (name: home) 1 related asset
asset index.html 564 bytes [emitted]
JavaScript 번들의 크기가 약 30KiB 증가한 것을 확인할 수 있습니다. 이 프로젝트의 CSS는 2016년 기준 타겟에 따라 autoprefixer가 더 많은 공급업체 접두사를 추가했기 때문에 약간 더 큽니다. Browserslist 쿼리의 변경사항도 확인하세요.
Using targets: {
"chrome": "53",
"edge": "14",
"firefox": "49",
"ios": "10",
"safari": "10"
}
널리 사용 가능한 기준선 타겟과 비교하면 이러한 브라우저 버전은 훨씬 이전 버전입니다. 이 경우 타겟팅되는 Edge 버전은 Chromium 이전 버전입니다.
core-js에 의해 삽입된 폴리필도 변경됩니다. 이는 타겟으로 '기준 널리 사용 가능'을 선택했을 때보다 훨씬 많은 변경사항입니다.
The corejs3 polyfill added the following polyfills:
es.array.filter { "edge":"14" }
es.iterator.constructor { "chrome":"53", "edge":"14", "firefox":"49", "ios":"10", "safari":"10" }
es.iterator.filter { "chrome":"53", "edge":"14", "firefox":"49", "ios":"10", "safari":"10" }
es.object.to-string { "edge":"14", "firefox":"49" }
es.array.includes { "firefox":"49" }
es.string.includes { "edge":"14" }
es.array.map { "firefox":"49" }
es.iterator.map { "chrome":"53", "edge":"14", "firefox":"49", "ios":"10", "safari":"10" }
es.symbol { "edge":"14", "firefox":"49" }
es.symbol.description { "chrome":"53", "edge":"14", "firefox":"49", "ios":"10", "safari":"10" }
es.array.iterator { "chrome":"53", "edge":"14", "firefox":"49" }
web.dom-collections.iterator { "chrome":"53", "edge":"14", "firefox":"49", "ios":"10", "safari":"10" }
es.array.push { "chrome":"53", "edge":"14", "firefox":"49", "ios":"10", "safari":"10" }
es.regexp.to-string { "edge":"14" }
es.array.from { "edge":"14", "firefox":"49" }
es.regexp.exec { "chrome":"53", "edge":"14", "firefox":"49", "ios":"10", "safari":"10" }
es.regexp.test { "edge":"14" }
es.error.cause { "chrome":"53", "edge":"14", "firefox":"49", "ios":"10", "safari":"10" }
여기서 알 수 있는 점은 기준선 타겟이 프로젝트의 도구 모음에 의해 애플리케이션이 변환되는 방식에 큰 영향을 미칠 수 있다는 것입니다. 이 예의 애플리케이션은 매우 기본적인 것으로, React나 애플리케이션 자체에 최첨단 개발자 환경 기능이 많지 않습니다. 훨씬 더 복잡한 애플리케이션의 경우 선택한 기준 타겟을 준수하기 위해 추가된 폴리필, 변환, 기타 추가 코드 소스 등 훨씬 다른 결과가 나올 수 있습니다.
5. 다운스트림 브라우저 타겟팅
검토를 위해 Baseline이 타겟팅하는 핵심 브라우저 세트에는 다음 브라우저가 포함됩니다.
- Chrome
- Android용 Chrome
- Firefox
- Android 기반 Firefox
- Edge
- macOS의 Safari
- iOS의 Safari
하지만 '다운스트림 브라우저'라고 하는 브라우저를 타겟팅할 수 있습니다. 이러한 브라우저는 엔진이 핵심 브라우저 세트의 브라우저(대부분 Chromium)에서 파생된 브라우저입니다. 여기에는 Opera, Samsung Internet 등의 브라우저가 포함됩니다. 유효한 기준 브라우저 목록 쿼리에 with downstream를 추가하여 핵심 브라우저 세트의 브라우저 외에 다음 브라우저를 타겟팅할 수 있습니다.
"browserslist": "baseline widely available with downstream"
이는 널리 사용 가능한 기준 타겟에 따라 다운스트림 브라우저를 타겟팅합니다. 이 쿼리가 Browserslist 쿼리로 어떻게 변환되는지 확인하려면 프로젝트를 다시 빌드하세요.
npm start
그런 다음 Browserslist 쿼리의 변경사항을 확인합니다.
Using targets: {
"android": "108",
"chrome": "108",
"edge": "108",
"firefox": "108",
"ios": "16",
"opera": "94",
"opera_mobile": "80",
"safari": "16",
"samsung": "21"
}
연도별로 다운스트림 브라우저를 타겟팅할 수도 있습니다. 예를 들면 다음과 같습니다.
"browserslist": "baseline 2016 with downstream"
이 구성을 사용하면 Browserslist 쿼리가 다음과 같이 변경됩니다.
Using targets: {
"android": "53",
"chrome": "53",
"edge": "14",
"firefox": "49",
"ios": "10",
"opera": "40",
"opera_mobile": "80",
"safari": "10",
"samsung": "6.2"
}
6. 린터 및 기타 도구
Browserslist에 내장된 기준 쿼리는 번들러 및 도구 체인의 기타 부분과 같은 도구에 편리하지만, 기준 타겟을 구성의 일부로 채택한 린터와 같은 다른 도구에도 유용합니다.
기준선에 대한 린터 지원의 좋은 예로는 CSS 린팅의 일부로 @eslint/css를 사용하여 기준선 신규, 기준선 광범위하게 사용 가능 또는 기준선 연도를 타겟팅할 수 있는 use-baseline 규칙을 제공하는 ESLint가 있습니다. 커뮤니티 @html-eslint/eslint-plugin 패키지에도 eslint.config.js 파일의 HTML 기능에 대해 동일한 작업을 실행할 수 있는 유사한 규칙이 있습니다.
export default [
/* Omitted JS linting rules ... */
// Lint CSS files for Baseline:
{
files: ["**/*.css"],
plugins: {
css
},
language: "css/css",
rules: {
"css/no-duplicate-imports": "error",
// Lint CSS files to make sure they are using
// only Baseline Widely available features:
"css/use-baseline": ["warn", {
available: "widely"
}]
},
},
// Lint HTML and JSX files for Baseline:
{
files: ["**/*.html"],
...html.configs["flat/recommended"],
rules: {
// Lint HTML files to make sure they are using
// only Baseline Widely available features:
"@html-eslint/use-baseline": ["warn", {
available: "widely"
}]
}
}
];
이 구성에서 몇 가지 사항에 유의해야 합니다.
- HTML 및 CSS 린팅 패키지는 모두
use-baseline규칙을 사용하며available: "widely"구성 옵션을 사용하여 널리 사용 가능하도록 설정됩니다. - 두 린팅 패키지 모두 린터 위반의 로그 수준이
"warn"로 설정됩니다. 빌드가 발생하지 않도록 오류 코드를 사용하여 종료되도록"error"로 설정할 수 있습니다.
이전에 npm run build를 실행할 때 린터 출력을 본 적이 있을 수 있지만 린터 출력만 보려면 다음을 실행하면 됩니다.
npm run lint
표시되는 출력은 프로젝트의 CSS에서 여러 경고를 강조 표시합니다.
/var/www/baseline-demos/tooling/webpack-browserslist-config-baseline/src/css/normalize.css
222:3 warning Property 'outline' is not a widely available baseline feature css/use-baseline
/var/www/baseline-demos/tooling/webpack-browserslist-config-baseline/src/css/styles.css
62:3 warning Property 'outline' is not a widely available baseline feature css/use-baseline
81:23 warning Value 'subgrid' of property 'grid-template-rows' is not a widely available baseline feature css/use-baseline
7. 요약
프로젝트에서 Browserslist에서 제공하는 기준 쿼리를 사용하려면 기본 빌드 도구와 Browserslist 자체를 어느 정도 이해해야 하지만 프로젝트에 배치하는 행위 자체는 간결합니다. 이 기능을 사용하면 버전 번호가 아닌 Baseline 타겟을 기준으로 지원하는 브라우저를 고려할 수 있으므로 부담이 줄어듭니다.
또한 Rollup에서 실행되는 이 데모 버전이 있으며 이 Codelab은 해당 데모를 사용하여 대부분 따라 할 수 있습니다.
기준 지원은 다른 번들링 도구에서도 나타나기 시작했습니다. 예를 들어 내부적으로 Rollup을 사용하는 Vite는 이제 버전 7부터 기본적으로 널리 사용 가능한 기준 브라우저를 타겟팅합니다.
어떤 방법을 선택하든 Browserslist에서 사용할 수 있는 기준 쿼리를 프로젝트에 도입하고 자신에게 맞는 기준 타겟을 선택하면 더 간단하고 안정적인 방식으로 브라우저를 타겟팅할 수 있습니다.