Electron + React + Tailwind 프로젝트 셋팅 과정

프로젝트 셋팅 과정에서 겪은 문제

처음에는 react - electron - tailwind 순서로 설치 진행하였더니, tailwind가 적용되지 않았다.

폭풍 구글링을 통해서 electron-react-boilerplate라는 것을 발견했다.

electron-react-boilerplate는 Electron과 React를 결합한 애플리케이션 개발을 위한 보일러플레이트 프로젝트이다. 빠르게 개발을 시작할 수 있도록 환경셋팅을 해둔 것이다. 여기에서는 Electron과 React를 함께 사용하고, Webpack을 이용해 번들링한다.

https://electron-react-boilerplate.js.org/

위 프로젝트를 사용하게 되는 경우 다음과 같은 장점이 있다.

장점

• 빠른 시작: 많은 설정이 이미 완료되어 있어, 바로 개발을 시작할 수 있음
• 최적화: 기본적으로 웹팩(Webpack) 구성, Hot Module Replacement (HMR), TypeScript 지원 등 많은 최적화가 포함
• 표준화된 구조: 프로젝트 구조가 표준화되어 있음

단점

• 유연성 제한: 특정한 방식으로 설정되어 있어, 커스터마이징이 복잡
• 의존성 관리: 보일러플레이트가 업데이트되면, 종종 의존성 충돌이나 호환성 문제를 처리

실제로 github에 들어가보면 기본 셋팅 구조가 복잡해 보인다. 그래도 내가 건드리는 폴더는 눈에 보이기 때문에 react를 어느정도 사용해 보았다면 크게 문제 는 없을 것 같았다.

하지만, 프로젝트 특성 상 간단한 기능들만 구현하면 되기에, 굳이 보일러플레이트의 여러 셋팅이 필요할 것 같진 않았다.

해결

처음과 달리 설치 순서를 react - tailwind - electron 로 바꾸어 진행하였더니 다행히 해결 되었다.
이유는 잘 모르겠지만, 아마 설치하면서 의존성 문제나 버전 문제가 있어서 처음 방법이 실패한게 아닌가 싶다.

추후 셋팅 과정에 대해 상세히 남겨 놓아야 겠다.