spectrum learns to dig

cyclejs는 observable을 logic, subscribe를 effect로 각각 분리하고 서로 순환하는 구조인 full reactive framework 이다. 예를 들면 1초(1000ms)마다 스트림을 발산하는 text$는 매번 fold(reduce)하여 1씩 증가하고 "Second elapsed xx"로 map하는 text$=xs.periodic(1000)   .fold(prev=>prev+1,0)   .map(i=>`Second elapsed ${i}`) 를 logic. 이를 subscribe 하여 #app element의 텍스트로 넣는 것을 text$.subscrbie({   next: str => document.querySelector('#app').textContent = str }) 를 effect로 볼 수 있다. 이를 각각 함수로 구분하여 const sink = ()=> xs.periodic(1000)     .fold(prev=>prev+1,0)     .map(i=>`Second elapsed ${i}`); const domDriver = text$ => text$.subscribe({   next: str => document.querySelector('#app').textContent = str }); domDriver(sink); 이와 같이 재정의 할 수 있다. 같은  logic에 대해 DOM 렌더링과 log를 분리하려면 logDriver를 아래와 같이 추가하여 const logDriver = msg => console.log(msg); logDriver(sink); 하여도 마찬가지. subscribe한 객체의 observable만 있으면 DOM이건 console이건 canvas건 websocket이건 어느쪽이든 effect를 만들어 낼 수 있다. 만일 위의 예에서 logDri

w3c 컨퍼 갔다왔더니 docker를 다시 잘 써보고 싶어졌다. 귀염둥이 Raspberry Pi Zero W를 꺼내서 ssh 접속하고 docker-ce를 설치해본다. $ echo "deb [arch=armhf] https://download.docker.com/linux/debian $(lsb_release -cs) stable" | sudo tee /etc/apt/sources.list.d/docker.list deb [arch=armhf] https://download.docker.com/linux/debian jessie stable $ sudo apt update && sudo apt install docker-ce -y --force-yes Get:1 https://download.docker.com jessie InRelease [20.2 kB]                                  Hit http://mirrordirector.raspbian.org jessie InRelease                                        Ign https://download.docker.com jessie InRelease                          Hit https://download.docker.com jessie/stable armhf Packages Hit http://archive.raspberrypi.org jessie InRelease Hit http://mirrordirector.raspbian.org jessie/main armhf Packages                        Get:2 https://download.docker.com jessie/stable Translation-en [584 B] Hit http://archive.raspberrypi.org jessie/main armhf Packages             

선 루팅 https://forum.xda-developers.com/lg-g3/general/guide-root-lg-firmwares-kitkat-lollipop-t3056951 1.2버전 스크립트 모드로. echo Looking for LG serial port.. echo. adb.exe wait-for-device 여기에서 정체 상태여서 강제로 adb kill-server 했더니 알아서 재부팅하심. 폰에선 "펌웨어 업데이트"화면이 나오고 Phone found at COM5! Rooting phone.. If you don't see the SuperSu installer script runs within about a minute, then the root failed. Author : blog.lvu.kr SPECIAL COMMAND : ENTER, LEAVE ## 이런 상황이 됨. #이 느린 속도로 하나씩 증가하고 있음. 한 시간 기다려도 성과없음. 뭐 몇번해봐도 안되고 결국 불안하긴 하지만 kingroot.net  로 설치 롤리팝이니까  https://drive.google.com/file/d/0B4kfGU1z_PClQ3AyM2lKOGR1S3M/view  이걸 받아서 압축 풀기. d838recovery.bat 만 있어서 당황스럽긴한데 실행하고 1번 하니까 리커버리 모드 진입까진 잘 되는 듯. adb sideload 라는게 있어서 해봄. Advance에서 adb sideload 선택하고 USB연결한 PC에서 adb sideload RR-N-v5.8.5-20171010-d838-Final.zip 하니까 착착 잘 진행됨. 이제 흉측한 U+LTE 가 없어짐. ㅇㅋ 군더더기 없고 깔끔한데 남은 건 gapps 를 설치해야함. http://opengapps.org/  를 권해줘서 갔는데 지옥 느림. ARM + 7.1 + stock 이 기본이어서 그걸로 함. 한시간

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까지 해준다.

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 Subsc

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://

