지난번에 보았던 센차 터치 쇼핑몰 소스를 분석해 보겠습니다.
일단 Index.html 을 볼께요.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Shopping List</title>
<link rel="stylesheet" href="css/app.css" type="text/css">
</head>
head 부분을 보시면 css를 css/app.css 를 사용하는 것을 볼 수 있습니다.
<body>
<!-- In production use sencha-touch.js -->
<script type="text/javascript" src="sencha-touch/sencha-touch-1.1.0/sencha-touch-debug.js"></script>
이 부분을 보니까 이 소스코드는 sencha touch 1.1.0 버전을 사용하는 군요. sencha-touch-debug.js 파일을 불러오고 있습니다. 이 부분은 head 안에 있어도 되는데 이 소스코드에서는 body 첫 부분에 넣었군요. 이 js 파일은 따로 분석할 필요는 없습니다. 이 파일에 sench touch 의 수 많은 기능이 있는 파일이니까 그냥 계속 복사하면서 사용하시면 됩니다.
<!-- Application starting point -->
<script type="text/javascript" src="js/app.js"></script>
<!-- controllers -->
<script type="text/javascript" src="js/controllers/Controller.Item.js"></script>
<!-- models -->
<script type="text/javascript" src="js/models/Model.Item.js"></script>
<script type="text/javascript" src="js/models/Model.Unit.js"></script>
<!-- stores -->
<script type="text/javascript" src="js/stores/Store.Items.js"></script>
<script type="text/javascript" src="js/stores/Store.Unit.js"></script>
<!-- templates -->
<script type="text/javascript" src="js/templates/Template.Item.js"></script>
<script type="text/javascript" src="js/templates/Template.ItemDetail.js"></script>
<!-- views -->
<script type="text/javascript" src="js/views/View.ItemDetail.js"></script>
<script type="text/javascript" src="js/views/View.ItemForm.js"></script>
<script type="text/javascript" src="js/views/View.ItemList.js"></script>
<script type="text/javascript" src="js/views/View.Viewport.js"></script>
</body>
</html>
body 부분에선 주로 js 파일을 불러오는 군요. 그래서 통일성을 주려고 sencha-touch-debug.js 도 body 안에서 불러온 것 같습니다.
괜찮은데요. 저도 센차터치로 프로그래밍을 할 때 이 프레임워크를 사용하게 될 것 같네요.
보시면 맨 처음에 앱이 시작할 때 참조하게 될 app.js를 지정해 줬습니다.
그리고 나서 MVC 패턴에 맞게 분리된 js 파일들을 불러오고 있습니다.
총 5개의 카테고리로 나눴네요. 맨 먼저 controllers 그리고 models, stores, templates, views 와 관련된 js 파일들을 불러옵니다.
폴더들은 이 카테고리에 맞게 js 폴더 밑에 따로 만들어진 것이 보이죠?
폴더 구조는 아래와 같습니다.
폴더 구조는 크게 css, img, js, scss 4가지 카테고리가 있습니다. sencha-touch 는 센차 터치에서 제공하는 파일들이구요. 이건 소스 분석 대상은 아니고 그냥 가져다가 사용하면 되는 센차터치 콘테이너죠. STEPS는 개발자가 이 소스코드를 설명하기 위해 강좌에 쓰인 각 개발 단계별 소스르 넣은 폴더 이구요.
제가 보고 싶은 부분은 js 폴더 였습니다.
MVC 모델을 이런식으로 사용하는 군요.
Model, View, Controller 가 기본적으로 있고 그 이외에 stores 폴더가 눈에 띕니다. local storage 기능을 사용할 거니까 이와 관련된 로직은 이 폴더 밑의 js로 따로 코딩을 했나 봅니다.
그리고 build,templates 가 있네요. 아직까지는 정확히 어떤 기능들을 따로 분리해 놓은 폴더인지는 모르겠지만 센차터치에서는 이렇게 js 파일들을 기능별로 나눠 관리하면서 MVC 모델을 사용하면 되는 것 같습니다.
이제 제가 이 소스코드를 통해서 얻고 싶은것의 80%는 다 공부 한 것 같습니다.
(참고로 scss는 css를 사용할 때 변수등을 사용해서 보다 간편하게 코딩할 수 있도록 도와주는 스크립트 언어입니다. 관심 있으신 분은 따로 찾아서 공부하셔도 좋을 거예요.)
index.html을 보았으니까 앱을 시작했을 때 가장 먼저 보게 될 app.js 파일을 보겠습니다.
이 app.js는 js 폴더 바로 밑에 있습니다. 같은 depth에 바로 models, views, controllers, stores ... 등등의 폴더가 있고 그 폴더 밑에 다른 js 파일들이 있게 됩니다.
Ext.regApplication('App', {
name : 'App',
useLoadMask : true,
phoneStartupScreen: './img/iStock_000004720241XSmall.jpg',
launch: function() {
this.viewport = new App.View.Viewport({
application: this
});
Ext.dispatch({
controller: 'Item',
action : 'showList'
});
}
});
음 이 app.js 파일을 보니까 이전에 본 구조이긴 하지만 Corona SDK 처럼 딱 한 눈에 해석이 되지 않네요.
센차 터치 튜토리얼을 좀 더 공부 해서 이 정도는 그냥 쉽게 해석이 되도록 해야 겠어요.
제 경험으로는 프로그래밍이든 뭐든 머리로 이해하려고 하는 것보다 계속 계속 반복해서 몸으로 이해하는게 더 좋은것 같더라구요.. ^^
찾아보니까 Ext.regApplication 는 1.1.0에서는 사용했지만 2.0.0 부터 없어진 메소드라고 하네요. 그래서 더 생소했나 봅니다. 2.0.0에서는 Ext.create 을 사용하면 될 겁니다. 그리고 그 다음에 Panel을 사용하죠. 지난 글에서 View를 할 때 아래 소스를 이용 했었습니다.
Ext.create('Ext.Panel', {
html: 'Welcome to my app',
fullscreen: true
});
그 다음에 launch: function()은 눈에 익네요. 튜토리얼 몇개 정리했더니 이 부분은 조금 감이 잡힙니다.
이 앱의 viewport를 설정하고 그 다음에 Ext.dispatch 가 있습니다. 이 부분도 2.0.0 부터는 없어진 메소드 입니다. 2.0.0 에서는 Ext.app.Application.dispatch 를 사용하시면 됩니다.
일단 애초 이 소스코드를 통해서 제가 배우고자 했던 것은 센차 터치로 MVC 모델 사용하는 것 과 실전에서 자주 사용되는 메소드를 익혀서 튜토리얼 공부할 때 좀 더 집중하고자 하는 거였는데요.
첫번째 목표는 달성했고.. 두번째는 이 소스코드가 1.1.0 을 기반으로 한 거라서 2.0.0 과는 많이 다르네요.
이 소스코드 분석은 이정도로 하고 계속 튜토리얼 공부를 하도록 하겠습니다.
어쨌든 센차터치로 앱 만들 때의 기본적인 프레임워크에 대해서는 충분히 새로운 것을 배운 것 같습니다.
튜토리얼 공부를 통해서 기본 지식을 좀 더 쌓고 여러 샘플 코드들을 분석해 보아야겠습니다.
그럼 다음 시간에 뵐께요.
'WEB_APP > Sencha_Touch' 카테고리의 다른 글
| Sencha Touch 2 Tutorial - Component & Container - (2) | 2012.04.16 |
|---|---|
| Sencha Touch 2 Tutorial - MVC - (0) | 2012.04.14 |
| Sencha Touch 2 Tutorial - History and Deep Link - (1) | 2012.04.13 |
| Sencha Touch 2 Tutorial - Device Profiles - 02 (0) | 2012.04.11 |
| Sencha Touch 2 Tutorial - Device Profiles - 01 (2) | 2012.04.10 |
| Makeing Shopping list app by Sencha Touch (2) | 2012.04.06 |
| Sencha Touch 2 Tutorial - View - 02 (2) | 2012.03.12 |
| Sencha Touch 2 Tutorial - View - 01 (2) | 2012.03.08 |
| Sencha Touch 2 Tutorial - Controllers - (2) | 2012.03.06 |
| Sencha Touch 2 Application에 대한 전반적인 이해 (0) | 2012.03.04 |