환경 : Mac OSX Lion, Sencha SDK v2.0.0 beta3, Chrome


이번주에는 앱을 개발하는데 주요한 문제가 발생하였다.


# 상황

프로젝트 index.html을 실행했을 때(빌드를 하지않은 상태)에는 잘 실행이 된다. 그리고 testing 빌드를 통해서도 실행에 문제는 없었다.

하지만 production으로 빌드했을 경우, 에러가 난다.


# 문제해결

여기서 문제는 html5 application cache 에 대한 문제였다. 정확히 어디가 어떻게 되서 어떤지는 잘 모르겠지만...


method 1.

Chrome에서 사용기록을 전부 지웠을 때 제대로 동작한다.

method 2.

Chrome에서 사용기록을 전부 지워도 제대로 동작하지 않는경우, 추가적으로 크롬을 완전종료시킨 후 다시 접속한다.


필자는 따라서 Chrome에서 사용기록을 전부 지워도 에러가 지워지질 않아 사용기록을 지우고 Chrome을 종료했다가 다시 켜서 실행해봤더니 제대로 동작한다. :(


# 결론

따라서 production 빌드를 했는데 에러가 났다면, testing 빌드와 빌드를 안했을 경우에는 제대로 동작한다면?

사용기록을 지웠는데도 실행이 안된다면? 크롬을 종료한 후에 다시 실행해봐라!




'Hybrid Application > SenchaTouch' 카테고리의 다른 글

Sencha SDK 주요 명령어  (0) 2012.11.08
Sencha Touch 2.0.1 이용하기  (2) 2012.11.08
Get Started Sencha Touch 2.1 RC2 - 1.환경설정편  (0) 2012.10.22
Sencha Touch 2.1 RC2  (0) 2012.10.22

환경 : Mac OSX Lion


# Sencha SDK

 sencha generate app [앱이름] [경로] 

위 구문은 Sencha Touch 프로젝트를 만들기 위해 사용하는 명령어이다. 결과는 이전의 Sencha Touch 2.0.1 이용하기에 있다.


혹시나 generate 버그가 발생할 경우

sencha app create [앱이름] [경로]


아래 명령어들은 앱을 빌드하는 방법이다. 

빌드하는 이유는 앱을 MVC 모델로 만들게 되면 수많은 파일들이 나오게 될 것이다. 하지만 앱에서는 파일이 많을수록 로딩시간이 길어지고 효율이 떨어지게 되기 때문에 파일을 최소화하고 내용을 압축시켜서 최소화 시키기 위함에 있다.

첫째로, testing은 MVC 모델로 나눈 파일들을 app.js에 다 모아주는 역할을 한다.

 sencha app build testing 

둘째로, production은 testing한 파일을 minify 해주는 역할을 한다.

 sencha app build production 

셋째로 native는 스마트폰에 앱을 넣거나 시뮬레이션을 하기 위해 패키징하여 apk, ipa 파일을 만드는 역할을 한다. 그리고 자동으로 스마트폰에 설치되어 사용해 볼 수 있다.

 sencha app build native 


추가적으로 controller, view, model과 같이 새로운 파일을 생성할 경우,

필자 같은경우는 app.js에 경로를 추가하고, 새로운 파일을 만들어 사용을 하지만, SDK를 이용하여 만들고 싶다면,

 sencha generate [형태] [이름]         ex) sencha generate controller Main (Main.js 컨트롤러 생성)


'Hybrid Application > SenchaTouch' 카테고리의 다른 글

Production 빌드의 문제?  (0) 2012.11.08
Sencha Touch 2.0.1 이용하기  (2) 2012.11.08
Get Started Sencha Touch 2.1 RC2 - 1.환경설정편  (0) 2012.10.22
Sencha Touch 2.1 RC2  (0) 2012.10.22

환경 : NodeJS v0.8.6, Mac OSX Lion


# Express Module

다음 명령어를 통해 express 를 설치하자.

 sudo npm install -g express 

-g 로 설치하면 /usr/local/bin/ 에 설치 되고, -g 없이 설치하면 현재 폴더에 node_module 폴더에 다운이 된다.


설치가 되면 express 명령어를 통해 프로젝트 폴더를 만든다.

 express [폴더명]           ex) express test


