리액트 스터디 테크트리

React(이하 리액트)를 배우면서 필요한 요소들이 몇 가지 있다. 그런 건 여기저기 알아서 찾아봐야하는 부분이 많더라고. 어떤 것들을 배워야하는 지 알려주는 포스팅은 찾기가 힘든 것 같아서 내가 어떻게 리액트를 공부했는지 써보려고 한다. 이 글을 끝까지 읽을 가치가 있는가 없는가를 위해서 자기 PR의 문단을 가져볼까도 했는데 그건 귀찮아서 생략ㅎ

1. Webpack? Browserify?

Webpack or Browserify & Gulp: Which Is Better?

Webpack(이하 웹팩)이 여러면에서 많이 낫다. 나는 그런 결정을 내릴 때 위 포스팅을 보고 결정했는데, 웹팩이 속도, 구조, 커뮤니티 활성화 정도, 힙-한 느낌등을 봤을 때 더 나은 것 같아서 웹팩 쓰는 걸 추천.

2. ECMAScript

리액트 코드는 웹팩에서 작성하게 되는데, 그러다보면 최신 자바스크립트코드로 작성되어있는 ‘예제’들을 많이 만나보게 된다. 아무래도 리액트 코딩에 익숙하지 않은 때에는 예제코드, 스택오버플로우의 답변들을 보면서 복붙을 하는 상황이 많을 텐데, 그런 코드들이 전부 ECMASciprt를 이용해서 짜여져있는 경우가 많은 것. 이전에 Node.js를 짜봤다면 별로 상관없고, 그렇지 않다면 다음 포스팅들을 참고하자.

Overview of JavaScript ES6 features (a.k.a ECMAScript 6 and ES2015+)

대충 알고 있다면 위 링크를 Cheat Sheet 처럼 사용하면 되고, 더 상세한 내용을 알고 싶으면

A Practical Dive into ES6 and Maintainable JavaScript Modules🏊

ECMAScript 이외에도 Promise에 대해서도 이해가 필요해지게 되는데…

Promise – JavaScript | MDN – Mozilla Developer Network

[JavaScript] 바보들을 위한 Promise 강의 – 도대체 Promise는 어떻게 쓰는거야?

위 링크를 참고하도록 하고, Promise 이외에도 더 깊-게 살펴보고 싶은 마음이 든다면…

Understanding JavaScript’s async await

위 링크를 참고해보자. 들어가자마자 있는

도 굉장히 좋은 링크인데, 뒤 쪽에 소개할 redux-saga라는 라이브러리를 위해서는 반드시 필요한 지식들인데, 그렇지 않더라도 비동기 처리할 때에 promise, generator, await & async가 너무너무너무 파워풀하니 꼭 알아두길.

3. React? Inferno?

리액트를 배우는 데에는 역시나 공식 홈페이지 정독이 최고다. 요즘 오픈소스 프로젝트들은 널리 쓰여야 살아남기 때문에 공홈 설명이 불친절할 수가 없나봐. 그거 말고도 리액트가 돌아가는 와꾸를 더 깊게 이해하고 싶다면 React의 기본, 컴포넌트를 알아보자 가 좋다.

Inferno(이하 인페르노)는 리액트의 구조를 가지면서 훨씬 경량에 고속인 라이브러리다. 혹시 리액트의 속도에 불만일 것 같은 느낌이 든다면 한 번 홈페이지를 들어가보도록 하자.

4. Redux? Mobx?

지겹게 들어왔겠지만 다시 한 번 언급하자면 Redux는 MVC 모델로 치면 V에 해당하는 라이브러리라, flux 아키텍쳐를 페이스북이 발표했지만, 그 직접적인 구현체는 야속하게도 조금 늦게 공개해서 여러가지 구현체들이 두루두루 쓰이고 있다. 가장 무난한 라이브러리는 redux이므로 이 부분에 크게 고민하고 싶지 않다면 redux를 선택하는 것이 맞고, 혹시 reactive (react랑은 다른 개념이다.) 패턴, observable 패턴에 익숙하면서 요즘 angular2로 인해 다시금 주목받는 요쪽 패턴이 끌린다면 mobx가 무난하며, facebook이 발표한 relay도 있는데 개인적으로는 별로 (…)

Redux is a predictable state container for JavaScript apps. 공식 홈페이지가 깃북으로 아주 잘 가이드가 되어있다.

MobX – Simple, scalable state management mobx도 그렇다.

MS는 ReactiveX를 왜 만들었을까? (feat. RxJS) 를 읽어보면 어느 정도 reactive programming에 대해서 이해할 수 있을 듯. 하지만 어디까지나 프론트엔드 프로그래밍에 익숙하지 않으면 일단 redux로 시작하는 것을 추천추천추천!

5. thunk? saga?

redux를 사용할 때 async action들을 처리하는 데에 redux-thunk / redux-saga 중에 고르게 된다. thunk는 처음 접근할 때 아주 편리하다. 러닝커브도 괜찮고 개념도 쉽고 쓰기도 쉽다. 근데 redux-saga가 이런저런 기능들을 구현하기에 훨씬 더 유연한 구조더라고.

예를 들어서, redux-form이라는 라이브러리를 사용하게 되면 input[type=text]인 녀석들의 focus, value change들을 아주 손쉽게 관리할 수 있게 되는데, 문제는 그 텍스트 필드의 값들이 redux-form이 관리하는 state에 보관된다는 것. 그래서 어떤 Action의 결과에 따라서 그 필드의 값이 바뀔 수도 있고, 아닌 경우도 있는… 그런 복잡한 경우가 꽤 있었는데 saga를 사용하는 경우에는 아주 손쉽게 풀어낼 수 있었다든가.

6. react-router

라우팅 관리해주는 라이브러리. 이것 역시 공식 홈페이지 예제만 적당히 복붙해서 쓰면 아주 손쉽게 도입할 수 있다. 이 라이브러리랑 redux랑 같이 쓴다면 react-router-redux 의 도입도 같이 고민해보도록 하자. action을 dispatch해서 리액트앱의 라우팅을 관리할 수 있게 되는 장점이 생김!

7. Fetch? Axios?

정말 멋진 Fetch API! XHR를 대체하는 새로운 표준이지만, 정말 구리게도 cancelable promise를 지원하지 않는다. 내가 fetch API를 쓰지 못했던 이유를 보면 둘 중에 어떤 걸 고르는 것이 맞는 가 판단할 수 있게 될 듯. 이 포스팅을 보기 전이라서 fetch api로 프로젝트를 이미 짜버렸는데, 만약에 시간을 되돌릴 수 있다면 axios로 갈아탈 듯ㅎㅎ

8. 그 외

위에서 잠깐 언급한 폼 관리를 redux적으로 도와주는 redux-form에 말고도,

루프와 조건문을 JSX에서 좀 더 자연스럽게 쓰일 수 있게 도와주는 JSX Control Statements,

state로 부터 필요한 값들을 memoization으로 캐싱해주는 reselect

state를 진짜 immutable한 객체들로 관리할 수 있게 도와주는 immutablejs

등이 있고… 사실 대부분 내가 이 라이브러리들을 접하게 된건 이 보일러플레이트 덕분이다. 예전 버전으로 프로젝트를 꾸렸었는데, 그 당시에 한 페이지를 반복적으로 들어가게 되면, 들어갈 때 마다 redux-saga가 여러번 inject 되는 버그가 있었다. 나는 내 나름대로 내 로컬에서만 고쳐서 대충 썼었는데, 최신 버전에서는 고쳐졌는지 모르겠다. 쓰기 전에 꼭 확인해보길!

Leave a Reply