2017-03-29
#297 '리액트(ReactJS) 개발자가 걷게 되는 길'
2017-03-29

(주: 그냥 재미로 읽으세요~ 일부러 막 쓴 부분도 있으니까 너그럽게~~~)

작년 초까지는 AngularJS + gulp + browserify 조합을 사용하다가 작년 하반기부터는 React를 보고 있다. (아직 공식적으로 내놓은건 없으니까 보고 있는걸로)

이젠 Angular 하면 1이냐? 2냐? 로 나뉘고 지금 1한다고 하면 다 끝난 기술을 사용하는 것 같은 느낌을 서로 갖게 되고 그렇다고 2를 한다고 하면 아직 시장에 도입도 안된 불확실한 기술에 시간을 쓰고 있구만~이라고 생각되는 분위기다.

다행인건지 어쩐건지 여튼 어쩌다보니 작년부터 React를 접해서 소소한 작업들을 하고 있는데 굉장히 흥미로운 반복적인 현상이 매우 빈번히 눈에 보이기 시작했다.

바로 리액트 하는 사람들이 걷게 되는 모종의 공통 코스가 있다는거다.

간략히 적어보면 이렇다.

리액트를 배운다

-> 예제를 봤더니 괜찮다. 신기하다. 그리고 할 수 있을것 같다!

-> 리덕스(Redux)가 있다는 걸 봤다. 읽어보니 이거이거~ 왠지 안쓰면 안될것 같은 느낌이 든다. 리덕스를 배운다.

-> 한동안 미친듯이 헷갈려 하기 시작한다 (Action/ActionCreator, state, props, setState, setStore, reducer) 이건 아쉽지만 Redux 만든 dan abramov의 예제도 여기에 한몫한다.

-> 상당수의 개발자는 이 때 아래와 같은 짤방의 상태에 빠진다.
programmer-problems.jpg

-> 그 어려운 걸 헤치고 드디어 HOC(High Order Component)를 이해만이 아닌 실제 쓰기 시작하고 리덕스의 Immutable Store의 정체와 connect 매직을 이해하게 될 때 쯤이면

-> ImmutableJs를 안배울 수가 없다. 마찬가지로 이건 안쓰면 안될 것 같은 느낌을 준다. 이제 ImmutableJs를 Redux외에도 적용하기 시작한다.

-> setIn, getIn, fromJs, toJS 천지가 된다.

-> 아참! redux-thunk를 썻던가? 안 썼다면 써야 할 것 같다.

-> 그 옆에 redux-saga 가 보인다. 고민한다. thunk를 아니까 외면할까? 말까? (주: 하지만 코드를 보면 그런말이 사라질거다. saga가 확실히 더 낫다)

-> facebook 엔지니어들이 보니까 뭔가 코드에다 이상한 것들, 마치 타입같은걸 붙이고 있는걸 발견한다.

-> PropTypes외에 Flow 라는게 있다는 걸 알게 된다. (이때 서버에서 넘어온 사람들과 아닌 사람들의 반응이 극명하게 갈린다)

-> PropTypes외에 flow까지 쓰고나면 이제 Google과 MS가 몇년전에 DartTypeScript를 만든 이유를 이해하게 된다

-> TypeScript로 넘어갈까?라는 생각이 조금 들었지만 왠지 그건 아닌것 같다는 사고의 경계를 세운다. (게다가 만들어낸 곳이 MS라구!!)

-> 이때쯤 되면 들인 시간과 노력으로 인해 다양한 의미로 AngularJS 2는 안될것 같다는 생각이 든다.

-> 참! Vue.js? 예제를 보고는.. '응~ 안사요~'

여기에 우리나라 개발자 기준으로는 몇 가지가 더 있다.
예를 들면 위 어느 구간에서도 테스트 코드는 시간을 투자하거나 잘 작성하진 않는다. 물론 적절한 이유와 함께.

개인 소견#

Test#

우선 테스트 부분에 대해서 개인 소견을 밝힌다면 테스트 부분은 써보니 React는 몇 가지로 그냥 편하게 수렴된다.

Type check#

Flow를 쓸거면 그냥 TypeScript 쓰길 권하고 싶다. 어차피 Babel로 transpile 할거면 큰 의미없다. 그저 내 마음의 경계선일뿐이다. 나중에 브라우저 업그레이드 된다고해도 Babel 뺄 이유도 없고 그럴 것 같지도 않아보인다.

ImmutableJs#

ImmutableJs를 일반 로직에도 쓸 생각이라면 심리즈 버전인 seamless-immutable을 진지하게 고민하길 권하고 싶다.

Local state#

죄악을 갖거나 엄격주의자의 홀에 빠지지 말고 적당히 쓰자.
You Might Not Need Redux – Dan Abramov

개발도구#

ES20xx 문법이나 CSS 안 익숙하면 MS의 Visual Studio Code(이하 Code) 추천한다. 다양한 힌트와 확장들이 어려움을 도와줄 것이다. 개인적으로는 웹스톰과 Code 둘 다 쓰고 있다.

Comment 0

Add a comment