기본 콘텐츠로 건너뛰기

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: 별말씀을요.

이 블로그의 인기 게시물

Mac 주의 - 약간 빡치는 git 대소문자 변환 파일명 변환(renaming)하는 법

Mac에서 종종 화나는 일 중 하나가 파일 시스템이 대소문자를 구분하지 않는 점이다.
가령, A.png를 a.png로 바꿔야할 경우 HFS 기준으론 전혀 바뀐 점이 없는 걸로 인식하는데 다소 화가난다.
하지만, 방법이 없는 것은 아닌데

A.png를 임의의 다른 파일로 바꾼다. (ex. A_.png)1에서 바꾼 상태에서 staging 한다. (git add A_.png)1의 파일을 다시 원래 바꾸려고 했던 파일로 바꾼다. (mv A_.png a.png)3을 다시 staging 한다. (git add a.png)commit 한다.https://stackoverflow.com/a/40307511/880991 에서 답변해준 Chris Barr 님에게 감사를.
* 추가

실제로 해보니 git mv --force A.png a.png 가 더 간단하다. 이는 바로 staging 영역에 add까지 해준다.

즐거운 Online Prototyping Tool 들

jsbin, codepen, jsfiddle 이런 것들은 일단 생략. 너무 유명한 것들이라.

https://launchpad.graphql.com - node.js 기반 graphQL 연습장. 이것만으로도 충분히 훌륭한 백엔드
https://codesandbox.io/ npm 사용이 가능한 클라이언트 사이드 연습장. webpackbin이 너무 문제가 많아서 찾아본 것.

https://scrimba.com 이건 codesandbox+ asciinema(https://asciinema.org/) 같은 느낌인데 키 녹화와 음성 녹화 기능이 추가되었다. 다 좋은데 화살표 키로 빨리감기 뒤로감기 기능이 안되고 익스포트(youtube등)으로 지원이 없는게 아쉽다.

이 둘이 만나면? https://codesandbox.io/s/jvlrl98xw3?from-embed
뭐야 이거 무서워 하지마 ㄷㄷ;  graphql+react-native-web(부왘ㅋㅋ)

https://repl.it/languages 전통을 자랑하는 REPL 도구. 지원 언어 종류가 -_-;;;;;

https://tio.run/# repl.it? 장난함? 얘는 지원 언어가 무려 386종류. J랑 아희도 있다.

https://play.golang.org/ 즐거운 go playground. 소스 포멧팅 넘 좋아.

http://decaffeinate-project.org/repl/ 최고의 coffeescript REPL. 원래 용도는 coffee를 ecma6코드로 바꾸는 것이지만...

https://scaphold.io
https://www.graph.cool/ graphql backend service. scaphold.io는 설치도 필요없는 클라우드. graphcool은 호스팅+클라우드 다있음. 둘 다 막상막하. 푸쉬서버도 되고 뭐 미친득.

https://glitch.com/ gomix에서 결국 glitch로 안착.  node.js

https://www.shadertoy.com 잘하고 싶다! 쉐이다! 오디오도 된다!

http:/…

graphql 연습 /w launchpad

https://launchpad.graphql.com/mw9wkzv99
단순 전체쿼리+조건쿼리+추가

http://graphql.org/graphql-js/passing-arguments/
참고. random ID는 crypto 1.0.1 사용
  type Query {
    Members: [member]
    getMember(id: ID!): member
  }
  type member {
    id: ID!
    text: String
  }
  input memberInput {
    text: String
  }
  type Mutation {
    addMember(member: memberInput): member
  } SQL 정의. facebook 쪽은 스트링에 지지는 거 진짜 좋아하네. *.gql 파일이 있다고 하니 이해해주자.
resolver는 var buffer = [];
const resolvers = {
  Query: {
    Members: (root, args, context) => {
      return buffer;
    },
    getMember: (id)=> {
      return buffer.find(o=>o.id)
    }
  },
  Mutation: {
    addMember(_, {member}) {
      const mm = { ...member, id:randomBytes(10).toString('hex') };
      buffer.push(mm);
      return mm;
    }
  }
}; 평범 평범.
https://dev-blog.apollodata.com/tutorial-graphql-subscriptions-server-side-e51c32dc2951 다음으로 pub/sub 연습.
https://launchpad.graphql.com/xvn94n3ql   type Subscription {
    memberAdded: member
  } member가 added되는 순간을 감시. imp…