react study #3

React를 열심히 공부를 했었다. #1, #2. 그러다가 큰 변경없이 angular에 redux만 섞어서 써보자는 생각도 해서 실제로 꽤 많은 부분을 ngRedux를 사용해서 포팅을 했었는데, 포팅하면 할 수록 react로 했으면 더 간편했을 텐데.. 같은 부분이 마구마구 생겼다.

angular의 dircetive로 react의 component를 흉내내기를 한 것인데 변수를 넘겨주면 =, 일반 문자열을 넘겨주려면 link constructor의 attrs에서 받아오기, 동적인 문자열은 @, 함수는 & 을 써서 넘겨와야하고, 각종 controller, controllerAs, bindToController 와 같은 디렉티브 설정을 하나의 ‘위젯(= angular.directve, react.component)’를 쓸 때마다 작성해야하는 것은 굉장히 귀찮았다. 재미없었다.

이번에는 RoR 붙박이 살림에서 벗어나서 쀼-어한 webpack으로 프로젝트를 진행해보려고 했다. 레일즈에서 bower-rails를 쓰거나, webpack-rails gem들을 얼마나 써왔던가. (감격) (울컥) 그러면서 angular2와 react를 고민했지만 역시 대세는 react. 그래서 이번 포스팅에서는 react 뿐만 아니라 이번 프로젝트를 만들면서 가져다 쓴/쓸 라이브러리들의 리스트와 간략한 설명을 해볼까 한다.


 

reactredux

react 개발의 가장 기본적인 세트. 안 쓸 수는 없는 것 같은데, 만약에 백엔드도 새로이 개발하는 단계라면 Relay라는 페이스북에서 만든 Flux 구현체도 있는 것 같은데, 나는 백엔드가 RoR이잖아? 무난한 Redux를 선택헀다.

intl, react-intl

다국어 지원이 필요했다. 야후에서 만든 react-intl로 결정했다. node, web browser에서 새로 정의된 표준이 intl 라고 새로 나왔는데, 그것을 위한 polyfill까지 같이 넣었다. 그리고 이런 polyfill은 쓰지 않는 브라우저에서 사용하면 별루잖아? webpack으로 브라우저 지원에 따라 동적으로 따로 로딩하는  것이 현명하다. 이 링크를 참고.

redux-form

react는 redux랑 자주 쓰고, react에서 input value를 관리하는게 귀찮은데, 그것을 한 방에 해결해주는 고마운 녀석이다. 사실 내가 찾아낸 라이브러리는 아니고, 예전에 회사에 리뷰공화국 개발자님이 놀러오셨을 때 react 쓰세요, 두 번 쓰세요라며 전도해주시면서 알려주신 라이브러리다. 사실 양방향 바인딩이 된다기 보다는 정말 스무스하게 input value의 변경이 자연스럽게 store, reducer로 들어오게 도와주는 라이브러리에 가깝지만!

react-router, react-router-redux

angular에 ng-router, ui-router가 있다면 react에는 react-router가 있다고 한다. 그래서, react-router와 redux랑 연결해주는 라이브러리도 있다고 들었고 찾아보니 그것이 react-router-redux. 브라우저 히스토리 스택을 redux에 계속 업데이트 해주는 녀석인 듯.

redux-logger, redux-thunk

redux에 쓰이는 middleware. logger는 설명이 필요없겠고 thunk는 redux로 비동기를 구현하는 것을 도와주는 라이브러리이다.

immutable

redux에 잘 어울림. 신뢰가능한 데이터를 보증의 이유로 사용하는 듯.

whatwg-fetch

새로운 http request 표준 fetch가 구현되지 않은 브라우저들을 위한 polyfill. 비슷하게 axios도 사용을 고려해봤는데 아직 정하진 못했다.

 


 

babel, babel-polyfill

jsx, es5-7을 하위 버전의 자바스크립트로 트랜스파일해준다.

eslint, eslint-config-aribnb

자바스크립트 린팅. 이와 더불어서 apm에서 atom-ternjs, fast-eslint 도 설치해서 쓰면 넘나 좋다.

 


이외에 Test, CI 등을 어떤 툴로 해야하는지를 다 정하지 않았다. 이제 막 개발을 시작해서 ㅎㅅㅎ… 물망에 오른건 Karma, Jenkins 정도인데 저번주 내내 문서만 보다가 이번 주 목요일부터 본-격 개발에 들어가기 시작했는데도 아직 문서를 뒤적거리며 개발하는 것 같다.

거기에 아직도 webpack에 대한 이해도가 높지 않고 이런 저런 테스팅 자동화를 위해서는 gulp도 잘 알아야할 것 같은데 아직 잘 모르겠거든. fetch도 polyfill이 있으니까 intl처럼 동적으로 부를 수 있겠거니 싶다가도 이미 그렇게 불러오고 있는건가 헷갈리기도 하고… 아휴, 나도 참~

 

Leave a Reply