기본 콘텐츠로 건너뛰기

RxJS - ReactiveX 인터뷰

A: 왜 RxJS입니까
B: javascript는 참 쉽고 친숙한 언어죠.
A: 별로 그렇게 생각 안합니다만.
B: 그래서 좀 어렵고 있어보이는게 뭘까 싶어서...
A: 네?
B: 함수형이라는게 유행하기도 하고
f(x) 좋쟎습니까? 미스테리~ 미스테리~ 정수정짱짱 으아아

이런 수학선생님이라면 수포자 따윈
A: ...
B: 그리고 반응형이라는 말 뭔가
A: 뭔가?
B: 대충대충해도 막 알아서 할거 같고...
A: 그럴리가요?
B: 안그렇겠죠?
A: 네
B: 네

(잠시만 기다려주세요)

A: 그래도 뭔가 매력이 있으니 이렇게 시간을 내셔서 이것저것 Rx에 대해 글도 쓰고 이야기도 하고 그러시는거 아닌가요?
B: 매력이라.
으음.
제가 팔꿈치 터널 증후근이 좀 있어요.
오른손 세끼손가락, 약지손가락이 저립니다.
A: 무슨 상관이?
B: 그래서 각종 괄호를 쓰는게 너무 힘듭니다.
소중대괄호 만든 사람 죽었으면.
Hello world (ASCII):

A: 이미 옛날에 돌아가셨겠죠.
B: 그렇겠네요.
아무튼 그래서 소중대괄호 의존이 적은 커피스크립트를 쓰는데요.
A: 빨리 본론을 말씀해주시죠.
B: 커피스크립트에서 가로로 80자 이상쓰면 Line exceeds maximum allowed length 라고 경고해요.
A: 그래서요?
B: 근데 Rx를 쓰면 코드를 가늘게 쓸 수가 있더라구요.
A: 호오?
B: 그리고 = 쓰는 것도 너무 힘듭니다.
A: 네?
B: 오른손을 쓰쟎아요.
A: ...
그러니까 정리하면
1. 괄호가 힘들다
2. 커피를 쓴다
3. 커피는 길게 쓰면 경고
4. Rx를 쓰면 코드가 가늘다
5. 대입문을 줄이고 싶다.
B: 네
하지만 5번은 생각보다 별로...
A:
B:

B: 아!
A: ?
B: 코드가 가늘어서 좋은 점이.
A: 네.
B: 핸드폰에서 코드를 보기 좋습니다.
A: ... 왜 팔꿈치 터널 증후근이 안 낫는지 알겠습니다.
B: 도와주세요.
쇠고기 사묵으면 나을 것 같습니다.

고오오기. 고기하면 소오고오기이


A: (모르겠고) 사실 그런건
array function(map, filter, reduce, concat)만 써도 비슷하쟎습니까.
사실 비동기 처리가 중요한거 아닙니까?
B: 비동기 까짓거 promise도 있고 걍 callback해도 되고
A: 여기까지 와서 시비 거시는 겁니까?
B: 뭐 얼마나 대단한 코드를 짠다고 callback 지옥 걱정을 합니까.

하지만 방심하면 금방...

A: 대단한 거 안짜도 빡센데요.
B: object literal 잘 쓰세요.
A: 싫어요.
B: 저도 별로...

A: 아무튼 지적 허영심도 충족시키고 손목 터널도 덜고
폰에서도 보기도 짱짱맨 라이브러리란 거죠?
B: 그리고 한번 배워놓으면 Polyglot이라서 다른 언어에서도 쓸 수 있습니다.
A: 그렇죠? 그건 참 좋은 거 아닌가요. 기껏 배워놨는데 본전 생각도 나고
B: 사실 UniRx(Unity+Rx) 같은 걸 보면 꼭 그런 것만도...
A: 그래도 개념을 이해하면 두루 도움이 되겠죠?
B: Go같은 경우를 보면 Channel이 더 좋고 쉬운데 굳이...
A: ...하지말까요?
B: 도와주십쇼.
A: 네, 협조부탁드립니다.
B: 네. 근데 저도 별로 아는게 없어서.
A: 모르는 거 부탁 드린적 없습니다.
B: 미흡하나마 잘 부탁드리겠습니다.
A: 네, 전혀 겸손처럼 느껴지지 않는군요.
B: 저야 워낙 신실한 사람이라서요.

A: Rx는 어떤 경우에 쓰면 좋을까요?
B: 연속적인 데이터가 예상할 수 없는 지점에 발생할 때 사용하면 좋습니다.
A: 이제까지 중 제일 말같은 말씀이시네요.
B: 저야 워낙 신실한 사람이라서요.
A: 못들은 걸로 하겠습니다.
좀 더 구체적으로 어떤 상황이 있을까요?
B: 키보드 입력, 마우스 처리, AJAX 호출, 파일 읽고 쓰기, 배치작업 스케쥴링, 각종 네트웍 처리 등등이 있겠죠. 이 모든 것들을 다 스트림으로 볼 수 있습니다.

그러하다.

B: 덤으로 전역변수의 사용을 지양하는 효과도 있어서 실수로 인한 외부 변수 오염으로부터 안전한 프로그래밍을 하는데 도움이 됩니다.
A: 튜토리얼은 앞으로 어떤 식으로 진행할 건가요?
B: 개론은 어짜피 reactivex.io 에 한글 문서도 있고 예제나 트레이닝 같이 따라해볼 수 있는 쪽으로 번역해볼까 합니다.
보신 분들은 알겠지만 발번역 오역이 난무하니 상처받지 않게 지도편달(?) 부탁드립니다.
A: 좋은 말씀 감사합니다. 뭔가 주객이 전도된 듯한 느낌이 드는군요.
B: 별말씀을요.