그럼 다음과 같은 화면을 통해 test라는 폴더가 생긴다.


test 파일 내부 구조를 보면, 다음과 같다.

이 프로젝트가 일단 잘 돌아가는지 확인해보려면,

폴더안에서 다음 2가지 모듈을 설치한다.

 npm install express 

 npm install jade  

모듈설치가 끝나면,

 node app.js 

위 명령어를 통해 NodeJS를 실행하고 브라우져에서 http://localhost:3000 을 쳐본다.

그럼 다음과 같은 화면을 통해 localhost 접근을 할 수 있다는 것이 보여진다.




# localhost/index.html

여기서 localhost라는 주소를 만들고 싶다면? 

1. Eclipse의 Dynamic Project와 Tomcat을 이용하여 localhost 만들기

2. NodeJS Express 를 이용하여 localhost 만들기

3. MAMP 를 이용하여 localhost 띄우기

추가적으로 여러가지 방법이 있겠지만, 제가 활용하던 방법은 위 3가지가 있다.


하지만 필자는 Eclipse가 너무 느려서 하기싫고, MAMP는 프로그램을 또 설치해야한다.

따라서 가볍고 쉬운 Express를 주로 이용하게 되는데 위쪽에서는 localhost:3000 이었다. 이것을 바꾸는 방법은?


위에서 프로젝트를 생성하고 난 후 app.js 파일을 확인하자.

위에서 볼 수 있듯이 3000 포트를 사용한다.

간단하게 필자가 변형해 보았는데, 2가지를 필요로 만들었다.

1. 포트는 3000번이 아닌 80번을 사용한다.

2. public 안에 index.html을 사용한다.


# Example #


var express = require('express')

  , routes = require('./routes')

  , http = require('http')

  , fs = require('fs')

  , path = require('path');


var app = express();


app.configure(function(){

  app.set('port', process.env.PORT || 80);

  app.use(express.favicon());

  app.use(express.logger('dev'));

  app.use(express.bodyParser());

  app.use(express.methodOverride());

  app.use(app.router);

  app.use(express.static(path.join(__dirname, 'public')));

});


app.configure('development', function(){

  app.use(express.errorHandler());

});


app.get('/', routes.index);


http.createServer(app).listen(app.get('port'), function(){

  console.log("Express server listening on port " + app.get('port'));

});

 

이것을 이용하여 활용 할때에는 이전에 있던 public 폴더를 지운다.

그리고 심볼릭 링크를 이용하여 연결시킨다.

# 심볼링 링크 거는 방법

 ln -s [실제경로] [가상경로]                ex) ln -s ../testfolder/ public

심볼릭 링크의 장점은 가상으로 경로를 연결시키므로 실제경로에 있는 파일들이 가상경로 하위에도 보여지게 된다. 가상경로 안에서 수정을 하면 실제경로에 있는 파일들이 수정이 되고, 심볼릭링크를 삭제하면 가상폴더만 삭제될뿐 실제경로에는 아무런 피해가 없다.

위와 같이 public 폴더 아이콘에 보면 화살표 표시가 나면서 심볼릭 링크를 볼 수 있다. 

이제 app.js 를 실행해야 하는데, 여기서 주의할 점은 맥에서 일반사용자는 80번포트를 사용할 수 없기때문에 sudo 명령어를 추가하여 root 권한을 가져야한다.

 sudo node app.js 

그럼 다음과 같은 화면을 볼 수 있다. public 내부에 있는 파일은 Sencha SDK를 통해 만든 기본프로젝트이다.


'Back-End > NodeJS' 카테고리의 다른 글

NodeJS 설치  (0) 2012.10.28
NodeJS Conference Mobile Trend 2012. 11. 8. 03:04

사이트 : http://nodeconf.kr/2012/

올해에 NodeJS 컨퍼런스가 국내에서 처음 열린다고 한다. 필자는 NodeJS를 시작한지 몇개월 안되었지만, 매력에 푹 빠져서 이 컨퍼런스도 참석하려고 한다.


등록은 11월 20일(화)에 이루어졌는데, 보다시피 얼리버드로 등록완료! :)


11월9일부터 일반신청도 가능하니 NodeJS에 관심이 있는분들은 한번 가보면 괜찮을 듯 싶어서 공유!

환경 : Mac OSX Lion


1. 설치하기

