react study #1

react를 써보기로 했다. angular2를 공부하고 있던 것도 사실인데, 의외로 예제같은 것을 찾아보다 보면 angular2와 react를 섞어쓰는 예제가 꽤나 있더라고. 그리고 react의 러닝커브가 굉장히 낮다고 하니 한 번 배워봐서 나쁠 것은 없다는 생각도 했다. 거기에 자유로운 학습을 할 수 있는 직장에 다니고 있고 실제로도 장려하는 분위기라, 실제 서비스에서도 부분부분 적용해보기로 했다.

하지만, 그래도 가벼운 마음으로 토이 프로젝트를 하나 진행해볼까 생각해봤는데 그 주제는 크게 두 가지이고, 구현 방향도 크게 두 가지이다. 주제 하나번역물 관리 시스템.  단어/문장 각각마다 n개의 언어 버전이 있고, 하나의 언어에서 변경이 발생하면 나머지 n-1개의 언어 담당자에게 푸시가 가서, 수정을 하고 업데이트 하는 방식. 또 다른 주제로그중심의 TodoList. 분더리스트나 옴니포커스를 사용하다보니 내가 얼마나 자주 운동을 해왔는지 트래킹하기가 힘들더라고. 완료한 태스크에 포커스를 맞춘 앱을  하나 만들어보면 어떨까 생각해봤다.

구현 방법은 다음과 같다. 적당히 리액트로 프론트만 만든 다음에 서버는 적당히 있는척 흉내만 내서 프론트에만 오롯이 집중하는 것이 첫 번째이고, 이쯤 설명했으면 다른 하나의 구현방법은 말 안해도 알겠지ㅎ. 각각 일장일단이 있어서 일단 yeoman generator를 검색해봤더니 몇 개의 괜찮아 보이는 녀석들을 찾았는데 그 목록은 다음과 같다.

1) react-webpack
꽤 활발한 레포인 듯. 딱 리액트를 쓰기 좋은 코어부분만 생성해주고, 그 이외의 부분은 알아서 선택하게 만들어준 점이 굉장히 좋았지만, 초심자인 나로서는 약간 갈팡질팡할 수 밖에. 그래서 조금 더 찾아봤더니.

2) relay-fullstack
generator 이름에 리액트가 전혀 없지만, 그래도 리액트가 녹아있는 녀석. 여기저기서 줏어들은 바로는 react는 flux와 같이 쓴다더라, circle과 같이 쓴다더라. 그리고 View만 담당하기 때문에 최소한 jQuery정도는 필요하다더라… 를 들었는데, 그 데이터 쁠-로를 담당하는 라이브러리로 페이스북이 2015년 1월에 발표한 라이브러리가 relay인 것 같다. 그와 더불어 GraphQL도 사용하는 것 같은데, 이것까지 알아보면서 포스팅하기엔 오늘 날씨가 너무 덥다. 아쉽지만 다음 기회에!

 


그래서 만약에 프론트단만 간단하게 구현한다고 하면 1번, 서버까지 다 만져보겠다고 한다면 2번이 무난하다고 판단, 욕심을 좀 내서 2번 녀석으로 프로젝트를 구성해봤는데 러닝커브가 너무 높아져버린 느낌이다. 일단 1번으로 간단하게 react + relay를 배워가면서 다뤄보는 것으로 결정.

사족으로, 대부분의 react 계열 yeoman generator에서 TypeScript를 지원해주지 않고 바벨을 주로 쓰더라. 이것도 약간 아쉽다면 아쉬운 부분. 아무튼 학습 방향은 적당히 다 정했다. 백엔드는 모질라에서 만든 로컬포리지로 흉내내면서 땡기는 아이템 구현을 빌미로, 리액트를 시작합니다~ 동네방네 알려봄!

One thought on “react study #1”

Leave a Reply