빌드환경 구축하기

한국센차유저그룹 번역팀

번역 : 정건우 [Gunwooj@me.com]

교정 : 윤가희 [a5312559@facebook.com]

원문 : http://docs.sencha.com/touch/2-0/#!/guide/building

센차터치2와 함께 클래스를 필요로 할 때 동적으로 로드하는 능력을 갖춘 새로운 종류의 클래스 시스템이 제공된다. 이는 개발과 생산성 모두에 많은 장점이 있다.

개발 시에는, 동적 로딩은 파일 간 스택 추적을 얻을 수 있음을 의미하며, 훨씬 쉽게 응용 프로그램 문제를 디버깅할 수 있다. 제작을 위해선, custom 빌드를 앱이 실질적으로 사용하는 클래스를 포함하여 축소하고 빌드를 가능한 쉽게 만드는 도구를 제공하며, 주로 사용자를 위한 로딩 시간 감소를 목적으로 한다.

빌드선택

센차터치2는 5가지 빌드와 함께 포장된다. 기기를 켜거나 최대한 빠르게 실행하려는 순간일 경우 sencha-touch.js를 사용하고 제작시엔 local에서 앱을 개발 할때면 sencha-touch-debug.js로 전환하여 사용하는 것이 좋다. 제작 시에 디버깅 하기 좋은 다른 세가지 빌드는, custom 빌드 없이도 제작하여 실행 된다, 그리고 1.x 에서 2.x로 이전한다. 각 빌드는 다른 목적을 위해 있는 것이기 때문에 아래에 간단한 테이블을 작성해 옵션을 빌드의 각기 다른 세트 하나하나로 구성하는 방법을 사용하여 만드는 것이 좋다는 것을 보여 준다:

Name

종류

로더

축소됨

주석

디버그

Compat

사용법

sencha-touch-debug.js

Core

local 앱 개발 시 사용

sencha-touch.js

Core

Custom 빌드와 함께 제작에 사용

builds/sencha-touch-all.js

All

Custom 빌드가 없다면 제작에 사용

builds/sencha-touch-all-debug.js

All

임시로 / 제작하는 앱을 디버깅 하는 데 사용

builds/sencha-touch-all-compat.js

All

1.x 앱에서 2.x로 이전하기 위해 사용

마지막 3가지 빌드는 SDK 다운로드 안의 ‘빌드’ 디렉토리 내에 포함되어 있는지 참고 한다. 다만 위의 테이블로 이해가 되지 않을 경우, 아래에서 좀더 자세히 각각의 옵션의 의미를 알 수 있다:

  1. 종류: “Core”또는 “All” 중 하나 이다 – Core는 기본 클래스는 포함되었으나 컴포넌트가 없으며, All는 모든 것을 포함하였다는 의미
  2. 로더: 동적로딩이 활성화 되었는 지에 대한 여부이다. sencha-touch.js 만이 기본적으로 활성화
  3. 축소됨: YUI 압축기로 빌드가 압축되었음을 의미
  4. 주석: 빌드가 아직 JSDoc 주석이 아직 포함되었음을 의미 (보통 다운로드 속도를 높이기 위해 제작시 제외)
  5. 디버그: 빌드가 잘못 구성된 클래스가 있을 경우를 말하는 등의 디버그 메시지가 제공 된다는 것을 의미
  6. Compat: 센차터치1.x 과 함께 하위 호환성을 제공하는 코드가 빌드에 존재 함을 의미

다시, 제작 중에 sencha-touch.js 또는 sencha-touch-all.js 중 하나를 개발자 모드 시에 sencha-touch-debug.js 로 전환하여 사용한다.

하나의 빌드로 만들기

대부분의 경우 센차터치2 앱은 제작에 custom 빌드를 사용하고 있을 것이며, 2가지 이유 때문이다:

  1. custom 빌드는 앱을 실제로 사용하는 경우에만 프레임 워크 클래스가 포함, 다운로드 시간을 절약.
  2. custom 빌드는 하나의 파일에서 응용 프로그램의 클래스를 모두 포함, 이것은 하나의 네트워크만 요청함을 의미.

2의 이유는 중요하다. 대부분의 애플리케이션은 많은 수의 파일을(때로는 수백의) 가져야 하고, 하나 씩 로드하며, 특히 3g 네트워크를 통해서, 시간이 오래 걸릴 수 있다. 네트워크 조건에 따라, 각 요청이 수백 밀리 초를 추가로 지연 시킬 수 있기 때문에, 응용 프로그램의 전체적인 로드 시간을 몇 초 정도 쉽게 추가할 수 있다.

제작 중 응용프로그램의 신속한 로드를 보장하기 위해 Sencha SDK Tools를 만들었다, 다음 빌드 스크립트를 모두 자동으로 포함한다:

  1. 프레임 워크 클래스에서 애플리케이션이 자동으로 사용됨을 계산하기
  2. 애플리케이션이 깨어날 때 애플리케이션 클래스에서 로드되는 것을 계산하기
  3. 이들을 하나의 파일에, 모두 바른 순서대로 클래스와 함께 결합하기
  4. JSDoc의 코멘트를 모두 제거, 파일이 가능한 작아지게 축소

