빠른 개발의 시작, boilerplate

2020/01/12 - [엥휴/프로젝트] - 와이어프레임 만들 때 기억할 세 가지

일단 와이어프레임대로 개발을 시작하기로 했다. 처음에는 던져놓은 말이 있으니 electron과 react를 동시에 사용할 수 있는 환경을 구축해보려 했다. 어떤 블로그 글을 보고 따라했는데, 느리고 버벅거려 뭔가 잘못된 건가 싶었다. 정보를 좀 더 찾다가 electron-react-boilerplate를 발견했다.

 

 

매우 fancy하게 잘 만들었다. 지금와서 생각해보니 배경 그라데이션 때문에 잘 만들었다고 생각했나보다. hot-loader를 사용하여 빠르게 결과를 볼 수 있고, electron-builder를 사용하여 배포도 간편하다.

 

다만, 배워야 할 게 좀 많았다... react만 얕게 알고 있는 상태에서 프로젝트를 시작했는데, electron-react-boilerplate 측에서는 Learning Resources로 react, redux, electron-builder, node, flow, javascript, jest, electron을 제시하고 있다.

 

언뜻 보기엔 방대해보이지만 사실 꼭 그렇지만도 않은게, electron-builder는 명령어 몇 개만 사용하며, flow는 디버깅용, jest는 유닛 테스트용 모듈, electron도 포장용으로만 사용해서 실질적으로 필요한 지식은 redux 정도? 그마저도 state를 많이 가지지 않는 간단한 프로젝트이기 때문에 redux를 걷어내고 진행하기로 했다. DB로는 sqlite3, 프론트엔드 디자인으로는 reactstrap을 사용하였다.

 

...라고 생각한 시절이 있었는데 결국 redux와 webpack 구조를 이해하지 못하고 훨씬 구조가 간단한 electron-webpack으로 넘어왔다. 관리해야 할 상태가 그렇게 많을 것 같지도 않고... 최소한만 갖춰진 electron-webpack-quick-start를 사용하였다. 앞서 사용했던 electron-react-boilerplate가 워낙 고급 기능이 많이 포함되어 있어서 불편했던 점이 몇 가지 있었다. 일단 react부터 깔아야해...

 

교훈

1. 원하는 구성의 boilerplate를 검색하여 빠르게 시작하자.

2. 너무 많은 기능은 배워야 할 것도 많아 어려울 수 있다.

3. 프로젝트 요구 사항에 맞게 환경을 구성하자.