saltfactory's blog


센차터치(Sencha Touch)에서 JSONP로 크로스도메인 Ajax요청 문제 해결하기

Sencha Touch는 모바일 웹 앱을 쉽게 만들 수 있는 환경을 제공하고 있다. 그래서 Sencha Touch에서는 웹앱에서 서버측으로 JSON 데이터를 요청해서 Sencha Touch 기반의 application에서 사용할 수 있는 Data Model로 쉽게 사용할 수 있다. 그런데 Sencha Touch를 모바일 어플리케이션으로 개발하게 된다면 즉, 하이브리드 앱으로 네이티브 앱에 패키징하여 개발하게 된다면 어플리케이션의 자원들이 모두 local에 저장하기 때문에 http://domain 으로 요청행하는 크로스 도메인 문제가 발생하게 된다. 이렇게 서로 다른 도메인에서 JSON 데이터를 요청하여 처리할 수 있는 것이 바로 JSONP(JSON with Padding)이다. JSONP는 content-type을 application/json으로 json 데이터를 요청하는 것이 아니라 application/javascript로 JSON을 가지는 callback function을 요청해서 callback function의 JSON 데이터를 사용하는 방법이다. Javascript 에서 callback 구현하기 글에서 callback function 자체를 parameter로 넘겨서 callback function 이름에 ()를 표시해서 callback 함수를 실행시키듯, JavaScript는 call by name 으로 함수를 참조하고 dynamic parameter passing을 하기 때문에 JSONP라는 특수한 기능을 사용할 수 있다. 위키에서 소개한 SJONP를 살펴보면 callback function 이름으로 JSON payload를 가지도록 해서 JSONP의 요청을 처리하는 것을 볼 수 있다. http://en.wikipedia.org/wiki/JSONP

Continue Reading

HTML5의 Application Cache를 이용하여 웹 페이지 응답속도 높이기

서론

연구소에서 HTML5를 부분적으로 도입하기로 결정하면서 여러가지 HTML5 API를 이젠 적용할 수 있는 범위를 정할 수 있게 테스트를 하고 있다. HTML5는 단순히 Hyper Text Markup Language가 아니라는 것을 조금씩 알아가고 있다. 트랜드를 아는 것과 실제 사용하기 위해서 하나하나 테스트를 하는 것과는 연구하는 사람에게 너무나 다르게 느껴진다. 이번 포스팅은 HTML5의 Application Cache에 대한 소개를 하고자 한다.

Continue Reading

IntelliJ와 JSTestDriver를 이용하여 JavaScript 단위테스트하기

서론

Javascript가 더이상 팝업이나 만들어주는 웹 페이지 embed script code가 아니라 웹 어플리케이션을 만드는 고수준 언어로 인식되면서 기존의 다양한 어플리케이션 개발 방법론으로 Javascript 개발에 적용되고 있다. 이 블로그에서 QUnit을 이용해서 브라우저에서 Javascript를 단위 테스트하는 방법(http://blog.saltfactory.net/194)을 소개한적이 있다. 보통 Java 웹 프로그램을 개발하면서 Javascript를 View를 개발하면서 많이 개발할 것으로 예상이 된다. (물론 고급 방법은 MVC를 분업해서 View만 다른 IDE를 통해서 개발하겠지만 작은 연구소나 중소기업에서는 웹 프로그래머들이 Java 웹 프로그램도 개발하고 front-end 개발도 동시에 할 것이다.)

그래서 IntelliJ에서 Javascript를 단위 테스트하는 방법을 소개하려고 한다. IDE는 보통 자신이 가지고 있는 Testing Tool이 포함이 되어 있다. IntelliJ의 JetBrain에서 Javascript Application 개발 툴로 WebStorm이 있는데 이 IDE에는 JSTestDriver라는 Javascript Testing Tool이 포함이 되어 있다. 하지만 IntelliJ는 Java Application 개발 툴로 JSTestDriver가 없기 때문에 Plugins으로 설치를 해야한다.

Continue Reading

Sencha Touch의 Ext.require 를 이용해서 비동기로 Javascript (센차클래스) 로딩하기

서론

Sencha Touch는 Javascript Mobile Development Framework 로 현존하는 WebApp UI framework 중에서 가장 기능이 많고 좋은 아키텍처를 가지고 있지 않나 생강이 든다. 하지만 이러한 Sencha Touch를 익히고 자유롭게 사용하기가 그리 만만하지가 않다. 한국어로 번역되거나 Sencha Touch 2에 관한 도서가 이제 조금씩 나오기는 하지만 Sencha Touch 에 관한 자료가 많지 않아서 영어의 장벽이 높아서 쉽게 포기하는 framework 중에 하나로 알려져 있기도 하다. 하지만 정작 문제는 Sencha Touch는 Sencha Touch의 표현식 (물론 Sencha 도 Javascript의 표현을 그대로 따르고 있다)을 이해해야지만 자유롭게 사용할 수 있다는 것이다. 그중에서 Sencha Touch에 클래스를 정의해서 사용하는 방법과 새롭게 생성한 클래스를 Sencha Touch에 사용할 수 있게 로딩하는 방법에 대해서 알아보자.

Continue Reading