검색결과 리스트
Developer에 해당되는 글 10건
- 2012.11.08 Production 빌드의 문제?
- 2012.11.08 Sencha SDK 주요 명령어
- 2012.11.08 Express 모듈을 이용한 localhost 만들기 1
- 2012.11.08 NodeJS Conference
- 2012.11.08 Sencha Touch 2.0.1 이용하기 2
- 2012.10.31 Mongoose Module 사용하기
- 2012.10.29 mongoDB 설치
- 2012.10.28 NodeJS 설치
- 2012.10.22 Get Started Sencha Touch 2.1 RC2 - 1.환경설정편
- 2012.10.22 Sencha Touch 2.1 RC2
글
환경 : 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를 통해 만든 기본프로젝트이다.
설정
트랙백
댓글
글
사이트 : 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);
Thing.find({} , function(err,docs){console.log(docs);});
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 |
|---|
설정
트랙백
댓글
글
설치환경 : 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 |
|---|
설정
트랙백
댓글
글
설치환경 : 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
[출처] Noedde.js 인스톨 하는 방법|작성자 좋은생 각
node --version 으로 설치 되었는지 버전을 확인해보자.
혹시 필요한 패키지 설치가 안된경우
sudo apt-get install g++ curl libssl-dev apache2-utils[출처] Node.js 인스톨 하는 방법|작성자 좋은생각
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 |
설정
트랙백
댓글
글
번역 출처 : http://sencha.or.kr/?p=641
Sencha Touch 2.1 RC2 버전이 나왔습니다.
- Download : http://www.sencha.com/forum/announcement.php?f=89
- Release Note : http://dev.sencha.com/deploy/sencha-touch-2.1.0-rc2/release-notes.htm
Layout 퍼포먼스 향상
The API impact of the change is minimal, but the performance improvement is dramatic.
발전된 List component (무한 스크롤 영역)
과거에도 이러한 방식의 접근이 가능했지만, 개발자가 일일이 개발해서 처리 해 줬어야 했습니다.
더욱 많아진 Native Support
Sencha Touch Charts
'Hybrid Application > SenchaTouch' 카테고리의 다른 글
| Production 빌드의 문제? (0) | 2012.11.08 |
|---|---|
| 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 |
RECENT COMMENT