cra 는 create-react-app 의 줄임말로 react 관련 여러 라이브러리들을 한꺼번에 설치할 때 유용한 명령어이다.
다만 프로젝트를 하면서 최적화 등을 적용하려면 필요한 라이브러리 위주로 설치하는게 더 좋기 때문에 cra 없이 스스로
react 설정을 하는 사람들도 많다. 나도 요즘은 cra 없이
설정을 하고자 한다.
예를들어 eslint 을 적용하고 싶다면 .eslinrc 파일을 만들고 eslint 라이브러리를 설치하는 식으로 진행을 한다.
이런식으로 필요한 라이브러리를 하나 하나 설정 파일을 만들고 설치하는 것은 확실히 cra 명령어 하나를 치는 것보다는 번거롭게 느껴진다.
그래서 각자 자신이 생각했을 때, react 프로젝트를 할 때 꼭 하는 설정들을 포함한 "나만의 작은 cra" 를 만드는 사람들도 꽤 있는 것 같다.
나는 이번에 react 로 chrome-extension 을 개발해보고 설정해보면서, react 와 typescript 그리고 eslint, babel 등 설정하는 것을 자동화하면 좋겠다는 생각이 들어서 create-chrome-extension-react-app 패키지를 만들었다!
링크는 아래와 같다.
https://www.npmjs.com/package/create-chrome-extension-react-app
다운로드 수는 많아 보이는데 아마 내가 테스트 해보려고 한거라서 거의 다 내가 한걸꺼다.. 다음주부터의 다운로드 수가 중요할듯..
내가 이 패키지를 하면서 삽질했던 부분에 대해 설명하고자 한다.
우선은.. node js 에 익숙치 않고, npm 패키지를 만들때 컴파일 하는 방법을 몰라서 확장자 실수나, 다른 파일을 잘못 import 하거나 하는 댕청한 실수들을 했었다..
다음에 라이브러리 만들 때는 이걸 참고해서.. 디버깅을 우선 하려고 한다.
https://stackoverflow.com/questions/47021083/vscode-debug-code-in-node-modules-directory
그 다음에 삽질했던 건
npx creat-chrome-extension-app <프로젝트 이름>
이런식으로 설치 후 테스트를 진행 하였는데,
이 과정에서 내가 분명히 오류를 수정해서 다시
배포했는데도 똑같은 오류가 발생했다.
그래서 처음엔 npm cache clean --force
명령어를 사용해서 캐싱된 걸 지우면 되겠지 했는데
먹히지 않았다.
그래서 오류 로그를 자세히 살펴보았다.
requiire stack 아래에 node_module~ 에 내가 설치했던 오류가 담겨있는 내 패키지가 있는 것을 보고
node_modules 폴더를 삭제했다.
그 이후 다시, npx creat-chrome-extension-app <프로젝트 이름>
이렇게 설치를 하고, 만들어진 프로젝트로 들어가서
npm run build 를 치고
chrome://extensions 에 들어가서 dist 파일을 업로드 하고 실제 테스트를 해보았다.
다행히 잘 나왔다.
이번 프로젝트는, 참고할만한 좋은 자료와 컴파일러 없어도 코드를 오류 없이 짜는 능력의 중요성, 내 자신의 꼼꼼함을 믿지 말것이라는 교훈을 얻었다.
참고자료: https://velog.io/@jjunyjjuny/React-TS-boilerplate-%EC%A0%9C%EC%9E%91%EA%B8%B0-3-Error%EB%93%A4,
https://github.com/zereight/woowacourse-tiny-cra
