Ext JS 6 애플리케이션 폴더 구조와 설정 & 제티 실행

애플리케이션 폴더 구조

  • resources/static/app : Ext JS 6 앱 루트 경로
  • 앱루트/app : 글로벌 클래스 패스
  • 앱루트/classic : 데스크탑 애플리케이션의 루트 경로
  • 앱루트/modern : 모바일 애플리케이션의 루트 경로

Ext JS 6는 초기에 애플리케이션 실행 시 앱루트/index.html 파일이 실행 되는데 데스크탑 툴킷을 적용할 것인지 모바일 툴킷을 적용할 것인지 디텍팅을 하고 프로파일을 지정한다.

앱루트/index.html

따라서, Ext.manifest에 ‘classic’이 지정되면 “앱루트/app”와 “앱루트/classic” 경로에 있는 자원들을 활용하여 데스크탑 애플리케이션으로 실행되고, ‘modern’이 지정되면 “앱루트/app”와 “앱루트/modern” 경로에 있는 자원들을 활용하여 모바일용 애플리케이션으로 실행된다.

애플리케이션 설정 app.json

앱루트/app.json

“앱루트/app.json” 파일은 애플리케이션을 설정하는 파일이다. 파일을 열면 여러가지 설정들이 기본적으로 되어 있는데 핵심적인 몇 가지만 살펴보도록 하자. 더 자세한 설정에 대해서는 http://blog.naver.com/oopchoi/220629710128 링크를 참고하기 바란다.

가장 먼저 확인해야 하는 설정은 “name” 속성이다. 이 속성에 지정된 문자열은 네임스페이스(클래스 패스로 부터 특정 클래스를 찾아가기 위한 이름) 역할을 한다. sencha generate app 명령으로 애플리케이션을 생성할 때 지정한 애플리케이션 이름으로 자동 할당 된다.

다음으로 살펴볼 속성은 “classpath”이다. 이 속성에 지정된 경로에 접근하기 위해 네임스페이스를 사용한다. 기본으로 “app”과 “${toolkit.name}/src” 값이 지정되어 있는데 “app”은 앱루트에 있는 app 디렉토리다. “${toolkit.name}/src”는 디텍팅 결과가 데스크탑이면 앱루트에 있는 “classic/src”가 클래스 패스로 사용되고 모바일이면 앱루트에 있는 “modern/src”가 클래스 패스로 사용된다.

특정 클래스를 접근하는 방식은 네임스페이스를 사용하여 클래스 패스를 먼저 접근하고 하위 해당 클래스가 있는 디렉토리까지 각 단계마다 점(.)을 사용하여 접근하면 된다. 예를들어, 데스크탑용 애플리케이션일 경우 앱루트에 있는 classic/src/view/main/Main.js 클래스를 접근하려면 네임스페이스 “App”으로 클래스패스 “classic/src”를 접근하고 그 하위 디렉토리 접근을 “App.view.main.Mian” 과 같이 점으로 연결하여 문자열을 만들면 된다. 이 접근 방법은 클래스를 정의할 때도 동일하게 적용된다. Main.js 파일을 열어보면 Ext.define(‘App.view.main.Main’, {…}); 와 같이 정의되어 있다.

classic/src/view/main/Main.js

만약 앱루트 경로 아래에 classic/src/view/main/Main.js 클래스가 있는데 동일한 이름의 파일이 app/view/main/Main.js 과 같이 동시에 존재한다면 빌드 할 때 아래와 같이 BUILD FAILED 에러가 발생한다. 이유는 ‘classic/src’와 ‘app’ 은 둘 모두 클래스패스로 지정되어 있어서 충돌이 나기 때문이다.