몇일전에 Sencha Touch 2.1 RC2 를 이용하여 앱 개발해보고 테스트를 하려고 했지만, 아직 베타버전이라 고생을 많이 해서 다시 2.0.1버전으로 앱을 개발하기로 했다...

Download : http://www.sencha.com/products/touch/download/ ( Sencha Touch 2.0.1 )

사이트에 접속을 하고 E-mail 을 적고 버튼을 누르면 메일로 다운로드 주소가 오게된다.

< E-Mail 화면 >


다운을 받으면 압축을 풀고 원하는 위치에 놓는다. 필자는 ~/dev/안에 넣어뒀다.


완료 되었으면 다음으로 Sencha SDK를 다운받는다. 

Download : http://www.sencha.com/products/sdk-tools/download ( Sencha SDK 2.0.0 Beta 3 )

이 사이트에서 다운받아서 바로 설치하면 끝!

설치가 끝나면 확인을 위해 터미널을 열고 sencha 를 쳐본다.



2. 프로젝트 만들기

설치를 완료했으면 간단한 명령어를 통해 프로젝트를 한번 만들어보자.

일단 터미널을 접속한 후 Sencha Touch 2.0,1을 다운받았을 때 압축을 푼 폴더로 가자.

그리고 다음 명령어를 쳐본다.

sencha generate app test ../testfolder

위의 명령어를 통해 프로젝트를 생성하는 화면이다.

이 명령어는 sencha generate app [앱이름] [경로] 로 이루어져 있으며, 이것으로 간단하게 프로젝트를 만들어볼 수 있다.

폴더 내부는 다음과 같이 이루어져있다.

# app 폴더는 Sencha Touch 의 MVC모델의 파일을 저장하는 곳이다. 처음 생성하면 view > Main.js 파일이 기본적으로 생성되어있다.

# app.js 파일은 Sencha Touch 2 버전의 가장 초기에 실행되는 파일로서, Ext.Application이 정의되어 있다.

# app.json 파일은 앱이 실행하기에 추가적인 외부파일 등을 추가하기 위한 앱 속성파일이라고 생각하면 된다.

# packager.json 파일은 앱을 패키징하기 위한 속성파일이다.

# resources 폴더는 하위폴더 이름을 보면 아시다시피 추가적인 파일을 저장해놓은 폴더이다.

# sdk 폴더는 Sencha 모듈이 들어있는 폴더이다.


이 프로젝트를 실행하려면 그전에 localhost 환경을 만들어야한다.

환경을 설정하고 index.html 를 실행하면 다음과 같은 모습을 볼 수 있다.




'Hybrid Application > SenchaTouch' 카테고리의 다른 글

Production 빌드의 문제?  (0) 2012.11.08
Sencha SDK 주요 명령어  (0) 2012.11.08
Get Started Sencha Touch 2.1 RC2 - 1.환경설정편  (0) 2012.10.22
Sencha Touch 2.1 RC2  (0) 2012.10.22

환경 : Ubuntu 11.04 Server / Mac OSX Lion

참고사이트 : http://mongoosejs.com/docs/api.html ( Mongoose API 사이트 )

http://nodetuts.com/tutorials/18-mongodb-and-mongoose.html ( 다른 서버사이드 소스를 Mongoose로 바꾸는 동영상이 있는 사이트 )



1. Mongoose 설치

NodeJS 에 NoSQL(MongoDB)를 사용하기로 마음을 먹었다. 

MongoDB를 사용하기 위해서 설치하는 모듈을 둘러본 결과 MongoDB-Driver Mongoose 라는 외부모듈이 가장 많이 사용되는것으로 파악되었고, 두 모듈 중 어느 것을 사용할까 고민하던 중 게시판에서 두가지를 놓고 투표 한 결과로 Mongoose 모듈이 득표율이 높았던 것을 확인할 수 있었다.

따라서 필자는 Mongoose를 사용해야겠다는 결심을 했다. (꼭 Mongoose를 안써도 되니 선택은 직접!)


앞서, MongoDB를 설치를 하였고, 동일 프로젝트 안에 mongoose 모듈을 npm으로 설치한다.

 npm install mongoose 



2. 용어정리

필자는 MySQL을 통해 DB라는 개념을 접근하였는데, Mongoose에서는 어떤형식으로 사용하는지 확인해보자.

