Ext JS 6 애플리케이션 생성 및 실행

• 선행지식 : Ext JS 6 애플리케이션 환경 만들기

게시판 예제 REST URI

• 게시판 조회 (GET) : http://localhost:8080/board/{게시판이름}

• 게시물 목록 조회 (GET) : http://localhost:8080/board/{게시판이름}/list

• 게시물 조회 (GET) : http://localhost:8080/board/{게시판이름}/{게시물아이디}

• 게시물 입력 (POST) : http://localhost:8080/board/{게시판이름}

• 게시물 수정 (PUT) : http://localhost:8080/board/{게시판이름}/{게시물아이디}

• 게시물 삭제 (DELETE) : http://localhost:8080/board/{게시판이름}/{게시물아이디}

삭제 후 목록 조회로 2번 게시물이 삭제 된 것을 확인

위 내용들 처럼 정상 작동 하는지 먼저 확인 하시고 다음 과정을 따라 오시면 됩니다.

Ext JS 6 애플리케이션 생성하기

• xharu(엑스하루)의 의미는 x(엑스) 지나간~, 또는 말그대로 x(변수) 좋은~, 행복한~ 등등 자신의 하루를 자유롭게 원하는데로 만들어보자는 취지에서 이름을 지었습니다. (쌩뚱맞죠? ^^;;)
• 폴더 구조 확인

• src/main/java : 자바 소스 루트 경로
• src/main/resources : 자원 루트 경로
• src/main/resources/static : 정적 자원 루트 경로 (html, image, css, js 등)
• src/main/webapp : 웹 루트 경로 (자원 직접 접근 불가능)

스프링 부트는 html, image, css 등에 대한 정적 자원을 webapp 폴더에 두지 말고 정적 자원 루트경로인 static 경로를 사용하도록 권장하고 있다. 따라서 우리가 생성하게 될 Ext JS 6 애플리케이션의 루트 경로도 static에 생성할 것이다.

터미널을 열고 static 경로에서 다음과 같이 명령을 실행한다.

sencha -sdk [SDK홈] generate app [APP이름] [App경로명]

sencha -sdk ~/bin/Sencha/SDK/ext-6.0.0 generate app App app

애플리케이션 생성 진행 중

생성 완료

생성 후 애플리케이션 디렉토리 구조

Ext JS 6 애플리케이션 실행하기

브라우저에서 화면을 보기 위해 먼저 아래 그림과 같이 우측 Maven Projects 뷰에서 xharu-extjs6 프로젝트 하위에 있는 Plugins > spring-boot > spring-boot:run 을 선택하고 상단의 녹색 화살표 버튼 클릭하여 서버를 시작한다.

메이븐 플러그인을 사용한 서버 구동

하단 콘솔에 Started XharuExtjs6Application… 라는 메시지가 보이면 아래 그림과 같이 브라우저에서 실행해 본다.

http://localhost:8080/app/index.html

기본으로 생성된 Ext JS 6 데스크탑 애플리케이션

기본으로 생성된 Ext JS 6 모바일 애플리케이션

하나의 애플리케이션 생성으로 데스크탑용과 모바일용을 동시에 제공한다.

각각 전용 애플리케이션을 생성 하려면 아래와 같이 명령을 사용하면 된다.

데스크탑 전용 : sencha -sdk [SDK홈] generate app -classic MyAppName ./MyAppPath
모바일 전용 : sencha -sdk [SDK홈] generate app -modern MyAppName ./MyAppPath