PostCSS?

PostCSS는 cra(create react app) 에서 기본적으로 제공되는 도구로서, Sass와 같이 변수, 믹스인 등의 기능을 제공하고 현재 사용에 제약이 있는 CSS의 속성을 사용할 수 있도록 트랜스파일링을 해주는 역할을 한다.
크로스브라우징을 위한 autoprefixer와 normalize 처리도 해주는데 즉, hidden이라는 속성은 최신 브라우저에서 제공되는 속성이라 별도 선언없이 잘 작동하지만 하위 브라우저에서는 css에 별도로 명시해주어야 한다. 이러한 내용을 알아서 PostCSS에서 제공해주는 것이다.
그렇다면 크로스브라우징을 어디까지 적용할 지의 기준은 어디서 설정할까? 그것은 package.json내부에 browserslist 항목에 제공된 쿼리를 기준으로 한다.
이 쿼리는 https://browserl.ist/ 에서 확인해 볼 수 있고, https://github.com/browserslist/browserslist#full-list에서 쿼리문을 참조할 수 있다.

시작하기

craco 패키지 설치하기

두 개의 패키지를 우선 설치한다. craco는 cra에 숨겨진 webpack.config.js를 꺼내지 않고 설정하기 위해 필요한 패키지이다.

> npm i @craco/craco
> npm i craco-alias -D

postcss.config.js 추가

우선 프로젝트 폴더 루트에 postcss.config.js 파일을 생성하고 아래 소스를 입력한다. 이 코드는 cra에 기본으로 제공되는 코드내용이다.

const postcssNormalize = require('postcss-normalize');

module.exports = {
  plugins: [
    require('postcss-flexbugs-fixes'),
    require('postcss-preset-env')({
      autoprefixer: {
        flexbox: 'no-2009'
      },
      stage: 0,
    }),
    postcssNormalize()
  ]
};

craco.config.js 추가

프로젝트 루트 폴더에 craco.config.js 파일을 추가하고 아래 코드를 넣어준다.

const { POSTCSS_MODES } = require("@craco/craco");

module.exports = {
  style: {
    postcss: {
      mode: POSTCSS_MODES.file
    }
  },
};

normalize 설정

프로젝트에 src/index.css에 최상단에 @import-normalize를 선언하면 된다.

@import-normalize;
/* reset을 위한 css 정의 */

여기까지는 prefix와 normalize 등을 위한 설정이 완료되었다.

절대경로 설정하기

import 문으로 css파일과 js 등의 리소스를 가져와 사용할 수 있는데, 이때 파일의 위치를 상대 경로로 정의하면서 깔끔하지 않은 코드와 번거로움을 느끼게 된다. 이것을 깔끔한 코드로 사용할 수 있게 바꿔보자.

/* 상대경로 */
import ../../../../styles/index.scss
/* 절대경로 */
import @styles/index.scss

craco.config.js 코드 추가

위에서 추가한 코드 아래에 내용을 추가한다.

const { POSTCSS_MODES } = require("@craco/craco");
const CracoAlias = require('craco-alias');  //추가

module.exports = {
  style: {
    postcss: {
      mode: POSTCSS_MODES.file
    }
  },
  plugins: [            //추가
    {
      plugin: CracoAlias,
      options: {
        source: 'jsconfig',
        baseUrl: "./src"
      },
    },
  ],
};

jsconfig.json 파일 추가

assets, components, styles는 src아래에 생성된 폴더를 의미한다. 즉, 각각의 폴더가 있고 그 안에있는 파일을 찾을 수 있도록 설정한 것이다.

{
  "compilerOptions": {
    "baseUrl": "src",
    "paths": {
      "~/*": [
        "./*"
      ],
      "@assets/*": [
        "assets/*",
        "assets"
      ],
      "@components/*": [
        "components/*",
        "components"
      ],
      "@styles/*": [
        "styles/*",
        "styles"
      ]
    }
  }
}

//사용예시
import Button from '@components/UI/Button/Button';
import Button from '@assets/icons/arrow-right.png';

여기까지 설정을 하면, PostCSS를 위한 설정은 모두 끝이났다. 여러 자료를 보고 설정했는데도, 시행착오가 있었다. 도움을 얻은 자료를 한번 더 정리함으로서 이해하는데 도움이 많이 됐다.

[참고자료]

야무님 자료
벨로퍼트님 자료
@craco 자료
craco-alias 자료
*야무님 유튜브 강의 내용이 참 좋은데 사람들이 많이 이용했으면 좋겠다.
*벨로퍼트님 React 서적도 초보자에게도 쉬운 설명으로 도움을 많이 받아서 추천한다.