firebase instance를 만들자. https://console.firebase.google.com/project/<YOURAPP>-90431/overview 로 들어가보면 Welcome to Firebase! Get started here. 라고 반긴다. 필요한 설정을 복사하자. Add Firebase to your web app 를 눌러 <script src="https://www.gstatic.com/firebasejs/4.6.0/firebase.js"></script> <script>   // Initialize Firebase   var config = {     apiKey: "ㅌㅌㅌㅌㅌㅌㅌㅌ",     authDomain: "ㅅㅅㅅㅅ-90431.firebaseapp.com",     databaseURL: "https://ㅅㅅㅅㅅ-90431.firebaseio.com",     projectId: "ㅅㅅㅅㅅ-90431",     storageBucket: "ㅅㅅㅅㅅ-90431.appspot.com",     messagingSenderId: "11111111111"   };   firebase.initializeApp(config); </script> 이 부분 중 config만 복사. Authentication > sign-in method 에 몇개 연결하고 Template을 한번 슥 본다. 음 다국어 처리가 되있군. 굿. Database, Storage, Hosting, Functions 죄다 켜고. Grow 에 Remote Config라는게 있어서 Software Version 같은 걸 한번 넣어봤다. 프로그래마틱하게도 설정 가능한 거 같다. 잘 모르겠다. https://firebase.google.com/docs

Expo는 지옥같은 React-Native 개발 환경 아래 섬광처럼 빛나는 훌륭한 도구지만 빛이 있으면 어둠이 있는 법. https://docs.expo.io/versions/latest/introduction/why-not-expo.html  에선 이런 경우에 Expo를 사용을 고려하라고 전하고 있다. 독립형 앱에 이미지 같은 정적 자원(Assets)들을 함께 묶어 배포할 수 없다. background 혹은 장치가 잠자기 모드일때 코드 실행을 지원하지 않는다. 일부 API를 미지원. Bluetooth, WebRTC 같은 건 아직. 오버헤드가 꽤 크다. iOS 25MB, Android 20MB Push Notification의 경우 OneSignal 같은 외부서비스를 활용하려면 ExpoKit을 사용하거나 Expo가 아닌 React-Native를 사용해야한다. Staging/Production같은 다양한 디플로이 환경. 하지만 이 경우  https://github.com/oliverbenns/expo-deploy  같은 선택지도 있으니 참조할 것

firebase 단순 예제 좋은게 없어서 찾다가 문서보고 하나 짰다. 흔한 Firebase 자료구조.png https://console.firebase.google.com 에서 본 Database 구조가 위와 같을 때 config =   apiKey: '<<<<<<<<<>>>>>>>>>>'   authDomain: '<<<<<<<<<>>>>>>>>>>'   databaseURL: '<<<<<<<<<>>>>>>>>>>'   projectId: '<<<<<<<<<>>>>>>>>>>'   storageBucket: '<<<<<<<<<>>>>>>>>>>'   messagingSenderId: '<<<<<<<<<>>>>>>>>>>' firebase.initializeApp config ref = firebase.database().ref('rooms/muka/messages') # database 경로 ref.on 'child_added', (o) ->   # key:0. val();"text":"블라블라"   # key:1. val();"text":"블라블라"

