ExtJS6 열네번째강의 - ExtJS 6 Ajax(비동기통신)를 이용한 데이터스토어 이해(3) (ExtJS 6 Understanding DataStore with Ajax)
▼▼▼ ExtJS 강좌 구독을 원하시면, 아래 채널구독 부탁드립니다 ^^ ▼▼▼
https://www.youtube.com/channel/UCmIEd8PTq5PXJyXlboXKOpQ
기존에 우리는 데이터 스토어에서 data 속성으로 정의되어있는 데이터 목록을 콤보박스 또는 그리드에 출력을 해보았습니다.
하지만, data 속성을 사용하지 않고 이번 강좌에서는 proxy config 를 이용하여 원격 페이지로부터 데이터를 불러오는 연습을 해볼겁니다.
ExtJS 개발은 App 개발처럼 화면만 개발하면 된다!
안드로이드 또는 아이폰과 같은 모바일 개발을 할 경우, 서버 개발자가 API 개발을 하고, 앱개발자는 화면개발과 서버로부터 응답받은 API 값을 이용하여 앱개발을 진행합니다.
이와같이, ExtJS 역시, 완벽하게 백엔드와 프론트엔드의 역할을 나눌 수 있습니다.
대신, ExtJS 개발은 대부분이 Ajax 개발이 이루어지기 때문에 각각 다른 포트로 사용할 경우, CORS 설정을 API 서버 환경에서 설정을 해주어야 합니다.
CORS는 크로스도메인에서 Ajax로 데이터를 주고받기위하여 필요하다
JSONP 방식도 있긴하지만, 목록조회용으로 사용한다면 OK
하지만, CRUD 모두를 JSONP 방식으로 하겠다면 비추!
Corss Origin Resouce Sharing의 약자로,
쉽게 말해 CORS 설정을 해주지 않으면, 크로스 도메인간의 비동기 통신이 이루어 질수 없습니다.
해당 설정은 각 서버페이지(JAVA, PHP, NodeJS, ASP 등..) 설정이 다르므로 설정방법은 구글링을 통해서 설정하시길 바랍니다.
데이터 스토어의 Proxy 설정에 하위 속성 설정
memory 방식의 코드
store : {
fields : ['field1','field2'],
data : [{
"field1" : "필드1",
"field2" : "필드2"
}]
}
ajax 방식의 코드
store : {
fields : ['field1','field2'],
proxy : {
// proxy type 설정
type : 'ajax',
// 로컬 또는 원격으로부터 응답받을 호출 URL
url : 'URL',
reader : {
// read 타입설정 : json, xml 값을 선언할수 있음 선언하지 않을경우 default json
type : 'json',
// 내려온 API 데이터 목록 중, read 할 최상단 api key값
rootProperty : 'data'
}
}
}
ajax방식으로 선언하기 위해서는 기존 data config를 제거하고 proxy 속성을 정의해주면 됩니다.