<div id="readability-page-1" class="page"><div><p>Posted on 01 December, 2020 </p></div><article><p><img src="https://user-images.githubusercontent.com/389021/100712708-87e78300-33f6-11eb-8300-e83fdba0b93e.png"></p>
<p>언젠가부터 브라우저스리스트(browserslist)라는 것이 자주 눈에 띄더니 지금은 FE 개발 환경에서 뺄 수 없는 도구가 되었어요. 아마도 바벨(Babel)이라는 FE 계의 걸출한 스타 프로젝트에서 도입했기 때문일 거라고 생각합니다. 바벨을 사용하는 프로젝트들이 많다 보니 간접적으로 혹은 직접적으로 브라우저스리스트까지 사용하게 되는 것이죠. 사실 좋아요 좋은 도구라고 생각합니다. 아마 브라우저 환경을 정의하는 표준처럼 당분간 사용될 것 같아요.</p>
<p>보통 공식 사이트에서 자세히 알 수 있는 내용들은 글을 따로 안 쓰려고 하는 편인데요. 짧게 바로 쓸 수 있는 내용만 요약해서 정리해볼게요.</p><ins data-ad-layout="in-article" data-ad-format="fluid" data-ad-client="ca-pub-4811193197471582" data-ad-slot="7153541064"></ins>
<h2>Browserslist가 뭘까</h2>
<p>소개는 짧게 할게요. 브라우저스리스트는 브라우저를 선택하는 옵션 기능만 따로 뽑아 놓은 도구라고 생각하시면 돼요. 어떤 프로그램이 브라우저에 대응해 내부에서 처리해야 할 작업이 다르다면 옵션으로 지원 브라우저 환경을 입력받을 수 있잖아요? FE는 그런 옵션이나 설정이 필요한 경우가 많습니다. 반복해서 만들게 되는 그 설정 기능만 따로 떼서 브라우저 환경을 쉽게 정의할 수 있고 또 쉽게 코드에서 사용할 수 있도록 만든 도구입니다. 그 자체만으로는 특별한 기능이 없어요. 다른 프로그램에서 사용되기 위한 프로그램입니다. 프레임웍이나 빌드도 구 같은 데서 사용해요. 바벨에서는 브라우저에 따라 사용해야 할 폴리필의 내용이나 빌드 결과가 달라집니다. 그래서 바벨은 바벨을 사용하는 프로젝트의 대응 브라우저 환경을 입력받아야 하는데 그때 브라우저스리스트가 사용돼요.</p>
<p>브라우저스리스트는 브라우저 환경을 정의할 때 쿼리라는 간단한 문법을 사용합니다. 대응할 브라우저와 버전을 쉽게 정의할 수 있어요. 명시적으로 브라우저와 버전을 특정할 수도 있고 최신 버전 2개 뭐 이런 식으로 정의를 할 수 있어요. 심지어 브라우저 사용 통계를 사용해 세계에서 점유율이 5% 이상인 브라우저들만 선택할 수도 있어요. 이 통계 정보는 API 서버에서 가져오는 것이 아니에요. <code>caniuse-lite</code>라는 브라우저 사용통계나 버전 정보를 들고 있는 프로젝트의 정적인 데이터를 사용합니다. 그래서 브라우저스리스트를 사용할 때마다 <code>caniuse-lite</code> 데이터를 자주 업데이트해요. 브라우저스리스트가 주는 정보는 빌드 할 때나 한번 필요한 것이라 그걸로 충분할 것 같아요.</p>
<h2>쿼리</h2>
<p><em>브라우저스리스트는 쿼리라는 문법을 사용해 브라우저를 정의할 수 있습니다.</em> 쿼리는 꽤 직관적이라 쉽게 이해할 수 있어요.</p>
<p>명시적으로 인터넷익스플로러(IE) 버전 10을 지원하겠다고 대놓고 쓸 수 있고요.</p>

<p>버전의 범위를 지정할 수도 있어요.</p>

<p>IE 6에서 9까지 지원한다는 뜻입니다. 근데 인간적으로 IE 6부터 10까지는 버립시다. 웹개발자들을 애껴주세요.</p>
<p>쿼리는 <code>not</code>을 사용해 부정조건을 만들 수 있어요.</p>

<p>IE 6부터 10까지는 절대로 지원하지 않겠다는 쿼리에요. 좋죠? 예전엔 브라우저 특성을 잘 이해하는게 내 밥그릇이라고 생각했는데 지금 생각해보면 그 시간에 그딴것보다 다른 스킬을 키우는게 더 행복했을것 같아요. 네 TMI 네요.</p>
<p>IE관련 설정은</p>

