DevDoc

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

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

# 상황

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

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

# 문제해결

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

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

# 결론

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

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

환경 : Mac OSX Lion

# Sencha SDK

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

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

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

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

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

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

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

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

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

환경 : 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 를 실행하면 다음과 같은 모습을 볼 수 있다.

설치환경 : Mac OSX Lion 

1. 다운로드하기

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

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

압축해제하면   설치끝!

2. Cmd 설치

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

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

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

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

설치 후 터미널에서 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 명령어로 관리자모드로 수정해야함 )

• 원본 출처 : http://www.sencha.com/blog/whats-coming-in-sencha-touch-2-1
  

• 번역 출처 : 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 퍼포먼스 향상

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 에서 획기적으로 개선을 하였습니다.

진행 방향에 따라 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… 등등 정신없이 새로운 버전들을 내놓고 있습니다.