[Zeros] creat react app & postcss

why postcss? | styled component와 tailwind를 쓰면서 불편했던 점

프리온보딩을 진행하면서 styled component와 tailwind css를 써봤다. 결론적으로는 둘 다 마음에 들지 않았다! 먼저 스타일드 컴포넌트는, 동적으로 className을 지정하는 것으로 스타일링이 업데이트 되지 않는 점이, 테일윈드는 className이 한없이 길어질 수 있다는 점이 별로였다. 하지만 styled component에서 사용되는 nesting 이나, tailwind에서 필요한 css 모듈을 설치해서 쓸 수 있다는 점은 편리했다(hide-scroll-bar와 관련된 모듈이었다). 

 

이런 편리함에도 불구하고, 스타일드 컴포넌트와 테일윈드가 마음에 들지 않아서 이것 저것 찾아보다가 postcss에 대해 자세히 알아보게 되었다. value를 이용해서 css 값을 변수화 할 수 있고, sass의 mixin 같은 기능들도 사용할 수 있다는 것을 알게 되자 신났다.

 

+) css와 js를 분리하는 것과, 분리하지 않는 것의 장단점도 물론 있다.  

 

postcss는 브라우저 호환성 문제에 대해 고민하지 않고, 최신 문법을 이용해서 css 코드를 작성할 수 있게 도와준다. 어플리케이션을 배포(build) 하면, 최신 css를 모든 브라우저에서 동작하는 구린(?) 코드로 변환해 주기 때문이다. babel이 js 코드를 변환해주는 컴파일러라면, postcss는 css 코드를 변환해주는 컴파일러이다. 

예를 들어 value, mixin 등과 같은 모듈을 설치하고 이 문법을 이용해서 css 코드를 작성하면, postcss는 이 문법으로 작성된 css를 (앱 배포시에) 모든 브라우저에서 동작하도록 변환해 준다. 

 

npx create react app을 이용해서 프로젝트를 생성하면, postcss가 함께 설치된다. 이것은 좋은 점 같아 보이지만 결론적으로는 그렇지 않았다. cra가 이미 postcss config를 설정해 두었기 때문에, 내가 원하는 모듈을 추가로 설치하고 config를 덮어 쓰는 과정이 필요했기 때문이다. 

 

1. eject 명령어 이용하기 
2. craco 패키지 이용하기 | eject 없이도 cra의 기본 설정(postcss 뿐만 아니라 webpack, babel 등의 설정)을 덮어 쓸 수 있게 도와주는 패키지 이다. 

 

config를 덮어쓸 수 있는 방법은 위와 같이 두 가지로 나뉘는데, eject를 하는 것은 아직 두려워서 ㅎ craco 패키지를 이용하려고 했다. 그런데 craco의 정식 버전은 cra 버전 4를 기준으로 하고 있었다. 그래서 내가 원하는 모듈(mixin🙉🙉🙉)을 따로 설치해 보는 것은 잠시 미뤄두고, cra에 기본으로 설정되어있는 @value를 통해 breakpoints와 color를 정의하기만 했다.