기본 콘텐츠로 건너뛰기

2014의 게시물 표시

Meteor 1.0 - Android/iOS 앱을 만들기 위해 Cordova plugin을 사용해보자

Camera와 Gallery를 사용하는 앱을 Meteor로 만들자. 준비 meteor 설치 ( https://www.meteor.com/install ) 실행과정 : project를 생성하고 $ meteor create camera-practice $ cd camera-practice iOS, android 환경을 추가한다. $ meteor add-platform ios $ meteor add-platform android You must agree to the terms to proceed.        Do you agree (Y/n)?  에서 Y혹은 enter android: added platform  플랫폼 추가 완료. 플러그인 추가 $  meteor add cordova :org.apache.cordova.camera Must declare exact version of dependency: org.apache.cordova.camera@undefined https://github.com/apache/cordova-plugin-camera/blob/master/plugin.xml 에서 버전 정보를 확인해보니 0.3.4-dev 하지만 역시 빌드시 오류가 있으므로 안전한 0.3.2로 가자. $ meteor add cordova :org.apache.cordova.camera@0.3.2 added cordova plugin org.apache.cordova.camera@0.3.2 성공. cordova라는 namespace만 붙여주면 마치 원래 Meteor package인양 가져오는 모습이 아주 흐뭇하다 :) 나는 coffeescript를 좋아하니까 meteor add cofffeescript 일단 필요없는 초기파일 html, css, js들은 다 지우고 client

Meteor 1.0 - LocalMarket example - Direcctory 구조 분석

드디어 Meteor가 1.0을 찍었다. 감동 ;ㅅ;)/ Todo가 예쁘게 바뀐 건 봤고 새로운 예제 앱이 생겼다. 그 이름은 바로 LocalMarket. 동영상을 찍어서 보여주고 싶지만 귀찮기도 하고 어짜피 meteor create --example localmarket 치면 다 알테니까. 이전까지 실험적이었던 Mobile 정확히 말해 Cordova 와의 통합이 아주 멋지게 이루어졌다. 실행 옵션이 좀 많아졌는데 meteor run : 그냥 Meteor 웹서버만 기동. 이하 아래의 것들도 기본적으로 Meteor 서버를 실행한다. meteor run android meteor run ios : 안드로이드, iOS 시뮬레이션을 실행한다. 안드로이드의 경우 Hardware Accelerated Execution Manager (Intel HAXM) 을 설치한다. meteor run android-device meteor run ios-device : 실제 iOS/Android 장비에서 실행한다. 실행에 대해선 어짜피 해보면 되니까 여기쯤 해두고 Web과 Mobile(android/iOS)간의 차이를 어떻게 극복했는지가 궁금한 거니까 디렉토리 구조를 살펴보기로 하자. 먼저 디렉토리 구조를 보자. client 는 사용자가 실제로 보는 html+css+js+기타등등이고 server 는 backend 쪽인 것까지는 기존과 동일하다. lib는 client/server 양쪽에서 실행되는 Collection, Router등등의 코드가 있다. client 쪽에선 lib 아래에 jquery.touchwipe.js 를 쓴게 보인다. 그리고 head.html을 따로 분리하여 공통 헤더를 만들어 놓았고 init.js 에선 사용자가 앱/웹을 실행시 Geolocation.currentLocation(); 를 사용하여 위치정보를 수집할 수 있도록 해놓았다. package 는 atmosphere가 아닌 프로젝트별 custom pac

Ubuntu 12.04 - RDP에서만 mount 권한이 없을때

Unable to mount USB, Not Authorized 오류가 날때가 있다. 직접 콘솔에서 들어가면 잘 되는데 RDP로 접근할 경우 해당 계정에 권한 문제가 있을 수 있다. http://ubuntuforums.org/showthread.php?t=1336847&page=7  에서 찾았다. sudo vi /usr/share/polkit-1/actions/org.freedesktop.udisks.policy 해서 보면 <allowed_any>no</allowed_any> 라는 부분이 있다 이부분을 <allowed_any> yes </allowed_any> 로 바꾸고 재부팅하자. 알아서 마운트까지 잘 된다.

