Browserslist와 함께 기준 사용

bookmark_border 컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요.

Tony Conway

게시: 2025년 5월 7일

Browserslist는 프런트엔드 코드베이스에서 지원되는 최소 브라우저 버전을 구성하는 데 가장 많이 사용되는 도구 중 하나입니다. 개발자는 package.json 파일에 browserslist 쿼리를 추가하고 Browserslist는 최소 지원되는 브라우저 목록을 노출합니다. Browserslist는 다음과 같은 다양한 널리 사용되는 린팅, 폴리필, 패키징 도구와 함께 사용할 수 있습니다.

• Autoprefixer
• @babel/preset-env를 사용하는 Babel
• postcss-preset-env를 사용하는 PostCSS
• eslint-plugin-compat를 사용하는 ESLint
• stylelint-no-unsupported-browser-features를 사용하는 Stylelint
• webpack

기준 타겟

기준을 사용하려면 사용자층을 고려하고 타겟팅할 기준 기능 세트를 결정해야 합니다.

• 널리 사용 가능한 기준에는 30개월 이상 지난 기준 핵심 브라우저 세트에서 완전히 지원된 모든 웹 기능이 포함됩니다.
• 기준 연도 기능 세트(예: 기준 2020)에는 해당 연도 말에 새롭게 제공된 모든 기능이 포함됩니다.

사용자층에 따라 '널리 사용 가능한 기준점'을 타겟팅할 수도 있고 이전 기준 연도를 타겟팅해야 할 수도 있습니다. 애널리틱스 또는 RUM 도구를 참고하여 사용자가 사용 중인 브라우저 버전을 파악합니다.

browserslist-config-baseline 설치

타겟팅할 기준 기능 세트를 결정한 후에는 개발자 도구에 해당 타겟을 적용할 수 있습니다. browserslist를 사용하는 도구에서 이를 실행하는 가장 간단한 방법은 browserslist-config-baseline를 설치하는 것입니다.

# npm
npm i browserslist-config-baseline@latest -D

# yarn
yarn add --latest browserslist-config-baseline -D

# bun
bun add browserslist-config-baseline@latest -d

널리 사용되는 기준을 타겟팅하는 방법

널리 사용 가능한 기준을 타겟팅하려면 extends 키워드를 사용하여 package.json에서 browserlist 구성을 업데이트하거나 추가합니다.

{
  ...
  "browserslist": [
    "extends browserslist-config-baseline"
   ]
  ...
}

browserslist가 지원되는 브라우저 목록을 로드하면 browserslist-config-baseline는 현재 광범위하게 사용 가능한 모든 기능을 지원하는 현재 최소 브라우저 버전을 동적으로 생성합니다. .browserslistrc 파일에 extends browserslist-config-baseline를 추가해도 동일한 방식으로 처리됩니다.

기준 연도를 타겟팅하는 방법

기준 연도 기능 집합을 타겟팅하려면 browserslist 쿼리 끝에 / 및 연도(YYYY 형식)를 추가합니다.

"browserslist": "extends browserslist-config-baseline/2020"

다운스트림 브라우저 지정 방법

기준 핵심 브라우저 세트에는 Chrome, Edge, Firefox, Safari가 포함됩니다. 다른 브라우저는 Chrome 및 Edge와 동일한 오픈소스 코드인 Chromium을 기반으로 하며 구현하는 Chromium 버전과 동일한 기능 집합을 지원해야 합니다.

browserslist-config-baseline는 baseline-browser-mapping를 사용하여 브라우저 버전을 지원하는 기능 집합과 연결합니다. UC Browser 모바일 및 QQ Browser 모바일의 매핑은 baseline-browser-mapping에서 사용할 수 있으며 향후 다른 브라우저도 포함될 수 있습니다.

이러한 브라우저를 기준 구성에 포함하려면 browserslist 구성에서 모듈 이름 바로 뒤에 /with-downstream를 추가합니다.

"browserslist": "extends browserslist-config-baseline/with-downstream"

또는

"browserslist": "extends browserslist-config-baseline/with-downstream/2020"

browserslist-config-baseline 사용 예시

패키징 도구에서

저장소에 browserslist-config-baseline를 추가하면 즉시 효과가 나타날 수 있습니다. Babel은 JavaScript 패키징을 위한 인기 있는 빌드 도구입니다. @babel/preset-env 패키지 기본값을 사용하면 많은 최신 JavaScript API 및 메서드가 이전 브라우저에 필요한 더 상세한 문법으로 대체됩니다.

그러나 동일한 예시 프로젝트에서 browserslist-config-baseline를 기준 2020을 타겟팅하도록 설정하면 구문 변환이 더 적게 필요하므로 이 JavaScript의 출력 크기가 크게 줄어듭니다.

Google Chrome Labs baseline-demos 저장소의 예시 코드를 사용하여 직접 시도해 보세요.

린터

일부 린터는 이미 Browserslist와 호환되거나 호환성 모듈을 사용하여 Browserslist와 호환되도록 설정할 수 있습니다. 예를 들어 stylelint는 stylelint-browser-compat 모듈을 사용하여 browserslist 구성을 사용할 수 있습니다. browserslist-config-baseline를 사용하도록 stylelint.config.js 파일을 설정합니다.

module.exports = {
  plugins: ['stylelint-browser-compat'],
  rules: {
    'plugin/browser-compat': [
      true,
      {
        browserslist: ['extends browserslist-config-baseline'],
      },
    ],
  },
};

이제 Stylelint는 현재 광범위하게 사용 가능한 기준에 포함되지 않은 CSS를 표시합니다.

Stylelint는 기준 규칙을 직접 설정할 수 있는 플러그인도 제공하지만 이미 browserslist를 사용하여 구성을 처리하고 있다면 browserslist-config-baseline가 바로 적용 가능한 솔루션입니다.

browserslist-config-baseline에 참여하는 방법

browserslist-config-baseline에 관한 기능을 요청하려면 GitHub 저장소에서 문제를 만들거나 pull 요청을 하세요.

다운스트림 브라우저 데이터를 더 많이 제공하거나 데이터 문제를 신고하려면 baseline-browser-mapping 저장소에서 문제를 만들거나 풀 리퀘스트를 제출하세요.