실제로 nw.js 어플리케이션을 개발하다보면 UI구현하기 막막하고 수동으로 리프레쉬 하는 것도 귀찮아서 Meteor 연동을 하려고 했더니 생각보다 간단했다. 디렉토리 구조는 먼저 이렇게 잡았다. `- app   `-client   `-public `- dist   `- 배포용 html,css,js   `- package.json `- package.json 아이디어는 이렇다. nw.js의 시작페이지를 http://localhost:3000으로 두고 배포시엔 meteor client 배포툴인 meteor-build-client를 사용하여 html,css,js 로 분리하는 계획이다. 가장 중요한 nw.js 용 package.json 파일은 아래와 같이 구성한다. {   "main": "http://localhost:3000",   "node-remote": "http://localhost:3000",   "name": "<앱이름>" } 이게 전부. 어떻게 보면 Web과 nw.js를 동시에 개발할 수도 있는 환경이기도 한 것이다. meteor create app 을 해서 meteor용 앱을 만들고 meteor 를 시작한다. 그리고, 위의 package.json이 있는 경로로 돌아가서 nw . 으로 nwjs를 실행한다. 한번 번쩍하더니 잘 된다. cordova 등에서 index.html 대신 http://localhost:3000을 하는 것도 비슷한 느낌이다. 즐겁게 개발을 일단 마구 하고 실제로 배포하기 위해서는 개발환경이 아니라 html,css,js로 구성된 배포본을 만들어야한다. npm install -g 해도 되지만 어짜피 Meteor에서만 쓸거 meteor npm install -g meteor-build-client 해버릴거다. 개발은 문제 없어 보이고 배포판을 한번 만들어보자.

흠 요즘은 ruby 할때 puma(https://github.com/puma/puma)를? 패신저는 안쓰남. https://github.com/peatio/peatio/blob/master/doc/setup-local-osx.md 로컬 환경 먼저 잡자. brew, rbenv 설치하고 ruby를 2.2.1로 설정하자. gem install bundler을 설치 Fetching: bundler-1.15.4.gem (100%) ERROR: While executing gem ... (Gem::FilePermissionError) You don't have write permissions for the /Library/Ruby/Gems/2.0.0 directory. sudo chown -R $USER /Library/Ruby/Gems/ 하고 나면 gem install bundler Fetching: bundler-1.15.4.gem (100%) ERROR: While executing gem ... (Gem::FilePermissionError) You don't have write permissions for the /usr/bin directory. 또 오류. 에잇 귀찮아 sudo install bundler 해버림. mysql 설치 brew install mysql 설치하고 mysql.server start 기동. redis 설치 brew install redis redis-server /usr/local/etc/redis.conf rabbitMQ 설치 얘는 /usr/local/sbin 여기에 설치되니 brew install rabbitmq rabbitmq-server bitcore 도 다운 받고 https://bitcoin.org/en/download mkdir -p ~/Library/Application\ Support/Bitcoin touch ~/

요즘은 다들 javascript 환경을 React 하나만을 위해 구성하는 경우가 꽤 많은데 사실 Meteor는 상당히 유연한 javascript platform이며 Meteor를 사용하는 Vulcan 역시도 그렇다. 이번엔 따로 package를 만들지 않고 그냥 vulcan 프로젝트 위에서 해보자. import를 써서 빈틈없이 의존 관계를 명시적으로 정의하는 방법 외에도 어플리케이션 구조에 따른 load-order( https://guide.meteor.com/structure.html#load-order )를 가지고 자동으로 소스코드를 병합하는 방식도 지원한다. (원래는 이게 기본이었음) 작동하는 방식은 간단한데 /client 로 시작하면 client에서 실행. /server 로 시작하면 server 에서 실행하는 것을 기본으로 HTML 템플릿 파일이 항상 먼저 lib/ 디렉토리를 그 다음으로 path가 깊은 곳을 그 다음으로 파일은 전체 경로명에서 알파벳 순으로 main*.* 인 파일은 마지막에 불러오는 규칙을 가지고 있다. 만일 import를 꼭 쓰고 싶으면 import/ 디렉토리 안에 두면 된다. 이 규칙에 따라 이전에 다루었던 요소들을 정리하여 디렉토리를 구성을 다음과 같이 해보았다. \client \lib   \components     \Posts       PostsListComponent.coffee   \lib     \lib       global.coffee     \models       \Posts         \imports           schema.coffee           ..resolver.coffee, mutation.coffee...         collection.coffee         permissions.coffee   routes.coffee \server 의도하고자 하는 바는 이렇다. component, models 과 같은 기본 요소들은 c

버전 1.5 기준 package.js에서 Package.onUse 에 새 패키지를 추가했는데 인식하지 못하는 경우가 있다. Package.onUse((api) => {   api.use([     'vulcan:core',     'vulcan:forms',     'vulcan:accounts' /* <-- 추가함! */   ]); ... } 내부패키지건 원격패키지건 안되는 안된다. 이럴 때 meteor add 후 meteor remove 해도 되지만 더 간단한 방법이 있다. meteor update vulcan:accounts 이렇게 update 해주는 방법이 있다. .meteor/package 파일을 건들지 않아서 좋다. 그래도 역시 좋지 않다. Meteor 스럽지 않다. https://github.com/meteor/meteor/issues/7721  현재 1.5.2에서도 해결이 안되었군요. 해결되어 적용되면 다시 글 올리겠습니다.

Posts를 만들면서 약간 아쉬웠던 부분은 Delete 부분에 대해서 너무 SmartForm에 의지하여 간단하게 넘어가긴 했다. showRemove={true} 옵션을 통해 한줄 찍 긋고 Delete라고 나오는 부분을 클릭하는 것도 좋지만 목록에서 지우거나 상세 보기에서 지울 일도 분명 있을 것이다. 역시나 이것도 목록(ex. withList)을 가져올 때 처럼 HoC(Higher-Order Component)를 사용한다. http://docs.vulcanjs.org/mutations.html#Remove-Mutation  부분을 참조하자. 이번에 구현할 것은 목록마다 remove 버튼을 달고 버튼을 누르면 이벤트를 받아 삭제하도록 구현해보자. import { registerComponent, withList, withRemove } from 'meteor/vulcan:core'; 먼저 해야할 것은 withRemove를 import에 추가하는 것이다. 그러면 withRemove를 registerComponent시 사용할 수 있다. withList와 함께 withRemove도 추가하자. registerComponent('PostsListComponent', PostsListComponent, [   withList, {     collection: Posts   }], [   withRemove, {     collection: Posts   } ]); withRemove도 withList와 동일하게 collection만 지정하면 된다. 준비는 다 되었다. withRemove를 붙여서 this.props는 removeMutation을 갖게 되었다. removeMutation의 사용법은 다음과 같다. this.props.removeMutation({   documentId: documentId }).then(/* success */).catch(/* error */);

마지막으로 수정과 삭제를 구현해보면 목록 조회(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/

Route들끼리 연결에 대해 알아보자고 지난 시간에 말씀드렸는데 Vulcan에선 React-router( https://reacttraining.com/react-router/web/api/Link )를 사용하므로 그 규칙을 그대로 따르면 됩니다. <Link to='경로명'>표시할 이름</Link> 형식으로 씁니다. PostsSingleComponent 에 <Link to='/'>to Home</Link> 를 추가하여 처음으로 돌아가도록 합시다. import React, { Component } from 'react'; import { Link } from 'react-router'; import { registerComponent, withDocument } from 'meteor/vulcan:core'; import Posts from "../modules/posts/collection.js"; class PostsSingleComponent extends Component {   render () {     return (       <div>         <h1>{this.props.document.title}</h1>         <pre>           {this.props.document.body}         </pre>         <Link to='/'>to Home</Link>       </div>     );   } } registerComponent('PostsSingleComponent', PostsSingleComponent, [withDocument, {   collection: Posts }]); export default Post

지금까지 Posts 의 목록을 조회하고 생성하는 걸 해보았습니다. 목록을 봤으니 목록 중 하나를 선택하여 상세 내용을 보고 수정/삭제를 할 수 있으면 데이터 처리 한 바퀴를 온전히 돌 수 있다고 볼 수 있습니다. 먼저, 상세보기를 만들어봅시다. 시작은 Component부터 하도록 하지요. PostsViewComponent라는 걸 만들어 봅시다. $ vulcan g component ? Package name spectrum-simplebb ? Component name PostsViewComponent ? Component type Class Component ? Register component Yes    create packages/spectrum-simplebb/lib/components/PostsViewComponent.jsx  conflict packages/spectrum-simplebb/lib/components/index.js ? Overwrite packages/spectrum-simplebb/lib/components/index.js? overwrite this and all others     force packages/spectrum-simplebb/lib/components/index.js 슥삭 만들고 Route를 만들어 URL을 통한 접근을 시도해봅니다. Route이름은 postsView라고 하고 /posts/:_id 와 같은 형식으로 접근하게 해보죠. $ vulcan g route ? Package name spectrum-simplebb ? Route name postsView ? Route path /posts/:_id ? Component name PostsViewComponent ? Layout name  conflict packages/spectrum-simplebb/lib/modules/routes.js ? Overwrite packages/spectrum-simplebb/

왜 Vulcan인가요? 유명한가요? 이걸 배워도 괜찮은 건가요? 취직은 잘 되나요? 회사에 필요한가요? 많이들 쓰나요? 앞으로 유망한가요? 항상 강의(보통 국비지원인 무료 수강)를 할때마다 자주 들었던 질문인데요. vulcan은 제 생각엔 이 질문들에 대해 모두 "예"일수도 "아니오"일수도 있다고 생각합니다. 왜냐면 vulcan는 framework이며 제품으로 치면 반쯤은 조립이 된 제품으로 구성한 IKEA 같은 거라서 팝업 스토어나 전시실에 있는 걸 보고 구성하거나 아니면 처음부터 하나하나 자신이 구성하듯이 Apollo, AutoForm(aka. smartForm), Collection2, Email Templating, GraphQL, Meteor, MongoDB, React, Router, Server-sided rendering 등등 각각 검증된 요소들로 웹앱을 만들 수 있습니다. 질문에 대한 답을 드리자면 vulcan 자체는 "아니오"일 수도 있지만 vulcan에 들어가는 요소들은 "예"라고 할 수 있는 것들이 꽤 많습니다. 웹은 프로그래밍 분야 중에서도 제법 오래되고 안정된 분야이면서 동시에 대중적인 인기를 업고 많은 실험과 혁신을 시도하고 있는 분야이기도 합니다. 사용자 입장과 달리 만드는 사람 입장에선 눈에 보이는 부분(frontend)에서부터 보이지 않는 부분(backend)까지 세심하고 정밀하게 고려해야하고 오랜기간 웹에 노출된 노련한 사용자들은 당신이 어떤 부분이 부족한지 금방 알아차립니다. 이 부분은 만드는 사람 입장에선 꽤 괴로운 일입니다. 기술의 변화는 빠르고 학습해야할 양은 늘어나며 구현해야할 디테일은 더욱 엄격하게 평가받습니다. Vulcan은 대부분 최신(Cutting edge) 기술들로 가득하며 각각 기술에 대해 깊은 이해가 있다면 좀 더 예리하게 만들 수 있지만 최소한의 학습양으로도 당장 작동하는 결과물을 만들 수 있습니다.

이번엔 아주 간단합니다. 왜냐면 Posts 쓰기를 할 것이고 우리는 SmartForms를 이용해서 끝낼려고 하거든요. Component를 또 만듭시다. 이름은 PostsNewComponent가 좋겠군요. $ vulcan g component ? Package name spectrum-simplebb ? Component name PostsNewComponent ? Component type Class Component ? Register component Yes    create packages/spectrum-simplebb/lib/components/PostsNewComponent.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 이제 다 할 줄 아시죠? vulcan g component 를 써서 진행합니다. HomeComponent.jsx 에도 추가해야겠네요. import React, { Component } from 'react'; import { registerComponent, Components } from 'meteor/vulcan:core'; class HomeComponent extends Component {   render () {     return (       <div>         Find me at packages/spectrum-simplebb/lib/components/HomeComponent.jsx         <Components.PostsListComponent />         <Components.PostsNewComponent />