반응형
블로그 이미지
개발자로서 현장에서 일하면서 새로 접하는 기술들이나 알게된 정보 등을 정리하기 위한 블로그입니다. 운 좋게 미국에서 큰 회사들의 프로젝트에서 컬설턴트로 일하고 있어서 새로운 기술들을 접할 기회가 많이 있습니다. 미국의 IT 프로젝트에서 사용되는 툴들에 대해 많은 분들과 정보를 공유하고 싶습니다.
솔웅

최근에 받은 트랙백

글 보관함


지난번에 보았던 센차 터치 쇼핑몰 소스를 분석해 보겠습니다.

일단 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 과는 많이 다르네요.

이 소스코드 분석은 이정도로 하고 계속 튜토리얼 공부를 하도록 하겠습니다.

어쨌든 센차터치로 앱 만들 때의 기본적인 프레임워크에 대해서는 충분히 새로운 것을 배운 것 같습니다.

튜토리얼 공부를 통해서 기본 지식을 좀 더 쌓고 여러 샘플 코드들을 분석해 보아야겠습니다.

그럼 다음 시간에 뵐께요.

반응형

Comment