postcss autoprefixer CRA CNA reset styled-components

 

정리하면, sass 와 같은 css preprocessor 적용, styled-components 와 같은 css-in-js 도 적용. 추가적인 헬퍼인 polished, classnames 같은 것 추가.  reset 을 전역 scss 파일에 추가해서 적용해주고, postcss 에서 필요한 부분 추가해주면 되는데 이는 보통 browerslist 설정에 대부분 다 포함되어 있다. scss 즉, sass 용 preprocessor 는 node-sass 는 deprecated 되었으니 dart-sass 를 사용해야한다. 명령어는 npm install sass 이다.

 

 

postcss 란 autoprefixer 나 flexbox 또느 grid 관련 오류라던가 하는 등등의 몇몇 고려해야할 사항들을 위해 컴파일된 css 에 후처리가 필요한데 그때 그런 일을 해주는 것을 보통 postcss 라고 한다. autoprefixer 란 -webkit , -moz 같은 것을 앞에 붙여주는 것을 말한다.

 

CRA (create-react-app) 의 package.json 에

 

"browserslist": {
    "production": [
      ">0.2%",
      "not dead", // < 이건 지원이 끝난 브라우저를 고려안한다는 건데 이 옵션은 제거하는 것이 좋다고 한다.
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },

 

이 설정에 이미 autoprefixer 관련된 것이 다 추가되어 있다고 보면 된다. 

 

reset 은 css 가 각 브라우저마다의 기본값들이 다를 수 있는데 이 부분들을 통일해주기 위해 리셋 해주기 위한 css 를 말한다. 대표적으로 normalize reset 과 eric meyer 의 reset.css 가 있다. normalize reset 의 bootstrap 에 사용되었으나 아주 기본적인 리셋 외에 추가적으로 몇가지가 추가된 것이라서 eric meyer 의 reset.css 가 더 적합해보인다. ( http://meyerweb.com/eric/tools/css/reset/ )

 

여기에 이렇게 rem 을 위한 font-size 셋팅 추가. border 에 따른 box 의 형태를 통일하기 위해 box-sizing 관련 css 추가.

 

html {
  font-size: 62.5%;
}
*, *::before, *::after {
  box-sizing: border-box;
}

 

번외로 css-in-js 들을 비교해보면

 

https://www.npmtrends.com/emotion-vs-styled-components-vs-styled-jsx-vs-tailwindcss

이렇게 볼 수 있고 styled-components 가 상승세, 유지관리, 점유율 등 모두 제일 좋아보인다.

nextjs 에서는 styled-jsx 가 기본인지 babel-plugin 설정할 필요없이 npm install styled-jsx 만 하면 되고

https://nextjs.org/docs/basic-features/built-in-css-support#css-in-js 나머지는 babel-plugin 설정을 해야하는데

CRA (create-react-app) 의 경우에는 npm install styled-components 로 설치만 하면 babel-plugin 추가 설정 없이 styled-components 를 사용할 수 있다. 아마 CRA 는 styled-components 가 기본인거 같고 nextjs 는 styled-jsx 가 기본인 듯 하다.