spectrum learns to dig

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.coffe...

버전 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(...