MySQL 

MongoDB 

 Database

Database 

Schema

Schema 

Table

Collection 

Row

Document 

추가적으로 소스를 보면서 이해해보자.

 mongoose.connect('mongodb:/localhost/test') 

위 소스는 mongoose를 통해 DB서버에 접속하는 구문이다. 이때 test 는 Database이름을 적으면 된다. 

 var ThingSchema = new Schema({ 

     'name': String, 

     'age': Number 

 }); 

위 소스는 mongoose에서 Schema를 생성하는 구문이다. 

 var Thing = mongoose.model('thing', ThingSchema); 

위 소스는 mongoose에서 Thing이라는 Collection을 생성하는 구문이다. 위 Schema대로 Table을 생성했다고 이해하면 된다.
여기서 중요한점은 test라는 Database에 thing이라는 table이 아닌 자동으로 s가 붙어서 things 라는 table이 된다.

 Thing.find({} , function(err,docs){ 
 console.log(docs); 
 }); 
위 소스는 mongoose에서 Thing이라는 Collection에서 검색하는 구문이다. 쉽게 Select문이라고 이해하면 되고 find옆에 {} 이 사이에는 Where문 처럼 해당하는 조건값을 넣어주면 된다. 여기서 docs는 Document를 뜻하는데 한 Row씩 검색하는 방식이므로 Document는 Row를 의미한다.


3. 응용하기

바로 예제를 보면서 테스트 해본다.

필자가 필요로 하는 부분은 SQL문에서 흔히 쓰이는 Insert / Update / Select / Delete 하는 부분을 구현하는 것이었다.

자세한 내용은 API 사이트 http://mongoosejs.com/docs/api.html 를 참조하길 바란다.



# Example #


var mongoose = require('mongoose');


// mongoose를 mongoDB가 설치되어있는 곳에 접속하는 구문. test라는 Database로 접속!

mongoose.connect('mongodb://localhost/test');


// 이쪽은 꼭 안해도 된다....

var Schema = mongoose.Schema;

var ObjectId = Schema.ObjectId;


// Collection을 생성하기 전에 Schema를 통해 구조를 만들어 놓는다.

var ThingSchema = new Schema({

  'name': String,

  'age': Number

});


// Thing이라는 Collection을 생성. 

var Thing = mongoose.model('thing', ThingSchema);


// 새로운 인스턴스를 생성하는 방법 + 데이터를 넣고 Insert하는 부분.

/*

var newThing = new Thing();

newThing.name = 'a';

newThing.save(function(err){

  // saving is asynchronous

  if(err) console.log("Something went wrong while saving the thing");

  else console.log("Thing was successfully saved");

});

*/


// 조건을 통해 Select 하는 방법 + 그 해당 Document에서 id라는 부분을 참조하는 방법

Thing.find({ name: 'c' }, function(err, docs){

for(var i=0, size=docs.length; i<size; i++) {

var name = docs[i]._id;

console.log(name);

}

// 이 부분은 Update문 사용하는 방법, 

/*  Thing.update({$inc: {name:'e'}}, { safe: true }, function(err) { console.log(err); }); */

});


// 이 부분은 조건을 통해 Select라는 방법은 똑같지만 1개의 Document만 필요로 할때 유용한 방법.

/*

Thing.findOne({ name: 'c' }, function(err,docs){

console.log('deleting' + docs); //Remove all the documents that match!

docs.remove();

docs.save();

});

*/


// 위에 나왔던 Update는 같지만, multi 프로퍼티를 통해 해당하는 모든 Document를 바꿔주는 방법.

/*

Thing.update(

{ name: 'c' },

{ $set: { name : 'd' } },

//  { multi: true }, 

function(err, res) {

console.log(err, res);

}

);

*/


// Delete 하는 방법. {} 안에는 조건도 가능함.

/*

Thing.remove({}, function(err) {

if(!err) {

console.log('no err');

} else {

console.log('err');

}

});

*/


4. 확인해보기

MongoDB가 설치되어있는 서버로 가보자.

mongo

위의 명령어를 통해 mongoDB에 접속해보자.

접속하자마자 Database는 test로 되있다.


현재 Database를 확인하는 명령어는

 > db 

