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
xersuy/custom_react
custom component. Contribute to xersuy/custom_react development by creating an account on GitHub.
github.com
다음글
CRA[typescript react] 에 post-css 적용[2]
typescript react 에 post-css 적용하기 그리고 삽질기 두번째 첫번째 글 2021/01/21 - [notion/npm package] - CRA[typescript react] 에 post-css 적용[1] CRA[typescript react] 에 post-css 적용[1] typescrip..
xxxxersuy.com
'notion > npm package' 카테고리의 다른 글
mockserver 를 이용해 mock서버 만들기[3] (0) | 2021.02.04 |
---|---|
mockserver 를 이용해 mock서버 만들기[2] (0) | 2021.02.04 |
mockserver 를 이용해 mock서버 만들기[1] (1) | 2021.02.02 |
CRA[typescript react] 에 post-css 적용[2] (0) | 2021.01.21 |
CRA[typescript react] 에 post-css 적용[1] (0) | 2021.01.21 |
React or javacript npm-run-all 으로 npm 스크립트 여러개 실행하는 방법 (0) | 2021.01.20 |
댓글0