> For the complete documentation index, see [llms.txt](https://haleyryu.gitbook.io/engineer/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://haleyryu.gitbook.io/engineer/frontend/react-x-redux/react-redux-webpack4-materialui.md).

# 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로 버전업을 하고 싶었던 이유는 아래와 같습니다.<br>

* Dev/Prod 를 mode 로 명시적으로 나눔으로써 Config 없이 빌드가 가능해졌다.
* 빌드 속도가 더 빨라졌다.
* 2018년 상반기에 릴리즈 되었고, 이제는 적용 사례 문서가 충분히 많아졌다.

### Material UI

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

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