현재 Collection을 확인하는 방법은

 > db.콜렉션이름.find()             ex) db.things.find()


따라서 위의 소스를 이용하여 테스트한 결과는 다음과 같이 확인 할 수 있다.


'NoSQL > mongoDB' 카테고리의 다른 글

mongoDB 설치  (0) 2012.10.29
mongoDB 설치 NoSQL/mongoDB 2012. 10. 29. 21:02

설치환경 : Ubuntu 11.04 Server

원본 출처 : http://docs.mongodb.org/manual/tutorial/install-mongodb-on-ubuntu/


1. 설치하기


다음 명령어를 통해 키값을 받아온다.

 sudo apt-key adv --keyserver keyserver.ubuntu.com --recv 7F0CEB10 


그리고 소스를 추가하기 위해 vi 에디터를 이용하여,

 vi /etc/apt/sources.list 

다음 소스를 추가(필자는 맨 아랫줄에..) : 

 deb http://downloads-distro.mongodb.org/repo/ubuntu-upstart dist 10gen 




소스 추가 후 

 sudo apt-get update 

 sudo apt-get upgrade 

 sudo apt-get install mongodb-10gen 



2. 실행하기


터미널 화면에서 mongo 명령어를 치면 다음과 같이 Database에 접속할 수 있다.


나가는 방법은 "Ctrl + C" 를 통해서...

'NoSQL > mongoDB' 카테고리의 다른 글

Mongoose Module 사용하기  (0) 2012.10.31
NodeJS 설치 Back-End/NodeJS 2012. 10. 28. 14:33

설치환경 : Ubuntu 11.04 64bit



1. 다운로드


아래와 같은 명령어를 통해 다운을 받는다.

 wget http://nodejs.org/dist/v0.6.8/node-v0.6.8.tar.gz 


Version 을 바꾸고 싶다면?

http://nodejs.org/dist 에 접속하면 다른버전이 어떤것들이 있는지 확인 할 수 있다.



위 그림을 보고 v0.9.3을 다운받고 싶다면, 


 wget http://nodejs.org/dist/v0.9.3/node-v0.9.3.tar.gz 



필자는 v0.8.6 으로 이전에 설치 했다.



2. 설치하기


압축을 풀어야한다.  

tar xvzf node-v0.9.3.tar.gz 


압축 푼 폴더로 접속 

 cd node-v0.9.3 


접속 후 다음 명령어로 설치하자.

 ./configure 

 make 

 sudo make install  


 node --version  으로 설치 되었는지 버전을 확인해보자.



혹시 필요한 패키지 설치가 안된경우

 sudo apt-get install g++ curl libssl-dev apache2-utils 





3. 실행해보기


다음 예제파일을 example.js 로 저장시키자.


그리고 실행하는 방법은,

 node example.js 



위와 같은 화면을 볼 수 있다.


그럼 내부 브라우저를 통하거나 외부 브라우저를 통해서 접속해보자. 필자는 Ubuntu Server 버전이기 때문에 GUI가 지원되지 않으므로 외부 컴퓨터에서 접속을 해보도록 하겠다.



위와 같은 결과화면을 볼 수 있으며, ip주소가 예를들어 127.0.0.1 이라면 주소창에 127.0.0.1:3000 으로 접속이 가능하다.


혹시나 node example을 정지하려고 한다면,

"Ctrl + C" 를 누르면 nodejs를 실행했던 것을 정지시킨다. 

저처럼 리눅스계열을 사용하는게 아니라면.. 윈도우 혹은 맥을 쓰신다면.. 이렇게 힘들게 설치 할 필요없이

http://www.nodejs.org/ 에 들어가면 설치 파일을 받을 수 있다. 


'Back-End > NodeJS' 카테고리의 다른 글

Express 모듈을 이용한 localhost 만들기  (1) 2012.11.08

설치환경 : Mac OSX Lion 

Sencha Touch 2.1 RC2  / Sencha Cmd v3.0.0.201 ( 현 시점 베타 201 ) - 더 향상된 버전을 이용할 경우 아래 부분에 201대신에 그 버전 숫자를 넣어야함.


1. 다운로드하기



DownLoad : http://www.sencha.com/forum/announcement.php?f=89


링크를 클릭 한 후 밑줄친 부분을 클릭하면    다운로드가 시작한다



