[Parcel] 벤더 프리픽스(Vendor Prefix)를 자동으로! Autoprefixer

🌈 벤더 프리픽스(Vendor Prefix)

웹 개발자 도구에서 어떤 태그의 styles에 display: webkit-box 또는 display: ms-flexbox등이 있는 것을 볼 수 있다.
이는 벤더 프리픽스(vendor prefix)라고 부른다.

벤더 프리픽스란, 익스플로러, 크롬, 파이어폭스, 사파리, 오페라 등의 웹 브라우저 공급자가 새로운 기능을 제공할 때 이전 버전의 웹 브라우저에 이를 알리기 위해 사용하는 접두사(prefix) 이다.
CSS 권고안에 포함 안된 기능이나 CSS 권고안에는 포함되어 있지만 완벽하게 제정된 상태가 아닌 기능을 사용할 때 벤더 프리픽스를 사용하는 것이다.

만약 표준 기술이 동작할 수 없다면 해당 접두사가 붙어 있는 style이 적용되는 것이다.
주요 웹 브라우저들의 벤더 프리픽스는 다음과 같다.

• ie : -ms-
• chrome, safari : -webkit-
• firefox : -moz-
• opera : -o-

💻 Autoprefixer 설치

이러한 벤더 프리픽스를 각각의 속성에 모두 외워서 사용할 수는 없다.
따라서 자동으로 붙여주는 패키지 Autoprefixer 를 설치하자.

1. 터미널에 npm i -D postcss autoprefixer 입력

2. package.json파일에 다음 부분을 추가

"browserslist": [
      "> 1%".
      "last 2 versions"
      ] 

이는 전 세계 점유율이 1% 이상인 브라우저의 마지막 두 개의 버전까지는 지원한다 라는 의미를 가진다.

3. 루트 경로에 .postcssrc.js 파일 생성 및 다음을 입력 후 저장

module.exports = {
      plugins: [
          require('autoprefixer')
      ]    
  }

node.js에서는 ESM이 아닌 CommonJS를 제공하기 때문에 import 대신에 require, export 대신에 module.exports를 사용하는 것이다.

4. 터미널에서 npm run dev 입력

여기서 에러가 난다면 package.json에서 postcss의 버전과 autoprefixer의 버전이 충돌됐기 때문이다.
따라서 터미널에서 npm i -D autoprefixer@9 를 입력해 autoprefixer를 9버전으로 다운그레이드 설치하면 해결된다.

여기까지 했는데도 autoprefixer가 적용되지 않는다면 package.json파일에 다음 코드를 추가하여 저장하자.

"postcss": {
    		"plugins": {
      			"autoprefixer": {}
    		}
}