환경 : 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