이 블로그의 인기 게시물

vulcanJS - 10. Posts Update/Delete

마지막으로 수정과 삭제를 구현해보면 목록 조회(List), 상세 조회, 쓰기, 수정, 삭제까지 모든 필요한 요소를 아우를 수 있을 것이다.
감이 좋은 분들은 눈치 챘을지도 모르겠지만 사실 수정이란 건 UI면에서 볼때 이미 양식이 채워져있는 신규 쓰기와 별반 다르지 않다.

먼저 해야할 것은 역시나 Component를 만드는 일이다.
$ vulcan g component
? Package name spectrum-simplebb
? Component name PostsEditComponent
? Component type Class Component
? Register component Yes
   create packages/spectrum-simplebb/lib/components/PostsEditComponent.jsx
 conflict packages/spectrum-simplebb/lib/components/index.js
? Overwrite packages/spectrum-simplebb/lib/components/index.js? overwrite
    force packages/spectrum-simplebb/lib/components/index.js PostsEditComponent를 만들었다.
route도 만들자. /posts/edit/:id 이렇게 경로를 만들면 좋겠다. 그러고보니 이전 글에서 만든 상세보기도 /posts/view/:id 형식으로 만들껄 그랬다.
$ vulcan g route
? Package name spectrum-simplebb
? Route name postsEdit
? Route path /posts/edit/:_id
? Component name PostsEditComponent
? Layout name
 conflict packages/spectrum-simplebb/lib/modules/routes.js
? Overwrite packages/spectrum-simplebb/lib/modules/routes.js? overwrite
   …

VulcanJS 특징 번역

VulcanJS 특징http://docs.vulcanjs.org/features.html 의 내용입니다. GraphQL 스키마 생성 Vulcan은 SimpleSchema JSON 스키마를 기반으로 컬렉션의 GraphQL 스키마를 자동으로 생성합니다.
이렇게하면 두 가지 형식으로 스키마를 두 번 지정할 필요가 없습니다. 이 기능은 완전히 선택적이며 필요에 따라 수동으로 스키마를 지정할 수도 있습니다.

자동 생성 폼 Vulcan은 스키마를 사용하여 클라이언트 측 폼을 생성하고 적절한 Apollo Mutation을 통해 제출을 처리합니다.
예를 들어 하나의 동영상을 편집하기위한 양식을 표시하는 방법은 다음과 같습니다.
<VulcanForm
  collection={Movies}
  documentId={props.documentId}
  queryName="moviesListQuery"
  showRemove={true}
/> queryName 옵션은 작업이 완료되면 자동으로 업데이트되는 쿼리를 VulcanForm에 통지하는 한편, showRemove 옵션은 "Delete Movie' 버튼을 폼에 추가합니다.
VulcanForm 클라이언트 저장소에 아직 로드되지 않은 경우 수정할 문서를 읽어오기도 합니다.

쉬운 데이터 적재 Vulcan에는 Apollo 데이터를 쉽게 로드할 수 있도록 데이터 로딩 헬퍼 세트로 withList (복수 문서용)와 withDocument (단일 문서용)를 제공합니다.
예를 들어, withList를 사용하여 MoviesList 구성 요소에 모든 동영상을 포함하는 결과를 prop에 전달하는 방법은 다음과 같습니다.
const listOptions = {
  collection: Movies,
  queryName: 'moviesListQuery',
  fragment: fragment,
};
export default withList(listOptions)(MoviesList); …

vulcanJS - 1. vulcan-cli 설치하고 프로젝트 만들기

vulcanJS를 학습하면서 알아낸 점을 기록하는 의미의 튜토리얼을 써본다.

Telescope도 그랬지만 forum 형태의 예제에서 embedly를 사용하는 URL 요소가 글에 들어가는 점이나 일반인들에게는 익숙하지 않은 Markdown 문법 등을 걷어내고 최소형태에서부터 접근해야할 필요성을 느껴서 단순 post만 목록 열람하고 읽고 쓰는 구현을 해보기로 했다.

먼저, vulcanJS를 github를 통해 clone 하고 meteor create --package를 통해 만들수도 있지만 Vulcan-Cli(https://github.com/VulcanJS/vulcanjs-cli)가 있어서 이걸 일단 사용해보기로 한다.

대충 내용을 읽어보니 Rails 생각이 나기도 하고 재밌어 보인다.
npm install -g vulcanjs-cli 혹은 meteor 에서만 한다면
meteor npm install -g vulcanjs-cli 이런 식으로 설치하고 쓰면 된다.
npm 에 global로 설치한 첫번째 경우 기준으로 진행해보겠다.
설치하고 난 뒤 vulcan 을 실행해보면
$ vulcan
vulcan usage:
Synopsis
  vulcan <action> <object> <...>
    <action>   Operation to perform
    <object>   Asset type (contextual to action)
    <...>      Parameters. If not provided, interactively entered
Project initialisation
  vulcan create <appName>
  vulcan init <appName>
Assets creation
  vulcan (generate|g) package <packageName>
  vulcan (generate|g) model <packageName>…