본문 바로가기

프로그래밍/Ext JS

Ext JS6 Hello App 만들기

1. 프로젝트 유형

  - 단독 프로젝트 : 단독으로 서비스 및 빌드에 필요한 모든 라이브러리를 포함하고 있는 프로젝트

  - 공동 프로젝트 : 여러 프로젝트가 라이브러리를 공유하는 프로젝트


2. 단독프로젝트 생성

  - 프로젝트 생성(HelloApp)

    CMD창에서 작업경로(WorkSpace)로 지정된 경로로 이동 후에 다음과 같이 입력

    > C:\WorkExtJS\sencha -sdk c:\ExtJS6 generate app HelloApp .\HelloApp

   * C:\WorlExtJS 워크스페이스 경로에 HelloApp프로젝트를 HelloApp 폴더에 생성한다

   * 프로젝트를 생성하는데 적지 않은 시간이 걸린다.


  - 프로젝트 폴더 설명(HelloApp)

    .sancha : 프로젝트 기본적인 설정관련정보 - 개발자가 거의 건들지 않음

    app     : MVVM아키텍처 구조의 소스 파일로 개발자가 만든 소스를 저장 하는 곳

    classic : 데스크탑 전용 어플리케이션 소스와 디자인 경로

    modern : 모바일 전용 어플리케이션 소스와 디자인 경로

    build    : 개발 및 테스트 모드로 빌드되는 전체 파일 , 프로덕션 모드로 빌드되는 모든 파일

              > 빌드 후 이 폴더를 서비스/테스트 서버에올려서 사용

    ext      : ExtJS 라이브러리 폴더

    overrides : 기존의 위젯을 확장하여 만든 소스 경로

    packages : 패키지를 만들 때 사용할 폴더

    resources : 각종 리소스를 저장하는 폴더로 이미지, css속성, 데이터, 프로젝트에 필요한 자원들 관리

    sass   :  css 디자인을 관리하기 위한 sass 파일 관리


3. 웹브라우저 사용(제티, Jetty)

  - 일반적인 웹브라우저 IIS나 Apach를 사용할 수 있으나 ExtJS에 포함된 제티(Jetty)웹서버 이용

  - 제티(Jetty) 웹서버 실행

   > 실행하는 경로를 제티 웹서버의 루트 경로로 인식하니 유의 하여야 함

   > 실행 : >sencha web start

     제티의 기본(Default) 포트(Port) 는 1841

     포트를 변경시키고 싶다면 다음과 같이

     > sencha web -port 80

   > 종료 : CTRL-C, 또는 sencha web stop



4. 프로젝트 빌드

  - 빌드 모드

   . 개발모드 : sencha app build development

   . 테스트모드 : sencha app build testing

   . 운영모드 : sencha app build production

  - build 폴더 하위에 development/HelloApp, testing/HelloApp, production/HelloApp 폴더로 빌드 결과가 저장됨.




'프로그래밍 > Ext JS' 카테고리의 다른 글

Ext JS 테마변경하기  (0) 2016.02.11
Ext JS6 설치 및 환경설정  (0) 2016.02.04