Arduino+Bluetooth 연결 후 터미널에서 테스트하기

Arduino를 보고 있다. Bluetooth 모듈하고 연결은 tx,rx를 서로 교차연결하고 전원만 받아주면 만사 오케이더라. 이렇게 해서 이렇게 하긴 했는데 테스트 하기 위해선 nc 같은 터미널로 하면 쓸 수 없을까 싶었는데 그냥 screen 명령을 쓰면 되더라. Bluetooth Pairing 후 $ ls /dev/tty.* /dev/tty.Bluetooth-Incoming-Port /dev/tty.HC-06-DevB /dev/tty.Bluetooth-Modem 해보니 테스트 용으로 쓰고 있는 HC-06-DevB가 보이더라. $ screen /dev/tty.HC-06-DevB  으로 접근하면 시리얼 터미널로 돌입한다. 에코가 있으면 에코를 쏠테고 아니면 그냥 받아준다. 뒤에 전송속도를 써서 $ screen /dev/tty.HC-06-DevB 9600 이렇게 접근도 가능하다. 커맨드를 치고 enter를 치면 텍스트를 전달한다. 테스트를 마치고 나갈땐 ctrl+a, ctrl+\ 를 입력하면  Really quit and kill all your windows [y/n] 하고 물어본다. y를 눌러서 나가면 된다.

Meteor에서 웹서버 설정 - nginx

http://www.andrehonsberg.com/article/install-nginx-141-meteor-js-websocket-ubuntu-1204 3000->80포트 포워딩하느라 nginx를 사용하긴 했는데 (그리고 ssl도 해야하고 등등) 맘에 걸리는 점이 두가지 있었다. gzip을 안써도 되나 정적 resource를 meteor가 다루지 않도록 해야 그래서 찾아보니  http://stackoverflow.com/questions/18003689/recommended-nginx-configuration-for-meteor  이런 글이 있더라 딱 내가 찾던거네! 근데, meteor에선 css의 경우 경로가 /fc376dc60222227945af14b78724770fb1dbb699.css?meteor_css_resource=true 이런 식으로 뒤에 ?meteor_css_resource=true  가 붙는다. 정규식만 조금 고쳐주자. location ~* "^/[a-z0-9]{40}\.(css|js)$" { 이 부분을 css 뒤에 개행이 아닌 아무거나 와도 되도록 .*를 추가해주자.  location ~* "^/[a-z0-9]{40}\.(css .* |js)$" { 어 이거 하고 나니 PageSpeed Insights 가 100점이 되넹?

오늘의 닭짓일기 - iOS iOS iOS... plugins

