2일차 : Sencha Touch 2 가장 간단한 app 만들기

1일차 : Sencha Touch 2 개발 환경 구축 을 따라서 개발 환경을 구축했다면 가장 간단한 프로그램을 만들어보자.

먼저 시작하기에 앞서서 당연히 톰캣이 설치되 있어야 하고 톰캣 서버 폴더 안에 sencha touch 2 SDK 파일들이 있어야 한다.

필자는 아래와 같이 폴더가 구성되어 있다.

cmd 창을 열어서 (윈도우키 + r 을 열면 실행 창이 뜨고 거기에 cmd 라고 입력한 뒤 enter 키를 누르면 된다) 위의 해당 디렉토리로 이동하자.

아래와 같이 해당 디렉토리로 이동하자.

여기서 우리는 ST2_test1 이라는 app 을 만들어 볼 것이다.

아래와 같이 입력하자.

sencha  generate  app  ST2_test1  ../ST2_test1

그러면 아래와 같은 화면이 뜨는 것을 확일 할 수 있을 것이다.

D:\Tomcat 7.0\webapps\Root 폴더에서 보면 ST2_test1 폴더가 생성되 있는 것을 볼 수 있다.

해당 폴더로 들어가보면 아래와 같은 화면이 나온다.

Tomcat 7.0\bin 폴더에

Tomcat7 을 실행한 뒤 

Chrome 에서 http://localhost:8080/ST2_test1/ 를 입력하면 !!

아래와 같은 화면이 뜬다!!!ㅎㅎ

생성된 폴더 내부를 다시 보자

각각의 의미는 다음과 같다.

app : MVC 형태로 만들어진 폴더가 있다. MVC 를 잘 모르는 분들은 따로 찾아보시길!!ㅎ app 폴더로 들어가게 되면 아래에 Models, Views, Controllers, Stores 폴더가 각각 있다.

app.js : 우리가 만든 app 의 자바스크립트 entry point 가 된다.

app.json : 우리 app 의 설정과 관련된 파일이다. 

index.html : 우리 app 에 대한 html 파일이다.

packager.json : Packager 가 우리 app 의 Android 나 iOS 버전의 native 한 app 을 만들려 할 때 사용되는  설정 파일이다.

resources : 우리 app 에 필요한 CSS 와 images 를 가진다.

sdk : sencha touch sdk 의 복사본을 가진다. 우리가 건들 필요 없다.