벤더 프리픽스(vendor prefix)란 크롬, 파이어폭스, 사파리 등 주요 웹 브라우저 공급자가 새로운 실험적인 기능을 제공할 때 이전 버전의 웹 브라우저에 그 사실을 알려주기 위해 사용하는 접두사(prefix)를 의미한다.
아직 CSS 권고안에 포함되지 못한 기능이나, CSS 권고안에는 포함되어 있지만 아직 완벽하게 제정된 상태가 아닌 기능을 사용하고자 할 때 벤더 프리픽스를 사용하게 된다.
<style>
.button {
background: red; <!-- gradient 속성을 지원하지 않는 모든 브라우저를 위한 코드 -->
background: -webkit-linear-gradient(red, yellow); <!-- 크롬과 사파리 4.0 이상을 위한 코드 -->
background: -moz-linear-gradient(red, yellow); <!-- 파이어폭스 3.6 이상을 위한 코드 -->
background: -ms-linear-gradient(red, yellow); <!-- 익스플로러 10.0 이상을 위한 코드 -->
background: -o-linear-gradient(red, yellow); <!-- 오페라 10.0 이상을 위한 코드 -->
background: linear-gradient(red, yellow); <!-- CSS 표준 문법 코드 -->
}
</style>
공급업체 접두사를 각 속성별로 모두 외워 사용하는 것은 거의 불가능하기에 이를 자동으로 진행해주는 패키지가 autoprefixer이다.
$ npm i -D postcss autoprefixer
// 띄어쓰기로 구분하여 한번에 두개의 패키지 설치(postcss, autoprefixer)
설치하려니 npm 에러가 발생했다.
npm ERR! A complete log of this run can be found in:
force 플래그를 붙여도 비활성화 되어있다고 설치가 안되었다.
해결방법 :--legacy-peer-deps
붙이기$ npm i -D postcss autoprefixer --legacy-peer-deps
package.json 파일에 정상 설치 되었는지 확인해준다.
현재 NPM 프로젝트에서 지원할 브라우저 범위를 명시하는 용도
그 명시를 autoprefixer 패키지가 활용하게 된다.
// package.json
"browserslist": [
"> 1%", // 전세게 점유율 1% 이상인 브라우저
"last 2 versions" // 해당하는 브라우저의 마지막 두개의 버전 까지는 지원하겠다는 옵션
]
마침표로 시작하는 rc(runtime configuration) 파일, 즉 구성 파일을 프로젝트 내부에 만들어 준다. 마침표로 시작하는 것은 구성 옵션이나 숨김 파일을 의미한다.
parcel 번들러가 파일을 찾아서 구성 옵션으로 사용
Nodejs는 CommonJS를 사용한다. CommonJS에서 가져오기, 내보내기 방식은 require
, module.exports
이다.
CommonJS
웹 브라우저 밖의 자바스크립트를 위한 모듈 생태계의 규칙을 설립하기 위한 프로젝트이다.
// ESM(ECMAScript modules) - 브라우저 동작, import, export
// CommonJS - require, module.exports
// 가져오기
const autoprefixer = require('autoprefixer');
// 내보내기
module.exports = {
plugins: [
autoprefixer
]
};
JS 문법으로 간소화 ver ⬇️
// 따로 변수에 담지 않고 함수 실행 구문을 plugins의 첫번째 배열 아이템으로 바로 실행
module.exports = {
plugins: [
require('autoprefixer')
],
};
개발 서버 실행
$ npm run dev
autoprefixer의 10버전과 PostCSS의 8버전이 충돌하여 에러 메시지가 뜬다.
undefined: PostCSS plugin autoprefixer requires PostCSS 8.
10버전인 autoprefixer를 PostCSS와 호환이 되도록 9버전으로 다운그레이드 해주면 해결된다.
$ npm i -D autoprefixer@9
다시 개발 서버 실행
$ npm run dev
SCSS파일 h1태그에 비교적 최신 기술인display:flex
값을 준 뒤 테스트 해보고자 한다.
개발 서버 열어서 개발자 도구 확인
webkit과 ms라는 공급업체 접두사를 확인 할 수 있다.
현재 브라우저는 정상적으로 display:flex
가 작동하기 때문에 공급업체 기술은 실행이 되지 않는다.
만약 브라우저 환경이 구버전인 경우 공급업체에서 제공하는 기술이 처리해준다.