웹을 제작하는 회사들(구글, 마이크로 소프트 등)에서 기술들을 차용해서 자신들의 브라우저에서
동작할 수 있는 구조를 만들어 놓는다. 일종의 시험적인 기술이다. 그렇지만 이런게 표준 기술은
아니다 보니까 앞에 webkit- 이나 ms- 라는 접두사를 붙여서 사용하는 방식을 제공한다.

일부 사용자들은 표준 기술이 동작하지 않는 구형 브라우저일수도 있다. 표준은 안되고, 저런 접두사가
붙은 기술이 적용이 될 수도 있다.

그렇기 때문에 표준이 적용 가능하다면 표준을 적용시키고, 그게 불가능하다면 접두사가 붙어있는
같은 기능의 다른 속성을 적용시킨다.

그런데 우리가 모든 회사의 이러한 속성을 외우고 사용할 수는 없다. 이 또한 자동으로 
해결 해 주는 패키지가 있다.

$ npm i -D postcss autoprefixer // 2가지 패키지 한번에 받음, PostCSS 의 Plugin 인 autoprefixer

//package.json
browserslist : 현재 NPM 프로젝트에서 지원할 브라우저의 범위를 명시하는 용도이다.
               그 명시를 autoprefixer 패키지가 활용한다.
"browserslist" : [
	"> 1%", // 전 세계의 점유율이 1퍼센트 이상인 모든 브라우저
	"last 2 versions" // 해당하는 브라우저의 마지막 2개의 버전까지는 모두 지원해달라
]

.postsccrc.js 파일을 만들어준다. // rc(Runtime Configuration) 구성 파일을 의미한다.
(번들러에서 찾기위해서 이름 정확하게 만들어주자)

JS 에서 가져오기 내보내기를 만들 때 import, export 를 사용했다.
이러한 방식을 ESM (ECMAScript modules) 이라는 개념으로 부른다.

그런데 postcss 는 번들러를 통해서 변환하는 용도로 사용하기 때문에 브라우저에서 동작하는
개념이 아니고 Node.js 에서 동작한다.

Node.js 에서는 ESM 을 지원하지 않고 CommonJS 를 제공한다. 따라서 Node.js 에서는
import 대신에 require()
export 대신에 module.exports

//import autoperfixer from 'autoperfixer'
const autoperfixer = require('autoprefixer');

// export {
//   plugins: [
//     autoperfixer
//   ]
// }
module.exports = {
  plugins: [autoperfixer],
};

다음과 같이 줄인다.
module.exports = {
  plugins: [
    require('autoprefixer')
  ],
};

만약 autoprefixer 와 postcss 가 충돌한다면, autoprefixer 의 버전을 낮춘다.
나도 9버전으로 다시 설치 했다.

그리고 autoprefixer 가 제대로 적용되었는지 보려면 가장 대표적으로
display: flex; 를 적용해 본다.