<p>이렇게 특정 버전 이하는 지원하지 않겠다는 형태의 쿼리가 좋다고 생각해요.</p>
<p>브라우저스리스트에서 제일 신박했던 기능이 있는데 바로 사용 통계를 기반으로 한 브라우저 선택입니다.</p>

<p>전 세계 점유율 2% 이상의 브라우저만 지원한다는 뜻인데 국가 코드와 함께 특정 국가나 아시아와 같은 지역도 선택할 수 있어요.</p>
<div data-language="sh"><pre><code> &gt; 2% in KR
 &gt; 2% in alt-AS</code></pre></div>
<p>첫번째는 한국에서 점유율 2% 이상인 브라우저들을 선택하는 것이고 두번째것은 아시아 지역 전체의 점유율 2%를 뜻해요.</p>
<p>그리고 자주 쓰이는 쿼리가 하나 더 있습니다.</p>

<p>최근 2개 버전의 브라우저를 선택하는 쿼리입니다. 대부분 메이저 버전을 기준으로 합니다. 한국의 경우 보통 모던 브라우저는 거의 최신 버전을 지원하면서 IE만 선택적으로 지원하게 되는데 이 쿼리하고 IE 지원 범위 쿼리만으로 대부분 커버가 될 거예요. 브라우저 이름까지 넣어서 조금 더 세부적으로 정의할 수도 있지만 이렇게까지 할 필요가 있는 프로젝트는 자주 없을 것 같아요.</p>
<div data-language="sh"><pre><code>last 2 Chrome versions
last 2 Firefox versions</code></pre></div>
<p>그리고 가장 골칫거리인 것이 바로 지원이 중단된 브라우저들일 텐데요. 지원이 중단된 브라우저들은 간단히 제외할 수도 있어요.</p>

<p><code>dead</code>는 지원이 중단된 브라우저를 뜻해요 그래서 <code>not dead</code> 이렇게 하면 지원이 중단되지 않은 브라우저만 지원하겠다는 뜻이에요. 한국에서는 종종 지원이 중단된 브라우저도 지원해야 할 경우가 있어서 무심코 사용하다간 큰일 날 수 있어요.</p>
<p>그리고 쿼리를 조합할 수도 있습니다.</p>
<div data-language="sh"><pre><code> &gt; 1%, last 1 versions
 &gt; 1% and last 1 versions</code></pre></div>
<p><code>or</code>, <code>and</code> 조건을 사용할 수 있습니다. <code>or</code>의 경우 콤마로 대신할 수 있어요. <code>&gt; 1%, last 1 versions</code>는 점유율 1% 이상과 최신 버전 1개를 선택하는 것이고 <code>&gt; 1% and last 1 versions</code> 이건 점유율 1% 이상이면서 최신 버전인 것만 선택합니다.</p>
<h2>쿼리를 정의하는 방법</h2>
<p>쿼리는 두 가지 방법으로 정의할 수 있습니다.</p>
<ol>
<li><code>.browserslistrc</code> 파일안에 정의</li>
<li><code>package.json</code> 파일에 <code>browserslist</code> 키를 사용해 정의</li>
</ol>
<p><code>.browserslistrc</code> 파일을 사용하는 방법이 제일 간단해요.</p>
<div data-language="sh"><pre><code> &gt; 1%
last 2 versions
not ie &lt;= 10</code></pre></div>
<p>프로젝트 루트에 <code>.browserslistrc</code> 파일을 만드시고 위와 같이 입력하면 됩니다. <strong>그냥 바쁘신 분들은 위 내용 복붙해서 IE 부분만 프로젝트 상황에 맞게 조절해 주시면 웬만하면 바로 쓸 수 있는 쿼리라고 생각하시면 될 것 같습니다.</strong> 라인으로 구분되는 쿼리들은 <code>or</code> 조건인데 <code>not</code>은 <code>and</code> 조건으로 동작하는 것 같아요.</p>
<p><code>package.json</code> 파일을 이용하는 방법은 공식 사이트에서도 권장하는 방법이에요. <code>package.json</code>에 <code>browserslist</code>키를 사용해 배열로 정의합니다.</p>
<div data-language="json"><pre><code><span>"browserslist"</span><span>:</span> <span>[</span>
  "&gt; <span>1</span>%”<span>,</span>
  <span>"last 2 versions"</span><span>,</span>
  “not ie &lt;= <span>10</span>”
<span>]</span></code></pre></div>
<h2>쿼리 디버깅</h2>
<p><em>입력한 쿼리가 정상적으로 동작하고 있는지 바로 확인할 수 있어요.</em> 쿼리가 정의된 파일이 있는 경로에서 커맨드라인으로 아래와 같이 입력하면 됩니다.(파일이 없는 경로에서는 디폴트 쿼리를 적용해요)</p>