SDK 도구설치하기

센차 SDK 도구가 설치되지 않은 경우, 빌드를 생성하기 전에 설치 되어 있어야 한다. 도구가 이미 설치되어 있는지 확인하는 빠른 방법은 커맨드 라인 터미널을 열고 ‘sencha’ 를 입력한다 – SDK 도구가 존재한다면 이렇게 나타난다:

SDK 도구가 설치된 경우 커맨드 라인에서 ‘sencha’가 실행 중 임을 출력

오류가 있다면 대게는 SDK 도구가 설치되어 있지 않은 것이다. 그냥 http://www.sencha.com/products/sdk-tools에서 다운로드 버튼을 누르고 다운로드한 파일을 더블 클릭하면 다시 센차 설치 명령을 시도하면 모두 작동할 것이다.

빌드 생성하기

** 참조: ** 빌드 단계 다음 릴리즈 (2.0.0 베타 2)에서 단순하게 예정된 것도 릴리즈를 사용할 수 있는지 다시 한 번 페이지를 확인하길 바란다. 이미 local로 작동하는 앱을 가지고 있으며 제작하는 순간을 위해 빌드 하길 원한다고 가정한다. 이에 대해 무엇인지 모르거나 아직 앱이 없다면, 시작 가이드를 확인한다.

앱이 local인 것처럼 가정하여, 진행한다. 어떻게 작동하는지 설명으로 센차터치 SDK와 함께 제공되는 트위터 예제를 사용 할 것이다. 첫 번째로 index.html 페이지 파일을 작성하며 익숙해 지자 :

<!DOCTYPE html>

<html>
<head>
<metahttp-equiv=“Content-Type”content=“text/html; charset=utf-8″>
<title>Twitter</title>

<linkrel=“stylesheet”href=“resources/css/application.css”type=“text/css”>

<scripttype=“text/javascript”src=“touch/sencha-touch-debug.js”></script>
<scripttype=“text/javascript”src=“app.js”></script>
</head>
<body></body>
</html>

sencha – 터치 debug.js 및 app.js을 로드 하고 있는지 주의 – 이 조합은 앱을 개발하면서 동적 로드를 사용할 수 있게 해 주는 것이며, 그리고 최소한의 빌드를 생성하기 위한 SDK 도구 능력의 기초이다. 곧 이러한 HTML 파일의 내용으로 돌아올 것이다.

커맨드 라인으로 돌아가서 – cd의 디텍토리로 하드 드라이브에 앱을 먼저 찾아야 한다:

cd ~/path/to/my/app

다음은 앱을 위한 jsb 파일을 생성해야 한다. jsb 파일은 기본적으로 앱에서 사용하는 모든 클래스의 목록이다. 다행히, SDK 도구로 다음을 수행한다:

sencha create jsb -a index.html -p app.jsb3

이 명령은 index.html 파일 (앱을 개발하면서 브라우저에서 사용하는 동일한 파일)을 가져가고, 호출된 app.jsb3 파일을 작성하고 All 그 클래스 종속으로 이해 한다:

sencha build -p app.jsb3 -d ./

최종 명령은 jsb에 나열된 모든 파일을 소요하고 나서 최대한 작게 만들기 위해 축소된 하나의 파일에 결합 한다. 프레임 워크 클래스 외에 응용 프로그램 클래스를 모두 포함하는 classes.js라는 파일을 출력한다.

HTML 파일을 업데이트하기

마지막 단계는 앱 제작에 대한 sencha-touch-debug.js의 sencha-touch.js를 대신 사용하고 모든 classes.js를 새로 생성하여 로드하는 HTML 파일의 업데이트를 준비하는 것이다. 트위터 예제 파일을 마무리 하는 방법은 다음과 같다:

<!DOCTYPE html>
<html>
<head>
<metahttp-equiv=“Content-Type”content=“text/html; charset=utf-8″>
<title>Twitter</title>

<linkrel=“stylesheet”href=“resources/css/application.css”type=“text/css”>

<scripttype=“text/javascript”src=“touch/sencha-touch.js”></script>
<scripttype=“text/javascript”src=“all-classes.js”></script>
<scripttype=“text/javascript”src=“app.js”></script>
</head>
<body></body>
</html>

메인 index.html 페이지 파일을 내내 변경 하기보다, 위의 파일과 비슷한 index-production.html이 호출되는 사본을 만드는 것이 일반적이다. 많은 개발자들은 자동적으로 그렇게 빌드를 간단하게 올릴 수 있는 index.html에 배포하는 폴더와 이름을 바꾼다. index-production.html로 응용 프로그램을 복사하는 간단한 배치 스크립트를 작성할 것이다.

개발자에게 다가올 변화

이제 몇 단계만 하였지만, 워크플로우와 센차터치의 다음 릴리스를 위한 빌더의 출력을 모두 개선할 것이다. 센차터치2.0 베타 1을 사용하여 구축하는 경우에는 그 가능성이 있는 단계이며, 출력이 변경 되는대로 나중에 릴리스를 업그레이드하면 다시 확인해 보길 바란다.