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는 몇 가지로 그냥 편하게 수렴된다.

  • 단위테스트: Mocha or Jest
    • 나중에 추가: 그냥 Jest 쓰세요.
  • 컴포넌트/Shallow rendering test: enzyme(효소)

Type check#

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

ImmutableJs#

ImmutableJs를 일반 로직에도 쓸 생각이라면 심리즈 버전인 seamless-immutable을 진지하게 고민하길 권하고 싶다.
But ImmutableJs의 Record는 역시나 꽤 매력적!

Local state#

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

개발도구#

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

Comment 4

    • Markdown help
    • Headers
    • Links
    • Lists
    • Images
    • Blockquotes
    • Codes
    • Tables
    • Styling
    • Short Links
    • Markdown Input
      Markdown Output
      # This is an H1
      ## This is an H2
      ### This is an H3
      
      # This is an H1 ## This is an H2 ### This is an H3
    • Markdown Input
      Markdown Output
      * Red
          1. White
          2. Blue
      * Green.
      
      * Red 1. White 2. Blue * Green
    • Markdown Input
      Markdown Output
      ![title](https://repo.yona.io/assets/images/ico-like-small.png "Yobi")
      
      ![title](/assets/images/ico-like-small.png "Yobi")
    • Markdown Input
      Markdown Output
      > Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
      >
      > Aenean commodo ligula eget dolor.
      
      > Lorem ipsum dolor sit amet, consectetuer adipiscing elit. > > Aenean commodo ligula eget dolor.
    • Markdown Input
      Markdown Output
      `function test() {console.log("hello world");}`
      
      ```javascript
      function test() {
        console.log("hello world");
      }
      ```
      
      `function test() {console.log("hello world");}` ```javascript function test() { console.log("hello world"); } ```
    • Markdown Input
      Markdown Output
      | Project Type | Pull Request | Issue |
      | ------------ | ------------ | ----- |
      | Git          | Yes          | Yes   |
      | SVN          | No           | Yes   |
      
      | Project Type | Pull Request | Issue | | ------------ | ------------ | ----- | | Git | Yes | Yes | | SVN | No | Yes |
    • Markdown Input
      Markdown Output
      *This is an italic*
      **This is an bold**
      ~~This is an strike~~
      
      *This is an italic* **This is an bold** ~~This is an strike~~

    재밋게 잘봤습니다 ㅎ

    • Markdown help
    • Headers
    • Links
    • Lists
    • Images
    • Blockquotes
    • Codes
    • Tables
    • Styling
    • Short Links
    • Markdown Input
      Markdown Output
      # This is an H1
      ## This is an H2
      ### This is an H3
      
      # This is an H1 ## This is an H2 ### This is an H3
    • Markdown Input
      Markdown Output
      * Red
          1. White
          2. Blue
      * Green.
      
      * Red 1. White 2. Blue * Green
    • Markdown Input
      Markdown Output
      ![title](https://repo.yona.io/assets/images/ico-like-small.png "Yobi")
      
      ![title](/assets/images/ico-like-small.png "Yobi")
    • Markdown Input
      Markdown Output
      > Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
      >
      > Aenean commodo ligula eget dolor.
      
      > Lorem ipsum dolor sit amet, consectetuer adipiscing elit. > > Aenean commodo ligula eget dolor.
    • Markdown Input
      Markdown Output
      `function test() {console.log("hello world");}`
      
      ```javascript
      function test() {
        console.log("hello world");
      }
      ```
      
      `function test() {console.log("hello world");}` ```javascript function test() { console.log("hello world"); } ```
    • Markdown Input
      Markdown Output
      | Project Type | Pull Request | Issue |
      | ------------ | ------------ | ----- |
      | Git          | Yes          | Yes   |
      | SVN          | No           | Yes   |
      
      | Project Type | Pull Request | Issue | | ------------ | ------------ | ----- | | Git | Yes | Yes | | SVN | No | Yes |
    • Markdown Input
      Markdown Output
      *This is an italic*
      **This is an bold**
      ~~This is an strike~~
      
      *This is an italic* **This is an bold** ~~This is an strike~~

    @c3098051 재밌게 읽으셨다니 좋네요ㅎㅎ 고맙습니다! :D

    • Markdown help
    • Headers
    • Links
    • Lists
    • Images
    • Blockquotes
    • Codes
    • Tables
    • Styling
    • Short Links
    • Markdown Input
      Markdown Output
      # This is an H1
      ## This is an H2
      ### This is an H3
      
      # This is an H1 ## This is an H2 ### This is an H3
    • Markdown Input
      Markdown Output
      * Red
          1. White
          2. Blue
      * Green.
      
      * Red 1. White 2. Blue * Green
    • Markdown Input
      Markdown Output
      ![title](https://repo.yona.io/assets/images/ico-like-small.png "Yobi")
      
      ![title](/assets/images/ico-like-small.png "Yobi")
    • Markdown Input
      Markdown Output
      > Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
      >
      > Aenean commodo ligula eget dolor.
      
      > Lorem ipsum dolor sit amet, consectetuer adipiscing elit. > > Aenean commodo ligula eget dolor.
    • Markdown Input
      Markdown Output
      `function test() {console.log("hello world");}`
      
      ```javascript
      function test() {
        console.log("hello world");
      }
      ```
      
      `function test() {console.log("hello world");}` ```javascript function test() { console.log("hello world"); } ```
    • Markdown Input
      Markdown Output
      | Project Type | Pull Request | Issue |
      | ------------ | ------------ | ----- |
      | Git          | Yes          | Yes   |
      | SVN          | No           | Yes   |
      
      | Project Type | Pull Request | Issue | | ------------ | ------------ | ----- | | Git | Yes | Yes | | SVN | No | Yes |
    • Markdown Input
      Markdown Output
      *This is an italic*
      **This is an bold**
      ~~This is an strike~~
      
      *This is an italic* **This is an bold** ~~This is an strike~~

    저도 리액트 이제 아직 시작(?)하는 단계인데 공감이 많이 되네요 ㅋㅋㅋ 예전에 처음 이글 올라왔을때 리액트를 보기 시작했는데요 한동안 잊고 있다가 Redux, Relay, React-router등등 보다가 멘붕와서 빈둥빈둥 대다가 이 글이 생각이나서 다시한번 봤는데 엄청 공감이 되네요 ㅋㅋㅋ 아직 저 짤방에 머물러 있는 상태인데 앞으로 엄청 많은 단계가 남았네요 나중에 다시 보러오겠습니다 ㅎㅎ 재밌게 보고 갑니다~

    • Markdown help
    • Headers
    • Links
    • Lists
    • Images
    • Blockquotes
    • Codes
    • Tables
    • Styling
    • Short Links
    • Markdown Input
      Markdown Output
      # This is an H1
      ## This is an H2
      ### This is an H3
      
      # This is an H1 ## This is an H2 ### This is an H3
    • Markdown Input
      Markdown Output
      * Red
          1. White
          2. Blue
      * Green.
      
      * Red 1. White 2. Blue * Green
    • Markdown Input
      Markdown Output
      ![title](https://repo.yona.io/assets/images/ico-like-small.png "Yobi")
      
      ![title](/assets/images/ico-like-small.png "Yobi")
    • Markdown Input
      Markdown Output
      > Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
      >
      > Aenean commodo ligula eget dolor.
      
      > Lorem ipsum dolor sit amet, consectetuer adipiscing elit. > > Aenean commodo ligula eget dolor.
    • Markdown Input
      Markdown Output
      `function test() {console.log("hello world");}`
      
      ```javascript
      function test() {
        console.log("hello world");
      }
      ```
      
      `function test() {console.log("hello world");}` ```javascript function test() { console.log("hello world"); } ```
    • Markdown Input
      Markdown Output
      | Project Type | Pull Request | Issue |
      | ------------ | ------------ | ----- |
      | Git          | Yes          | Yes   |
      | SVN          | No           | Yes   |
      
      | Project Type | Pull Request | Issue | | ------------ | ------------ | ----- | | Git | Yes | Yes | | SVN | No | Yes |
    • Markdown Input
      Markdown Output
      *This is an italic*
      **This is an bold**
      ~~This is an strike~~
      
      *This is an italic* **This is an bold** ~~This is an strike~~

    @ahnsv ㅎㅎ 댓글 남겨주셔서 고맙습니다. 단계는 어디까지 오셨나요? 저는 Relay는 개요만 보고 뒤로 미뤘습니다.;;

Add a comment