TIL 210520

와우! gatsby 테마 넘 만족

현재 개발 중인 web extension은 create-react-app으로 만들었는데, 일반 web app이 아니라 웹 익스텐션이라 개발 세팅이 익숙치가 않다. (생각해보니 webpack에 익숙하지 않은 거 일 수도 🤔 )

오늘은 web extension의 auto reload 세팅을 변경하고 싶었다.

CRA를 사용하여 web app을 만들고, npm run start 로 실행하면 코드를 변경할 때마다 화면이 re-loading 된다. 이는 사실 webpack dev-server가 하는 역할이다.

문제

개발중인 web extension은 npm run start로 열린 3000 포트에서 실행되나 build 된 결과물(/build)을 확장 프로그램 관리에서 추가하여 확인해 볼 수 있게 설정되어 있다. web extension의 background script 중에 hot-reload를 추가하여 build 폴더가 업데이트 될 때마다 reload 되도록 했는데 문제는 build 폴더가 자동으로 업데이트 되진 않는다는 거였다. 그래서 일일이 코드 변경 후에 npm run build를 해서 build 폴더를 새로 만들어줬다.

해결 방법

cra는 개발 환경에서 file과 folder를 serve하기 위해 webpackDevServer를 사용하기 때문에 build된 결과물이 disk에 남는걸 막고 있다. 우리가 원하는건 1. 코드의 변경 사항을 감지 2. 새로 build 후 결과물은 /build 폴더에 저장이다. webpack.config.js를 변경하고 싶지만 project를 eject 하지 않기 위해서 cra-build-watch 를 사용하기로 했다.

npm run watch 로 실행하면 1. 코드의 변경 사항을 감지 ✅ 2. 새로 build 후 결과물은 /build 폴더에 저장 ✅ 되며 자동으로 page와 pop up이 reload 된다.

여전히 아쉬운 점

reload 될때마다 열려있던 pop up이 닫히게 된다. extension의 pop up이 닫히면서 같이 열려있던 console 창 또한 닫히게 되는데 매번 build 할 때마다 새로 pop up을 열어야 하는게 여간 귀찮은게 아니다. 다음에는 이를 좀 더 개선해보아야겠다.