ExtJS6 실전응용편 첫번째 강좌 - 빌드 후 샘플소스 WAS에 배포하기(Build and Deploy sample component to WAS)
ExtJS 6 강좌 영상은 링크를 통해 제공됩니다.
(YOUTUBE 채널 구독해주세요!!)
안녕하세요 개발로짜입니다 ^^
기초편에서 우리가 ExtJS의 문법과 컴포넌트 이해를 배웠다면,
이번강좌에서는 간단한 웹프로그램을 만들어보면서 서버와 API 통신까지 해보는 시간을 가져보려고 합니다.
우선 기초편에서는 Generate 할때, classic(ExtJS) / modern(Sencha Touch) 구조로 생성하였는데,
실전/응용편에서는 ExtJS 만을 다루기 위하여 classic 버전만으로 진행을 하기 위해 새로운 ExtJS 프로젝트를 Generate 해주도록 하겠습니다.
ExtJS 를 Generate 하기 위한 임의의 디렉토리 생성
예) D:\study라는 디렉토리 생성 후, CMD 창을 열어서 Generate를 진행해보겠습니다.
sencha -sdk "SDK경로" generate app "프로젝트명" "생성경로" -classic
위와같이 커맨드창으로 빠져나왔다면, 정상적으로 생성이 된것입니다.
한번 방금 만든 디렉토리에 생성된 ExtJS 목록들을 보도록 하겠습니다.
그렇다면, 프로덕션 모드로 배포를 해보도록 하겠습니다.
배포를 해야하는 이유는?
기본적으로 Generate 하여 생성된 ExtJS 기본 파일들은 아래와 같이 엄청난 리소스를 잡아먹습니다.
생성만 했을 뿐인대, 무려 140MB 가량의 용량을 차지하게 됩니다.
그렇다면, 빌드를 한 후, 용량이 얼마나 최적화(?) 되는지 보도록 해보겠습니다.
빌드 명령어는 index.html 파일이 존재하는 경로에 CMD를 실행하여 아래와 같은 명령어를 주도록 합니다.
아래 명령어 외에도 다양한 버전의 배포명령이 있지만 우선 배포가 목적이므로 아래 명령어만 다루도록 하겠습니다.
sencha app build production
위 명령어 실행을 완료 하였다면 build 디렉토리에 production 이라는 디렉토리가 생성되었고, 또 그 안에 우리가 Generate 하였을 때, 명시해준 프로젝트 명으로 디렉토리가 생성되었습니다.
프로젝트명까지 들어가면 아래와 같은 파일목록들이 생성되어있을 겁니다.
그럼 최종용량은 ?
5~6메가 밖에 되지 않습니다.
물론, 기본 컴포넌트에 대한 용량을 명시한것일뿐, 개발을 하면 점차 용량은 늘어나기 마련이긴 하나, 결과적으론 개발할때의 용량보다는 비교도 안되게 확연히 줄어든다는 겁니다.
그렇다면 production 모드로 빌드 한 파일들을 한번, 톰캣에 적용해보도록 할까요?
저희는 이클립스로 강의를 하기 때문에 이클립스에서 간단하게 Dynamic Web Project 를 생성 하여 WebContent 영역에 저 production 파일들을 적용해본 후, 톰캣을 실행해보도록 하겠습니다.
마우스 우클릭 → New → Dynamic Web Project → Project Name : sample → Finish
생성이 완료되었다면, Production 빌드파일들을 WebContent 내에 추가해줍니다.
위 순서대로 완료하였다면, 톰캣 또는 기타 WAS 에 프로젝트를 ADD 후 Server.xml 에 context path를 root로 지정한 다음 실행해보도록 합니다.
WAS 우클릭 → Add and Remove → 프로젝트이동 → Finish
서버실행 후, 한번 브라우저에 호출해보도록 합니다.
위와같은 기본 컴포넌트 실행결과가 나온다면, 배포성공!
다음시간에는 Spring Boot 를 이용하여 본격적으로 간단한 프로그램을 만들어보는 시간을 가져보도록 하겠습니다.
