0. React, Redux 를 선택한 이유

React, Redux, Webpack4, MaterialUI 4가지를 선택한 이유

팀에서 데이터 조회 및 운영툴이 필요하여 만들게 되었습니다.

지금은 데이터 조회 기능이 전부인 작은 서비스이지만, 이후 팀에서 운영이 필요한 부분들을 모두 담을 애플리케이션이라 React, Redux, Webpack4, Material UI 를 스펙으로 서비스 스펙을 설정하게 되었습니다.

세부적인 코드는 업무 내용이라 여기 작성하진 못하겠지만, 기본적인 셋팅과 틀은 어디서나 공통적으로 사용될 내용이라 블로그에 기록을 해두면 좋을것 같아 함께 진행해보려 합니다.

0. 너로 정했다!

우선은 들어가기에 앞서, 많고 많은 Framework와 Library 중에 아래 도구들을 사용하기로 결정한 이유에 대해 정리해보았습니다.

React

바야흐로 춘추전국시대에서 살아남은 React와 Vue.

작년에 Vue 로 팀내 운영툴을 만들었는데 저는 템플릿 형태로 앱을 제작하던게 습관이 되어있던터라 진입장벽없이 쉽게 만들어 사용했습니다.

보통 Vue는 경량의 앱을 만들고 싶을때, React는 큰 규모의 앱을 만들때 사용한다는 학계정설 기준이 있는것 같습니다.

이번에 제작하는 앱도 그리 큰 규모는 아니지만 이후의 확장가능성이 충분히 있기에 React 를 선택하게 되었습니다.

Redux

• 사실 제일 큰 이유는 그냥 Redux를 쓰고 싶었습니다. - React에 종속적이지 않아 어디든 적용할 수 있는 개념이니, Angualr를 사용할때도 유용하게 쓸 수 있을것 같아 제대로 경험해두고 싶었습니다.

Webpack4

우선 Webpack 자체를 사용한 이유는 수많은 파일을 번들로 묶어 http 요청수를 최소화하여 최적화된 성능을 내고 싶었습니다.제가 이전에 했던 프로젝트에선 Webpack3 를 사용하고 있었는데, 이번 작업에서 특히 v4로 버전업을 하고 싶었던 이유는 아래와 같습니다.

• Dev/Prod 를 mode 로 명시적으로 나눔으로써 Config 없이 빌드가 가능해졌다.

• 빌드 속도가 더 빨라졌다.

• 2018년 상반기에 릴리즈 되었고, 이제는 적용 사례 문서가 충분히 많아졌다.

Material UI

Google Material Design 을 구현하고 있는 React용 라이브러리들이 몇몇개 있었지만, 그중 Material-UI 를 선택한 이유는 다음과 같습니다.

• 제일 많이 사용되고있다. Github Star가 4만 5천개, Fork는 만번 정도 되었다. - 경험을 비추어보면 사용자가 적은 라이브러리를 사용하게되면 이슈가 있을때 StackOverflow에 관련 질문이 많이 없어서 해결하기 힘들었다. - 역시 인기많은게 최고인거 같다.
• jQuery 를 사용안하고 있다. jQuery를 사용하게되면 React의 Virtual DOM 개념과 섞여 컨트롤 할 수 없는 상황이 올 수 있다. - 전에 Vue.js 개발을 할때 잘모르고 jQuery로 돔 제어를 했더니 미궁에 빠진 적이 있었다.

• Google Material 의 Component, Icons 를 잘 지원하고 있다.