얼마 전에 무료화 된 Sencha Touch의 완전 초보자용 튜토리얼. 제대로 공부해보고 싶은데 자료가 별로 없다.
번역하고 나니까 넘 별거 없어서 괜히 했나 싶은..^^;;;; 번역 하다가 둔것도 많은데 하필 이걸 ㅠㅠ
뭐 이제 시작인데 시리즈로 해볼까나?
원문은 http://www.sencha.com/learn/Tutorials#Sencha_Touch_Tutorials
Sencha Touch의 세계로 오신 것을 환영합니다!
이 글에서 우리는 첫 어플리케이션을 만들기위한 가장 기본적인 것들을 살펴볼 것입니다. 오랜 전통을 가진 "Hello World"를 찍어보는 것으로 말이죠.
Sencha Touch 다운 받기
아직 다운 받지 않았다면 Sencha Touch SDK를 받으세요. 이 배포버전에는 방대한 문서와 예제 어플리케이션, 빌드 리소스, 그리고 무엇보다 중요한 Sencha Touch 어플리케이션을 실행하는데 필요한 자바 스크립트 라이브러리와 CSS 스타일 시트가 포함되어 있습니다.
SDK는 좀 방대해 보이지만, 실제로 Sencha Touch 어플리케이션을 만드는데 필요한 것은 프레임워크의 자바스크립트 라이브러리와 CSS 스타일 시트 단 두개의 파일 뿐입니다. 기본으로는 각각 sencha-touch.js와sencha-touch.css라고 되어있는데 SDK에서 쉽게 찾을 수 있을 겁니다.
어플리케이션 구조
이 튜토리얼을 위해 hello-world라는 폴더를 만들고 index.html라는 빈 문서를 그 안에 만들어 둡시다. Sencha Touch SDK를 lib/touch라는 서브 디렉토리로 카피(또는 심볼릭 링크) 하세요. 그러고 나면 파일 구조는 다음과 같이 될 것 입니다:
실제로 어플리케이션을 올릴때가 되면, 아마도 필요한 리소스 파일만을 골라서 올리고 싶어지겠지만 일단 지금은 이게 가장 쉬운 방법입니다. (우리가 수정하게 될) index.html 파일과 JS, CSS 파일를 아래 이미지에 하이라이트 했습니다.
HTML 파일
Sencha Touch 어플리케이션은 자바 스크립트와 CSS 리소스가 참조되어 있는 HTML5 문서에서부터 시작합니다. 이 HTML 파일에는 앞서 언급한 두개의 코어 파일 뿐 아니라 또 당신이 개발할 어플리케이션 코드도 포함하고 있습니다. index.html 파일을 열어서 다음과 같이 추가합시다:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Hello World</title>
<script src="lib/touch/sencha-touch.js" type="text/javascript"></script>
<link href="lib/touch/resources/css/sencha-touch.css" rel="stylesheet" type="text/css" />
</head>
<body></body>
</html>
한줄 한줄 살펴 볼까요?
<!DOCTYPE html>
<html>
...
</html>
이것은 HTML5를 위한 문서 타입 입니다. 단순하고 직관적이며, 브라우저가 문서에 어떤 타입의 마크업이 되어있는지 알 수 있게 합니다. <html>과 </html> 태그는 문서의 시작과 끝을 나타냅니다.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Hello World</title>
...
</head>
<body></body>
HTML5 문서는 반드시 <head>와 <body>를 포함해야 합니다.
이 예제에서, <body>는 비어있습니다.(즉, 사이에 아무것도 없이 태그를 열고 닫았죠) 이것은 자바스크립트 어플리케이션이 컨텐츠와 모든 유저 인터페이스를 전부 프로그램으로 만들 것이기 때문입니다.
그렇지만 <head>에는 문서의 컨텐츠 타입이나 캐릭터셋, 브라우저에서 윈도우 상단에 표시할 타이틀 등을 포함한 문서의 메타데이터를 포함해야 합니다.
<head>에는 또한 우리가 필요로 할 자바스크립트와 스타일시트 리소스의 링크도 포함하고 있습니다:
<script src="lib/touch/sencha-touch.js" type="text/javascript"></script>
이 <script> 엘리먼트 자체는 비어있지만, lib 서브 디렉토리 아래 위치한 sencha-touch.js 라이브러리의 상대 경로를 제공하는 src 속성을 사용하고 있습니다. 만약 다른 경로에 스크립트를 두었다면 그에 맞게 이 경로를 수정해 주어야 합니다.
<link href="lib/touch/resources/css/sencha-touch.css" rel="stylesheet" type="text/css" />
이 <link> 태그는 어플리케이션을 아름답게 보이도록 만드는 스타일시트 파일의 위치를 가리키고 있습니다. 마찬가지로, 당신이 다른 위치에 스타일시트를 저장했다면, 이 부분을 수정해야 합니다. 이 리소스와 문서와의 관계를 설명하기 위해 rel 속성도 필요 합니다. 여기서는 이 문서의 스타일시트라는 것을 가리키고 있습니다. type속성은 권고지만 브라우저에게 이 스타일시트가 어떤 타입인지에 대한 힌트를 줍니다. 이 경우에는 CSS이겠죠.
축하합니다! 우리는 이제 가장 최소의, 그리고 완전이 비어있는 Sencha Touch 어플리케이션을 만든겁니다. 이걸 브라우저에서 연다고 해도, 빈 화면이 뜰 뿐 별 건 없을 겁니다. 그렇지만 크롬이나 사파리 같은 브라우저에서 DOM inspector로(파이어폭스에는 파이어버그 확장으로..) 이 문서를 열어보면 아마 재미있는 것을 눈치챌 수 있을 것입니다:
우리가 비어두었던 <body> 엘리먼트에 흥미로운 id와 class 속성이 붙어 있습니다. 이게 무엇을 뜻하는지 염려할 필요는 없지만 이것이 Sencha Touch 라이브러리가 실행되었다는 증거이며 이 문서는 이제 유저 인터페이스를 얹을 준비가 되었다는 것을 뜻합니다.
그럼 시작해 봅시다.
어플리케이션 코드
일반적으로는, 어플리케이션의 자바스크립트를 별개의 파일(또는 파일들)로 만들고 아까 위에서 Sencha Touch 라이브러리를 위해 한 것과 동일하게 링크를 하게 될 것입니다. 하지만 (이것처럼) 아주 심플한 어플리케이션은 <head> 안에 <script> 태그로 HTML 파일 자체에 어플리케이션의 자바스크립트 코드를 임베드 하는 것도 가능합니다:
<script type="text/javascript">
new Ext.Application({
launch: function() {
new Ext.Panel({
fullscreen: true,
html: 'Hello World!'
});
}
});
</script>
물론 이 <script> 엘리먼트는 패치할 외부 문서가 없으므로 src 속성을 가지지 않습니다. 스크립트는 태그 안에 위치하게 됩니다. 그럼 한 줄씩 살펴 봅시다:
new Ext.Application({
...
});
이것은 어플리케이션, 즉 Ext.Application 클래스의 인스턴스를 생성하는 것입니다. 이 생성자에 넘길 아규먼트는 북마크에 사용될 아이콘 같이 다양한 설정을 포함한 오브젝트 입니다.
우리가 넘겨줘야 할 가장 중요한 설정 중의 하나는 문서가 로딩이 끝났을 때 어플리케이션이 무엇을 해야 하는가 입니다. 이것이 펑션이 될 'launch' 프로퍼티 입니다:
launch: function() {
...
}
이 펑션 안에 어플리케이션의 유저 인터페이스를 정의하고 실행하기 위해 필요한 모든 코드를 둘 것입니다.
new Ext.Panel({
...
});
이 어플리케이션에서 우리가 해야할 딱 한가지 일이 바로 'panel' 인스턴스를 만드는 건데요, 이것은 여러가지 것들(다른 패널들도)을 얹어놀수 있게 하는 유저 인터페이스의 컴포넌트 입니다. 여기서의 패널은 아주 심플하기 때문에 설정 옵션들은 최소한으로 하고 건너 뜁니다:
fullscreen: true, html: 'Hello World!',
이것들은 딱 보면 뭔지 알겠죠? 첫번째 것은 패널이 시작할때 자동으로 단말의 전체 스크린을 커버할 수 있도록 늘어나 보여야 한다는 것을 의미합니다. 두번째 것은 그 안에 들어가게 될 HTML입니다.
그리고, 음... 이게 답니다. 이 짧은 스크립트를 문서에 추가하고 저장합시다. 그러면 전체 index.html 은 다음과 같을 것입니다:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Hello World</title>
<script src="lib/touch/sencha-touch.js" type="text/javascript"></script>
<link href="lib/touch/resources/css/sencha-touch.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
new Ext.Application({
launch: function() {
new Ext.Panel({
fullscreen: true,
html: 'Hello World!'
});
}
});
</script>
</head>
<body></body>
</html>
결과 보기
HTML 파일을 크롬이나 사파리 같이 호환되는 데스크탑 브라우저로 열어봅시다.문제가 없다면 다음과 같이 보일 것입니다:
더 나아가, 파일들을 웹서버에 올려봅시다. (가급적이면 개발 서버나 비슷한데 올려보세요) 올리고 나면 이제 모바일 단말 시뮬레이터에서 돌려볼 수 있습니다:
(위 에뮬레이터는 각각 Xcode iOS와 Android SDK의 일부 입니다. 둘 다 다운받아볼 만 합니다. 그치만 이 에뮬레이터들은 호스트 서버의 파일 시스템에서 직접 여는 것은 안되니까 파일들을 웹 서버에 올려야 합니다.)
iOS SDK에는 iPad 시뮬레이터도 들어있는데, 물론 여기서도 어플리케이션이 완벽하게 동작합니다:
당신의 첫 어플리케이션이 실제 모바일 단말이나 타블렛에서 어떻게 돌아가는지 보기 위해서는 웹서버에 접근할 수 있도록 단말의 네트워크를 설정해야 할 것입니다. 가장 쉬운 방법은 에뮬레이터가 돌아가는 서버와 같은 로컬 네트워크에 Wi-Fi로 연결해서 보는 것입니다.
셀룰러 네트워크를 통해서 사이트가 어떻게 보이는지 확인하고 싶으면 (단말에 퍼블릭하게 보이는) 외부 서버에 어플리케이션을 올려보거나 터널 또는 VPN 같은 방법으로 방화벽 너머의 서버에 접근하게 할수 있도록 설정해야 합니다. (솔직히, WiFi가 쉽죠.)
자. 여기까지 입니다. 전통적인 Hello World를 통한 Sencha Touch의 아주 친절한 설명이었죠? 하지만 이것은, 당연하지만, 단지 시작에 불과합니다....
'공부방 > Sencha touch' 카테고리의 다른 글
| [Sencha Touch] Sencha Touch 개발환경 세팅하기 (0) | 2012.02.13 |
|---|---|
| Sencha Touch API Documentation (0) | 2012.02.13 |
| Sencha Touch 기술 현황과 전망 (0) | 2012.02.13 |
| senChaTouch GeoTweets (0) | 2012.02.13 |
| SenchaTouch Data 처리 (0) | 2012.02.13 |