ExtJS6 실전응용편 두번째 강좌 2부 - Spring boot로 개발 환경 구성 및 API 연동 테스트(development environment and API test 2-2)
ExtJS 6 동영상강좌
2017. 4. 12. 09:30
ExtJS 6 강좌 영상은 링크를 통해 제공됩니다.
(YOUTUBE 채널 구독해주세요!!)
지난 시간에 간단하게 Spring Boot 기본설정을 통하여 JSON API 생성하는 부분까지 진행했었습니다.
이번시간은 우리가 실전응용편 첫번째 강좌에서 진행 했던대로 Sencha CMD를 통해서
webapp 디렉토리내에 ExtJS 프로젝트를 생성하도록 하겠습니다.
src → main → webapp 디렉토리 신규 생성
초기 생성 시, 패키징을 war가 아닌 jar로 진행해서 webapp 디렉토리가 존재하지 않습니다.
webapp이라고 생성을 해주도록 합니다.
※ war로 프로젝트 진행 시, Dynamic Web Project 와 동일한 Build Workspace 문제가 발생되므로 패키징을 jar로 진행합니다.
src → main → webapp 우클릭 → properties for webapp 선택
위와같이 동작 후 Location 경로를 보면 현재 webapp 의 디렉토리 경로가 나타납니다.
CMD를 webapp의 경로로 이동 후, ExtJS 를 GENERATE 해줍니다.
※ classic 만 생성해주도록 합니다.
빌드가 완료되었다면, 이클립스 webapp의 디렉토리를 새로고침 해주면,
Sencha CMD를 통하여 생성 된 프로젝트 리스트가 출력될 것입니다.
8080 포트를 이용하여 정상적으로 ExtJS 샘플컴포넌트가 출력되는지 확인!
위와같이 실행결과가 나왔다면,
우리들만의 새로운 컴포넌트를 만들기 위하여 기존 파일 중,
Main.js를 제외한 나머지를 모두 제거해 주도록 하겠습니다.
그런다음, Main.js 에 아래와 같이 코드를 작성해줍니다.
위의 코드는 버튼 클릭 시, 우리가 TestController 클래스에 정의한
/testAPI api url을 호출한 후, JSON 응답값을 받아오는 코드입니다.
위와같이 클릭이벤트 후, 우리가 만들 API 응답값을 받는다면, 기본적인 환경구성이 완료 된 것입니다.
컴포넌트 제작시, 스타일이 깨지는 현상이 발생 할 수 있으니, webapp 디렉토리 내에
sencha app watch를 실행시켜놓고 개발을 진행해주세요
'ExtJS 6 동영상강좌' 관련 글
more
