cmd 콘솔명령어에서는 정상적으로 빌드 명령어 및 실행명령이 동작 되서 테스트용 앱 동작이 가능하지만, 안드로이드 스튜디오에서 로드 시, gradle 오류 발생이 되는 경우가 있습니다. 이럴 경우, 해결을 위해서 cordova android 버전을 8.1.0 버전을 이용하면 정상 동작이 됩니다. 최초, cordova 를 이용하여 안드로이드 플랫폼 add 시, cordova platform add android@8.1.0 으로 설치해주시거나 자동적으로 8.1.0 버전이 설치되신다면 크게 문제는 없을겁니다. 하지만, 기존 8.0버전대의 안드로이드 플랫폼으로 개발중이시라면, cordova platform rm androidcordova platform add android@8.1.0 와 같이 추가를 해주시면 ..
최근에 프론트엔드 부분 중, Vue 와 React 에 관심이 생겨 포스팅을 시작하게 되었습니다. 그중 처음으로 포스팅을 시작하는 내용은 VueJS 입니다. jQuery와 ExtJS 포스팅을 읽으신 분들이 계실수도 있어서 관련 스크립트들과 연관을 지어 글을 작성하도록 하겠습니다. vue.js 라이브러리파일(선택) 위 2가지 라이브러리 중, 하나를 선택하셔서 포스팅 글을 진행하시면 됩니다. body 태그 {{}} html 태그내에 해당 문법을 이용하시면 vueJS 의 data 속성의 key에 맵핑된 value 값이 바인딩 됩니다. vueJS 코드 script 태그안에 작성되는 코드이며, ExtJS의 viewModel 을 선언해놓은 데이터 바인딩을 처리하는 개념과 유사합니다. 1. el : 뷰 문법이 적용될 ..
ExtJS 6 강좌 영상은 링크를 통해 제공됩니다. (YOUTUBE 채널 구독해주세요!!) https://youtu.be/YOkY8ra_AOk 지난 시간부터는 샘플 프로젝트를 위한 템플릿을 제작중입니다. 오늘은 지난시간에 정한 메뉴목록 클릭 시, 중앙영역에 변경되는 컴포넌트를 변경해보도록 합니다. treelist → listeners → selectionchange 트리리스트 컴포넌트의 리스트 변경이벤트 selectionchange(this,record,eOpts) this : 트리리스트 자기자신 record : 선택된 노드의 레코드 값들 eOpts : 리스너에 전달된 옵션객체 특정 위치 컴포넌트 교체 폼필드 컴포넌트의 레이블 옵션 fieldLabel : Stringvalue 값에 정의를 하면 폼필드의 ..
ExtJS 6 강좌 영상은 링크를 통해 제공됩니다. (YOUTUBE 채널 구독해주세요!!) https://youtu.be/5YjXYYoQ2ew 서버API 만들기 전, 화면개발 먼저 진행하겠습니다. app.js기존에 프로젝트 생성한 ExtJS 빌드 구조에서 app.json내에 존재하는 mainView를 주석 또는 지워줍니다. 로그인 - Login Form app → view → login 디렉토리 생성 후, Login.js 파일 생성 로그인의 경우 일반적으로 패널 또는 윈도우 컴포넌트로 생성을 하지만, 어떤 컴포넌트를 이용해서 만드는거에 대한 정답은 없습니다.여러분이 편하신 컴포넌트로 제작을 하시면 되지만, 저같은 경우는 윈도우 컴포넌트를 이용하여 만들어 보았습니다. Application.jsconfig ..
ExtJS 6 강좌 영상은 링크를 통해 제공됩니다. (YOUTUBE 채널 구독해주세요!!) https://youtu.be/PExqR3Pt1LM 지난시간에 Spring Boot를 이용하여 기본설정을 진행했었습니다. 2017/04/12 - [ExtJS 6 동영상강좌] - ExtJS6 실전응용편 두번째 강좌 - Spring boot로 개발 환경 구성 및 API 연동 테스트 1장 (development environment and API test 2-1) 2017/04/12 - [ExtJS 6 동영상강좌] - ExtJS6 실전응용편 두번째 강좌 - Spring boot로 개발 환경 구성 및 API 연동 테스트 2장 (development environment and API test 2-2) 이번시간에는 추가로 ..
ExtJS 6 강좌 영상은 링크를 통해 제공됩니다. (YOUTUBE 채널 구독해주세요!!) https://youtu.be/nUvatm6yIBM 지난 시간에 간단하게 Spring Boot 기본설정을 통하여 JSON API 생성하는 부분까지 진행했었습니다. 2017/04/11 - [ExtJS 6 동영상강좌] - ExtJS6 실전응용편 두번째 강좌 - Spring boot로 개발 환경 구성 및 API 연동 테스트 1장 이번시간은 우리가 실전응용편 첫번째 강좌에서 진행 했던대로 Sencha CMD를 통해서 webapp 디렉토리내에 ExtJS 프로젝트를 생성하도록 하겠습니다. 2017/04/11 - [ExtJS 6 동영상강좌] - ExtJS6 실전응용편 첫번째 강좌 - 빌드 후 샘플소스 WAS에 배포하기(Buil..
ExtJS 6 강좌 영상은 링크를 통해 제공됩니다. (YOUTUBE 채널 구독해주세요!!) https://youtu.be/nUvatm6yIBM ExtJS 실전/응용 두번째 강좌입니다. 많은 분들께서 서버연동하는 부분까지 요청을 주셔서 진행을 하게 되었습니다. 저의 경우, Dynamic Web Project 를 이용해서 프로젝트 생성을 하지 않고, Spring Boot를 이용해서 서버연동을 진행하도록 하겠습니다. Dynamic Web Project 로 진행을 하게 되면 이클립스의 경우 Building Workspace 동작을 하면서 이클립스 자체에서 메모리관련 문제가 발생합니다. Validation 설정으로 막을수도 있는 부분이긴 합니다만, 해당 부분은 IDE 설정부분이 기 때문에 따로 설명드리지 않도록 ..
ExtJS 6 강좌 영상은 링크를 통해 제공됩니다. (YOUTUBE 채널 구독해주세요!!) https://youtu.be/zSKJLVQ67xQ 안녕하세요 개발로짜입니다 ^^기초편에서 우리가 ExtJS의 문법과 컴포넌트 이해를 배웠다면,이번강좌에서는 간단한 웹프로그램을 만들어보면서 서버와 API 통신까지 해보는 시간을 가져보려고 합니다. 우선 기초편에서는 Generate 할때, classic(ExtJS) / modern(Sencha Touch) 구조로 생성하였는데, 실전/응용편에서는 ExtJS 만을 다루기 위하여 classic 버전만으로 진행을 하기 위해 새로운 ExtJS 프로젝트를 Generate 해주도록 하겠습니다. ExtJS 를 Generate 하기 위한 임의의 디렉토리 생성예) D:\study라는 ..
ExtJS 6 강좌 영상은 링크를 통해 제공됩니다. (YOUTUBE 채널 구독해주세요!!) https://youtu.be/vUSf6LnEWOk 우리는 지금까지 기본 컴포넌트 생성법에 대하여 알아보았습니다. 간단하게 템플릿 구성을 한 후, 중앙영역에 우리가 미리 정의해놓은 컴포넌트를 변경해보는 시간을 가져보도록 합니다. app.js Code 위와 같이 코드에서 각 버튼 클릭이벤트 발생 시, handler 함수내에 정의한 뷰포트의 중앙영역을 selector를 이용하여 변수에 담은 후, 중앙영역내에 있는 컴포넌트들을 모두 removeAll을 이용하여 삭제합니다. 그런 다음. add 함수를 이용하여 우리가 미리 define 해놓은 컴포넌트를 삽입하여 줍니다. GridSample.js Code ButtonSamp..
ExtJS 6 강좌 영상은 링크를 통해 제공됩니다. (YOUTUBE 채널 구독해주세요!!) https://youtu.be/Gc2-7RRDcG4 데이터 바인딩 (Data Binding) ViewModel과 데이터 바인딩은 ExtJS 의 강력한 것 중 일부입니다.같이 사용하게 되면 데이터와 UI 간의 비즈니스 로직이 끊기지 않는 연결관계를 만들 수 있습니다. 바인딩이 가능한 CONFIG 설정은 bind 라는 속성내에 GET/SET을 지원하는 CONFIG 를 정의 후 value부분에 중괄호 - "{value}" 와같이 정의를 해주어야 합니다. MVVM 구조 이해하기 우리는 기존에 app.js 라는 파일내에 모든 컴포넌트 + 기능들을 기술하여 화면에 출력 하고 기능을 동작시켜 보았습니다. 하지만, 페이지가 늘어..