압축해제하면   설치끝!




2. Cmd 설치


다음으로 Sencha Touch Cmd 를 설치해야한다.



1번의 링크에서 다음과 같은 링크들이 있다. 

1. 리눅스용 x64

2. 리눅스용 x32

3. 맥 osx

4. 윈도우용

으로 구성되어 있다. 자신의 환경에 맞게 다운로드 !!

다운받아서 압축을 풀면 위와같은 파일이 있다. 설치 !!


설치 후 터미널에서 Sencha 라고 입력을 하면 다음과 같은 화면이 보여야한다.



이 화면이 안보인다면? ... 

# 이미 Sencha Cmd v2.0.0 beta3 와 같은 이전버전을 설치한 경우

# 환경변수 등록이 제대로 안되어있는 경우

라고 판단이 된다. 필자는 첫번째의 경우였다.


그럼 환경변수에 

export SENCHA_CMD_3_0_0="/Users/qkfmxha/bin/Sencha/Cmd/3.0.0.201"

export PATH=/Users/qkfmxha/bin/Sencha/Cmd/3.0.0.201:$PATH

라고 추가시킨다. v2.0.0과 같이 이전버전이 설치 된 경우 대치한다.


환경변수 등록방법


    • 자신의 아이디 폴더로 간다. ( /Users/ID )

예 )  


    • 자신의 아이디 폴더에서 ls -a 를 입력한다.

    • .bash_profile 을 수정한다. ( sudo 명령어로 관리자모드로 수정해야함 )


'Hybrid Application > SenchaTouch' 카테고리의 다른 글

Production 빌드의 문제?  (0) 2012.11.08
Sencha SDK 주요 명령어  (0) 2012.11.08
Sencha Touch 2.0.1 이용하기  (2) 2012.11.08
Sencha Touch 2.1 RC2  (0) 2012.10.22

Sencha Touch 2.1 RC2 버전이 나왔습니다.

Layout 퍼포먼스 향상

Sencha Touch 는 버전업이 될 때 마다 항상 퍼포먼스를 개선해 왔습니다.
좀 더 네이티브 처럼 보이기 위한 노력들 인데요.
이번에도 상당부분 개선이 있었다고 합니다.
원문을 빌리자면
The API impact of the change is minimal, but the performance improvement is dramatic.
이렇게 이야기 합니다.

발전된 List component (무한 스크롤 영역)

WebView 기반의 어플리케이션에서 List 컴포넌트 문제는 심각한 문제 중 하나 입니다.
Native 에서는 List 의 개수가 아무리 많아도 부드럽게 동작 합니다만,
WebView 기반에서는 그렇지 못했습니다.
20~30개 정도의 List 정도야 어디서나 잘 작동 했지만,
300~700개 정도의 List 는 어떠한 Device 에서도 사용하기 어려웠는데요.
Sencha Touch 2.1 에서 획기적으로 개선을 하였습니다.
Sencha Touch 2.1 List Components Performance
진행 방향에 따라 DOM elements 를 넣었다 뺐다 하는 방식인데요.
List 가 아무리 많아도 WebView 나 브라우저 입장에서는
DOM elements 숫자를 최소한으로 유지 할 수 있어 빠르게 그려 낼 수 있는 것이죠
300~700개가 문제가 아니라 무제한 List 구현도 되는 것입니다.
과거에도 이러한 방식의 접근이 가능했지만, 개발자가 일일이 개발해서 처리 해 줬어야 했습니다.

더욱 많아진 Native Support

Sencha Touch 2.0 에서의 Native Device API 지원은 좀 부족했었습니다.
아무래도 첫 선보인 기능이다보니 기능이 부족했는데요.
이번에 많은 향상이 있었답니다.
예를들면, 앱 내 결제(in-app purchase) 나 native push notifications 등을 설정할 수 있고,
다른 앱으로 이동하는 링크 URL도 열수 있으며, 주소록 접근도 가능해 졌답니다.

Sencha Touch Charts

Sencha Touch 2.1 을 지원합니다.
요즘 Sencha 관련 제품의 발전 속도가 너무 빨라서 정신이 없습니다.
Sencha Command, Sencha IO, Sencha Complete, Sencha GTX… 등등 정신없이 새로운 버전들을 내놓고 있습니다.