자 이제 더러운 짓을 할 때다. 각종 권한들 왕창 플러그인들도 왕창 미리 설치해놓고 잠수함 패치로 앱스토어를 거치지 않고 업데이트할 수 있도록 미리 준비하는 것이다. TestFlight에 올리록 Archive를 하니 'Cordova/CDVViewController.h' file not found 오류가 계속 나서 stackoverflow를 전전하다 보니 아뿔싸 내 Cordova 버전이 너무 낮다. 3.5로 다시 업글 npm install -g cordova 그리고 iOS 7에선 Status bar가 내용을 가린다. MainViewController.m을 좀 수정하자. - (void)viewWillAppear:(BOOL)animated {     // View defaults to full size.  If you want to customize the view's size, or its subviews (e.g. webView),     // you can do so here.     //Lower screen 20px on ios 7     if ([[[UIDevice currentDevice] systemVersion] floatValue] >= 7) {         if(self.webView.frame.origin.y == 0) {             CGRect viewBounds = [self.webView bounds];             viewBounds.origin.y = 20;             viewBounds.size.height = viewBounds.size.height - 20;             self.webView.frame = viewBounds;         }     }     [super viewWillAppear:animated]; } icons도 복사하고 Icon.png Icon@2x.png Icon-72.png

오늘의 닭짓일기 - Amazon EC2 + Meteor

wwwizer  적용이 생각보다 오래걸리더라. 아무튼 지금은 잘됨. RalphChat 이 오픈소스가 되어 기쁨. 적절한 타이밍. AWS는 신청하니 별거 없는데 Security-Group 에서 Type Protocol Port Range Source SSH TCP 22 0.0.0.0/0 HTTP TCP 80 0.0.0.0/0 이렇게 잡아주고 nginx 설치 후 포트포워딩 등등을 함 http://www.andrehonsberg.com/article/install-nginx-141-meteor-js-websocket-ubuntu-1204 이거 보고 했는데 내 경우엔 apt-get 으로 설치하고보니 include sites-enabled/*; 부분은 필요 없었고 sites-available 에 설정파일 만들고 sites-enabled에 심볼릭 링크 만드는 게 전부였다. 그리고 DB는 따로 분리했는데 MongoHQ로 지정하였음. 어드민 겸 잘됐지뭐. 속도는 meteor.com 호스팅 보단 빠르지 않나 싶음. google analytics의 웹페이지 속성도 변경하고 안드로이드 버전업도 함. 벌써 0.0.7 도메인 문제가 전부 해결되었으니 다른 호스팅을 써도 이젠 의존성이 없음. pm2 를 써서 디플로이 하도록 했는데 watch 옵션을 쓰면 "거의" 무정지 운영도 가능할 듯.

오늘의 닭짓일기 - Cordova + Meteor

app에 meteor-rider 적용 기존 url scheme 관련 plugin인 com.borismus.webintent을 지웠다가 재설치 iOS 적용. 정상작동 확인 talk 섭 도메인 생성 및 meteor deploy새로 완료 wwwizer 에 naked domain 신청함. 아직은 안됨. 마이그 완료 새 도메인으로 앱 업뎃도 해야겠군. 언제든지 호스팅을 바꿔도 되도록. meteor-rider는 hijacking DOM을 이용해 로컬에서 먼저 기동하고 호스팅하고 있는 원격지 앱으로 갈아타기 하는 아주 간단한 방식인데 단점은  http://zeroasterisk.com/2013/08/22/meteor-phonegapcordova-roundup-fall-2013/  몇몇 하드웨어 관련 플러그인이 작동하지 않을 수도 있다고 한다. 그런데 RalphChat이 쓴걸 보니 별 문제는 없어보인다. Push 같은 게 작동하지 않으려나? iOS 적용은 초기에 네트웍 연결 불가능한 상태에서 404메시지 같은 걸 뿌릴 때 심사팀에서 매우 안좋아하더라. 거의 리젝이라고 보면 된다. https://github.com/apache/cordova-ios/blob/master/guides/Cordova%20Custom%20URL%20Scheme%20Handling.md iOS의 경우 URL Scheme을 적용하는 건 Android보다 간단. 원래 내부적으로 지원하나보다. 단 android의 경우는 meteor app에서 사용한 반면 iOS는 최초 index.html로 진입할때 하도록 함. 뭐 상관없나 싶기도 하지만.

3D가속을 지원하는 Ubuntu 12.04LTS 를 Multiboot RK3188 설치 후 설정

https://plus.google.com/+IanMORRISON 님에게 감사의 말씀을 일단 1. SD 준비하기 먼저 용량 넉넉한 MicroSD를 FAT32로 포멧한 후 MiniTool Partition Wizard 같은 걸로 Ext4 파티션을 만들어준다. 2. 듀얼부팅용 Flash하기 RKAndroidTool.exe 를 일단 받자 순서대로 올려보는데 일단 기본적으로 USB Driver 등은 설치+적용해놓고 리커버리모드로 부트. update.img는 https://drive.google.com/file/d/0B99O3A0dDe67NjVLSHlhQXVnX0k 받아서 v1.7에서 올려서 upgrade했다. 파일이름이 아마 rikomagic-linuxium-bootloader 인데 내용 물은 update.img임. 이걸로 듀얼부팅은 끝. (최신 kitkat 적용 radxa 롬이 있긴 하지만 안정화도 그렇고 멀티부팅도 아직이라 보류http://radxa.com/2014/03/25/android-4-4-2-preview-firmware-released/ ) 하지만 몇가지 패치는 해주자 v1.37에서 boot(5번째)에 https://drive.google.com/file/d/0B99O3A0dDe67NjVLSHlhQXVnX0k minix-linuxium-updated-boot.img 요거 한번 올리고 run v1.37에서 Kernel(4번째)에 https://drive.google.com/file/d/0B99O3A0dDe67LXIzLU5nUk9mZW8 rikomagic-linuxium-updated-kernel.img 요거 한번 올리고 run 3. 이미지를 올릴 차례다. https://docs.google.com/file/d/0B99O3A0dDe67S1hQQ2VybldVYU0/edit  를 sd카드에 올리고 부트한 뒤 c 를 선택 커맨드라인 모드로 돌입. 쭉쭉 입력해주자. mke2fs /dev/mmcbl

Meteor/handlebars에서 radio/select 다루기

자주쓰지만 은근 귀찮은 것이 radio와 select다. 특히 최초에 렌더링 할때 선택하게 하는게 번거롭다. #each로 option이나 input에 들어갈 별도의 키를 find의 transform에서 만들거나 아예 fetch를 하거나 array를 조작하거나 하는 건 어렵지 않지만 매번 같은 상황일때마다 코딩을 해야되니까 안 이쁘쟈나. (그렇쟈나 손구락 뿌러지쟈나 카피엔 페이스트 귀찮쟈나 짜증나쟈나!) 물론 checkbox도 귀찮지만 비슷하게 응용하면 될 것이니 handlebars의 block helpers를 사용하여 이 귀찮음을 해결해볼 수 없을까 해서 코드를 만들어보았다. 먼저 select를 해보면 다음과 같은 그림인데 <select>   {{#each array}}   <option value="{{code}}">{{name}}</option>   {{/each}} </select> array중 code가 특정값과 일치하면 selected="selected"가 되도록하려면 간단하게는 option이라는 Helper를 만들어 {{option name code value}}식으로 할 수도 있겠지만 <option> 이라는 객체가 없어지니까 별로 좋지 않다. 그렇다면 특정 블록을 감싸안아서 인자로 받은 값과 같은 option이 있는지 찾아서 수정한 후 대치하면 될 것이다라고 생각. Handlebars . registerHelper "select" , (value, options) -> select = document . createElement ( "div" ) $ ( select ). html options () $ ( "option" , select ). filter ( "[value=' #{ value } ']" ).

IE 10에서 JSON object 사용 시 주의점

js에서 JSON에 ,를 잘못 쓰면 IE 10에서 오류 나는 경우 발견. var obj = {   a:1,   b:1 }; 이 맞지만 var obj = {   a:1,   b:1 ,  }; 복사하기 귀찮아서 이렇게 쓰는 라이브러리들이 간혹 있음. 문제는 ,를 쓴 곳에서 오류가 발생하는 것이 아니라 그 이후 라인에서 잘못한 것처럼 보여서 잡아내기 쉽지 않다. webstorm 같은 구문검사 기능이 있는 에디터를 꼭 쓰자. 아니면 coffeescript를 쓰던가 ;p

안드로이드 TV 스틱(armv7l)용 meteor branch를 만들었습니다.

https://github.com/acidsound/meteor/commit/d65a2a3530d89fd97c1b582b00ed28af9c5c608a 수정사항은 위와 같습니다. 필요한 의존성이 있으므로 sudo apt-get update sudo apt-get install build-essential openssl libssl-dev pkg-config git-core scons libpcre++-dev libboost-dev libboost-program-options-dev libboost-thread-dev libboost-filesystem-dev curl 먼저 받아놓습니다. 설치 방법은 git clone https://github.com/acidsound/meteor.git cd meteor git checkout devel_armv7l ./scripts/generate-dev-bundle.sh 이걸로 빌드한 후 ./meteor 로 확인해보면 됩니다. meteor 디렉토리를 path로 잡던가 meteor를 /usr/local/bin 에 넣던(확인 안해봄)하면 됩니다. meteorite(mrt) 설치는 그냥 npm install 을 사용해서 하면 별 이상 없이 잘 붙습니다. mongo는 포함하고 있지 않으므로 실행시엔 반드시 외부(ex.mongohq) mongo 서비스를 사용하시길 바랍니다. MONGO_URL=mongodb://id:pw@alex.mongohq.com:10058/yourdb mrt 식으로 실행하면 됩니다.

Cordova(구 phonegap)로 android 앱을 만들 때 GPS 정보를 잘 못 받아온다면.

어떤 폰에선 되고 어떤 폰에선 안되고 되다가도 안되고 하도 현상이 여러가지라서 거의 2주동안 붙잡고 씨름했는데 허무한 결말. navigator.geolocation.getCurrentPosition(success, failure, option); 에서 option에 {   timeout: 10000 } 만 줘서 하니 잘 된다. iOS는 뭐 아무렇게나 해도 잘되는데 Android에선 enableHighAccuracy : true 옵션을 주면 안된다. 나머지는 config.xml에     <feature name="Geolocation">         <param name="android-package" value="org.apache.cordova.geolocation.GeoBroker" />     </feature> 이런게 있는지 platforms/android/AndroidManifest.xml에 가 있는지 ....     <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />     <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />     <uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" /> 권한이 잘 들어갔는지 정도만 신경 써주면 된다.

Meteor를 client만 사용하기 - Offline Meteor

'뭔소리야 서버부터 클라이언트까지 하나의 언어 하나의 자료형을 쓰는게 Meteor의 장점인데 왜 서버를 분리해?' 라며 당연하고 올바른 생각을 가지고 계신 분이라면 '뒤로 가기' 추천합니다. ^^;;; Meteor는 좋은데 서버가 자바야, PHP야. 혹은 Cordova(구 phonegap)이나 Chrome Apps같은 분야에 적용하고 싶은데 Meteor로 하고 싶어라고 생각하신다면 추천. Meteor 프로젝트를 meteor create <...> 로 생성하셨다면 Meteor는 run을 한 시점부터 .meteor/local/build/programs/client 에 클라이언트 쪽 파일들을 생성합니다. 이걸 고대로 떠서 약간의 작업을 하면 서버와 상관없이 사용할 수 있는데. app.html 의 ##HASH## 들을 삭제한다. __meteor_runtime_config__ 을 추가하여 ROOT_URL을 지정한다. (보통은 localhost) package등에서 사용하는 정적 자원에 대한 경로를 수정한다. 8000포트에 할 경우 .html 파일에 아래와 같은 부분을 ##RUNTIME_CONFIG## 있는 곳에 바꿔 넣어줍니다.   __meteor_runtime_config__={   ROOT_URL = "http://localhost:8000"   } 정도가 되겠습니다. 의외로 어렵지 않죠? 근데 실제로 해보면 신경쓸 것들이 좀 있습니다. 제 경우는 디렉토리 구조를 이렇게 잡았습니다. 생성한 과정은 이렇습니다. $ mkdir pack $ cd pack $ meteor create memo $ mkdir www $ cd memo 여기까지 하고 client 쪽 코드를 약간 수정합니다. Meteor는 기본적으로 클라이언트 vs 서버간 websocket통신을 하고 있기 때문에 관련 그 부분을 hack해서 못쓰게