search

doortts / blog

0 stars 0 forks source link

'리액트(ReactJS) 개발자가 걷게 되는 길' #267

Open doortts opened 7 years ago

doortts commented 7 years ago

@doortts (doortts) 님이 작성한 게시글입니다. ---

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

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

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

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

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

간략히 적어보면 이렇다.

리액트를 배운다

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

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

-> 한동안 미친듯이 헷갈려 하기 시작한다 (Action/ActionCreator, state, props, setState,getState, store, 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가 몇년전에 Dart와 TypeScript를 만든 이유를 이해하게 된다

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

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

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

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

개인 소견

Test

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

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 둘 다 쓰고 있다.

--- attachments --- programmer-problems.jpg

doortts commented 7 years ago

@c3098051 (Jeff Jung) 님이 작성한 코멘트입니다. ---

재밋게 잘봤습니다 ㅎ

doortts commented 7 years ago

@doortts (doortts) 님이 작성한 코멘트입니다. ---

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

doortts commented 7 years ago

@ahnsv (SANGTAE Ahn) 님이 작성한 코멘트입니다. ---

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

doortts commented 7 years ago

@doortts (doortts) 님이 작성한 코멘트입니다. ---

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

doortts commented 7 years ago

@benevbright (Bright Lee) 님이 작성한 코멘트입니다. ---

하... 작년부터 Xamarin.Forms에 매료되서 iOS/Android 앱을 출시를 했는데.. 앱이 이제 안정화가 된 상태에서 좀 보니.. React 가 미래네요.. ㅠㅠ 들인 노력이 너무 많아서 버릴 수도 없고.. 이 일을 어찌할꼬........

doortts commented 7 years ago

@doortts (doortts) 님이 작성한 코멘트입니다. ---

@benevbright 이바닥이 이렇다니까요. 저도 Angular 1 열심히 했었는데 이젠 어디가서 안다고 말도 안해요.ㅋ

doortts commented 7 years ago

@fivehoho75 (justin) 님이 작성한 코멘트입니다. ---

뭐예요 이거 ㅋㅋㅋ redux-saga 까지 제가 왔던 길을 그대로 집고 있네요.. 소오름...

doortts commented 7 years ago

@drakkarverenis (irrationnelle) 님이 작성한 코멘트입니다. ---

읽으면서 한참 낄낄 거렸습니다 ㅋㅋ 안 그래도 지금 thunk랑 saga 중 뭘 쓸까.. 둘 다 꼭 써야 하긴 하는 걸까 하며 검색하다가 들어오게 되었는데 아 너무나 공감가네요 ㅋㅋㅋㅋ

doortts commented 7 years ago

@javarouka (Yi, Hangehee) 님이 작성한 코멘트입니다. ---

ㅋㅋ 요새 Saga 보면서 덩달아 제네레이터도 공부하게 되네요

그런데 포스트 구독을 하려고 사이트를 뒤져보고 소스까지 봤는데 구독 주소가 없는 것 같아요! 추가하실 생각은 없으신가요?

doortts commented 7 years ago

@doortts (doortts) 님이 작성한 코멘트입니다. ---

@javarouka 상단의 프로젝트 지켜보기를 누르시면 새로 등록되는 글이나 댓글을 메일로 받아 보실 수 있어요.

doortts commented 7 years ago

@c3098051 (Jeff Jung) 님이 작성한 코멘트입니다. ---

React 처음 배울때 읽었는데, 지금와서 읽으니 또 색다르네요 ㅎ React는 처음 배우고, Redux, Saga 등등을 파악하고 나면.. 그 다음부터는 "어떻게 잘 짜느냐" 가 제일 관건이더라구요..

그 때만해도 Vue.js 에대해서 관심이 0도 없었는데, 요즘은 흐름이 또 Vue.js로 넘어가고 있어서 들여다보려고 준비중입니다;;

doortts commented 7 years ago

@doortts (doortts) 님이 작성한 코멘트입니다. ---

@c3098051 맞는것같습니다. 어떻게 구조적으로 잘 짜느냐가 결국은 중요해지는 것 같습니다. 시간이 지나면서 앱이 점점 더 복잡해지니까요.

저도 시간이 지나서 쓴 글을 다시 보니 조금 생각이 바뀐 부분이 보이네요. Typescript에 대한 생각이라던가 말이죠.

doortts commented 7 years ago

@jooyung.han (Jooyung Han) 님이 작성한 코멘트입니다. ---

재밌게 읽었습니다. 여전하시네요 ^^;;