typescript react 에 post-css 적용하기 그리고 삽질기

글쓰기에 앞서 진짜로post-css를 적용하기 힘들었다.
이유는 eject를 하는 방식과 설정 그리고 다양한 방법이 있는데, 나와 맞는 방식을 찾기 위해서 많은 고민을 했다.

적용을 해보면서 문제점과 방식 고민을 한 부분들을 메모하고자 글을 작성을 했다.

이 글을 다른사람들이 읽을지는 모르겠지만typescript,react.js든 적용하는 방법은 똑같기 때문에 적용을 해야된다면 따라서 할 수 있도록 쉽게 작성을 해보려고 한다.

요새 트랜드라고 하는 `post-css` 확실히 대세가 된 것 같긴 한 이유는 점점 사용자들이 많아져가는 것을 몸으로 느끼고 있다.

불과 1년~2년 전만 해도 `sass`, `scss`에 대한 글들이 정말 많았다.

`post-css`에 대한 글들이 보이기도 적용하는 질문도 많아서 이번 기회에 사용을 해보려고 하였다.

문제점
보통은 개요를 쓰지 않지만 나중에 나를 위해서라도 설명을 적어둔다.
다른 사람들의 방식을 찾아보니 webpack 설정을 하여 사용하는 방법 혹은 다른 패키지를 이용하여 사용하는 방법 등이 있었다.

참고블로그
김정환 블로그 postcss
postCSS 설정 박은정블로그

다른 글들도 많았지만 김정환님과 박은정님의 블로그를 특히 주의깊게 보았고 큰 도움이 되었다.
하지만 나와는 맞지 않는 구조라고 생각을 했다.
이유는 위에서 말했지만 webpack과 다른 package를 사용하지 않는 방법을 사용하고 싶기 때문이다.

웹팩을 사용하지 않는 이유는 eject를 하게되면 기존의 cra처럼 다시 돌아올 수는 없어보였다. 또한 webpack을 건들기에는 나의 실력이 미미했다. 또한 다른 패키지를 설치하자니 패키지를 보고 싶지도 않았다....귀차니즘...

방법
postcss-cli를 사용하여 스크립트 명령어를 이용하여 pcss파일을 css파일로 빌드를 해주는 방식으로 하려고한다.
이렇게 될 경우에는 스크립트를 연속적으로 사용할 수 있는 package만 사용하면 된다.

- 참고 하시오
    ###[npm-run-all 을 이용한 스크립트 사용방법](https://xxxxersuy.com/2?category=961571)

위 글을 참고하여 npm-run-all 패키지를 설치하면 될 것 같다.
패키지 설치를 한 후 package.json 파일에서 스크립트로 빌드를 해주는 부분을 만들려고 한다.

다음 글에서 설치, 실행 부분을 작성을 하도록 하겠다.

GITHUB주소 : github.com/xersuy/custom_react

다음글

xxxxersuy.com/8