나중에 살펴보겠지만 사스(.scss)파일이나 app.json 파일같은 설정 파일을 변경 했을 때 빌드를 하게 된다. 사스는 다음에 사스 컴파일러를 다룰 때 설명하겠다. 또한, 클래스 파일을 수정하고 구문에 오류가 있는지 클래스가 충돌나지는 않는지 애플리케이션 빌드를 통해 확인 할 수 있다. 빌드를 하려면 앱루트 경로에 터미널로 접속해서 sencha app build 명령을 실행하면 된다.

Main.js 충돌 에러 발생

에러 메세지를 아무리 뜯어봐도 classic/src/view/main/Main.js와 app/view/main/Main.js가 충돌났다는 내용은 볼 수 없다. 알 수 없는 에러 메세지 때문에 고생하지 말고 비슷한 에러 메세지를 보게 되면 클래스 충돌을 의심해 보기 바란다.

다음은 “js” 속성을 살펴보자. 이 속성은 배열 형태로 필요한 만큼 설정을 추가 할 수 있다. 기본으로 하나의 객체가 들어있고 객체의 “path” 속성에 “app.js” 문자열이 지정되어 있다. 이 것은 애플리케이션을 생성 할 때 앱루트 경로에 자동으로 생성된 app.js 파일을 가르킨다. 애플리케이션이 시작 될 때 마이크로로더(bootstrap.js)가 실행되면서 이 파일을 실행하고 app.js는 다시 내부에서 애플리케이션을 로딩하기 위해 app/Application.js 클래스 파일을 실행하게 된다.

app.json에 “js” 속성 설정
app.js 파일 내용

app.js는 Ext.application() 메소드를 호출하여 애플리케이션을 로드한다. 인자는 문자열이나 객체를 전달 할 수 있는데, 문자열로 특정 애플리케이션 파일을 로드하도록 할 수 있고, 설정 객체로 전달하면 객체 내에 지정된 키/값 들로 애플리케이션을 초기화하여 로드한다. 위 그림의 app.js 파일 내용을 보면 애플리케이션(‘App.Application’)을 실행하는 데 메인 뷰 클래스를 ‘App.view.main.Main’으로 지정하여 로드한다. 이 메인 뷰 클래스가 초기 화면에 보여질 View(보여지는 화면:레이아웃과 렌더링)를 담당한다.

app/Application.js 내용

App.Application 클래스 파일는 launch() 메소드를 가지고 있는데 애플리케이션이 실행되면 초기에 호출되는 메소드이다. 애플리케이션 실행 시 초기화 작업이 필요할 경우 이 메소드 바디를 구현하도록 한다.

제티 서버에서 애플리케이션 실행

이 전에는 톰캣을 실행하고 http://localhost:8080/app/index.html을 실행 했었는데 이 번에는 제티(https://eclipse.org/jetty/) 서버를 실행하고 화면에 접속해보고자 한다.

app.json 설정에 보면 “indexHtmlPath” 속성에 “index.html” 문자열이 지정되어 있는데 이 것은 앱루트에 있는 index.html 파일의 상대경로다. sencha app watch 명령을 실행하여 제티를 구동 시키고 http://localhost:1841/로 접속하면 실행되는 파일이다.

참고) 제티를 시작하고 종료하는 명령은 sencha app start와 sencha app stop인데, sencha app watch를 사용하면 실시간 빌드 기능을 사용할 수 있고 제티 서버도 구동해 주기 때문에 편리하다.

지금까지 잘 따라 왔다면, 톰캣으로 index.html을 접속할 때 url은 http://localhost:8080/app/index.html이 되고 제티로 접속할 때 url은 http://localhost:1841/index.html이 된다. 만약 제티로 접속 시 톰캣처럼 동일한 http://localhost:1841/app/index.html 주소를 사용하고 싶다면 sencha app start 명령을 resources/static/ 경로에서 실행하면 된다.

sencha app watch 실행중
애플리케이션이 http://localhost:1841 접속 가능 상태
http://localhost:1841/ 접속 화면

다음은 클래스 구문과 객체지향 프로그래밍 기법들을 살펴보도록 하겠다.