<p>결과는 쿼리에 대응되는 브라우저 목록이 출력됩니다. 만약 지원하는 브라우저가 목록에 없다면 쿼리를 수정하셔야 해요.</p>
<div data-language="sh"><pre><code>and_chr 86
and_ff 82
and_qq 10.4
and_uc 12.12
android 81
baidu 7.12
bb 10
bb 7
chrome 86
chrome 85
edge 86
edge 85
firefox 82
firefox 81
ie 11
ie_mob 11
ie_mob 10
ios_saf 14
ios_saf 13.4-13.7
ios_saf 12.2-12.4
kaios 2.5
op_mini all
op_mob 59
op_mob 12.1
opera 72
opera 71
safari 14
safari 13.1
samsung 12.0
samsung 11.1-11.2</code></pre></div>
<p>아까 입력했던 쿼리의 2020년 11월 29일의 결과입니다. 브라우저 사용 통계를 사용하기 때문에 시간에 따라 바뀔 수 있겠죠?</p>
<h2>그 밖에 유용한 기능</h2>
<p><a href="https://github.com/browserslist/browserslist-ga">browserlist-ga</a>를 사용하면 웹사이트의 Google Analytics 정보를 이용해 브라우저를 선택할 수 있어요. 실제로 웹사이트를 이용하는 사람들의 브라우저 점유율이니 이보다 정확할 수는 없겠네요. 하지만 이것도 웬만큼 사용자가 누적되어야 의미 있는 통계가 될 겁니다. 제 블로그처럼 적은 사용자로는….</p>
<p>배포나 개발 환경에 따라 다른 설정을 할 수 있고요. 비슷한 방법으로 중간에 키를 두고 다양한 쿼리를 정의할 수도 있어요. 공식 리포의 문서를 참조하시면 됩니다.</p>
<p>다른 <code>.browserslistrc</code> 파일을 확장해서 정의 기능도 있습니다. 기본 브라우저 대응 쿼리를 정의하고 그것을 공유하고 확장해, 조금 다른 파생 설정을 만들 수 있어요. 중복을 제거할 수 있겠죠? 사실 웬만큼 복잡한 쿼리가 아니라면 크게 유용한 것 같지 않다고 생각했는데 브라우저스리스트를 사용한 모듈이나 프레임웍 중에는 기능에 따라 복잡한 쿼리가 필요할 수도 있겠네요. 이것 역시 리포에 잘 나와있습니다.</p>
<h2>끝으로</h2>
<p>마지막으로 따로 뭐를 정리할 내용이 없는 주제네요. 그래도 안 쓰면 허전해서… 아무튼 브라우저스리스트는 그 자체만으로 특별한 기능이 있는 게 아니고 대응 브라우저를 읽기 쉽고 편하게 정의할 수 있도록 만든 도구를 위한 도구라고 할 수 있습니다. 농구에서 왼손 같은 것이죠.(아재 인증)</p>
<p>아마 노드 기반의 FE 개발 환경에서는 꽤 오랫동안 사용하게 될 것 같습니다.</p></article></div>

shiren.dev RSS Feed

언젠가부터 브라우저스리스트(browserslist)라는 것이 자주 눈에 띄더니 지금은 FE 개발 환경에서 뺄 수 없는 도구가 되었어요. 아마도 바벨(Babel)이라는 FE 계의 걸출한 스타 프로젝트에서 도입했기 때문일 거라고 생각합니다. 바벨을 사용하는 프로젝트들이 많다 보니 간접적으로 혹은 직접적으로 브라우저스리스트까지 사용하게 되는 것이죠. 사실 좋아요 좋은 도구라고 생각합니다. 아마 브라우저 환경을 정의하는 표준처럼 당분간 사용될 것 같아요. 보통 공식 사이트에서 자세히 알 수 있는 내용들은 글을 따로 안 쓰려고 하는 편인데…

browserslist 쾌속 가이드

댓글