센차 터치가 국내에 상륙하고 스터디 모임도 만들어지고 조금씩 활기를 띄고 있는데요. 개발은 글쌔? 하시는 분들을 위한 짤막한 글입니다. 개발을 시작하기 전에서의 가장 큰 질문일지도 모릅니다. 결론부터 말씀드리면 예스! 입니다.

센차 터치(이하 센차) 1.x 는 안드로이드에서 많은 약점을 드러냈습니다. 특히 애니메이션은 최악이었습니다. 그러니 2 가 완전 왕의 귀환입니다. 안드로이드 기본 브라우저는 우선 애니메이션을 빼면 거의 iOS 와 속도는 거의 동일합니다. (안드로이드 폰의 종류가 많아 전체는 테스트 하지 못했습니다.) 그러나 이번에 모바일용 크롬 브라우저 베타가 나온 상황에서는 말이 달라집니다. 약간의 화면 최적화를 제외하면 iOS 의 사파리 브라우저의 속도보다 좋습니다. 제가 이미 테스트를 해 봤기 때문에 자신합니다. 테스트 환경은 센차 터치 베타 1 으로 제가 직접 MVC 개발을 하고 있는 어플을 돌렸었습니다. 또한 오늘 베타 2를 발표하면서 속도가 또 향상됐습니다. 체감적으로 느끼는 향상이 보였습니다. 안드로이드의 크롬이 정식으로 제공되는 시점에서는 기대할 수 있다는 겁니다. 이렇게 되면 센차 진영에서는 환상적인 한 해가 되는 겁니다.

릴리즈 노트에서 Known Issue 에 보면 아래와 같은 문구가 있습니다.

The Chrome Mobile beta was just released this week. We expect to have proper detection and implementation beginning with the next release.

이 문구에서 보면 이제는 개발을 모든 회사에서 한다고 해도 리스크는 곧 아무것도 아니게 된다는 겁니다. 짤막한 글이 도움이 되셨으면 합니다.

센차 터치에 관심 있으신 분은 제가 활동하는 페이스북 그룹에 질문하시면 성심 것 답변해 드리겠습니다.

관련 포스트:

• CSS 클래스 이름으로 탭(클릭) 했을 때 메서드로 넘기기
• Sencha Touch 를 이용한 웹 사이트가 쏟아진다.
• Infinite Ajax Carousel

메모리의 관리 능력은 여러가지가 있습니다. 그 중에서 패널 관리를 알려드리겠습니다. 모바일 기기는 많이 발전했지만, 사실 아직 하드웨어는 데스크탑보다 떨어지는 것은 사실입니다. 그래서 메모리의 최적화가 필요합니다. 오늘은 패널의 메모리 해제의 과정을 보여드립니다.

사실 Sencha 개발팀의 내용을 잘 이해했는지 몰라도, 태그 엘리먼트의 생성은 메모리 문제와 직결된다고 합니다. 그래서 항상 필요하지 않은 경우 다시 해제하는 습관이 필요합니다. 방법은 간단합니다. 객체를 생성하면서 특정 이벤트가 실행되면 메모리는 해제되게 만드는 것이죠. 방법을 알아봅시다.

간단하죠? deactivate 이벤트는 대부분 패널을 이동하는 이벤트를 사용할 때, 실행됩니다. 따라서 다른 화면으로 전환을 할 경우에는 자동으로 해제하는 방법이 되는 겁니다.

관련 포스트:

• 관련된 포스트가 없습니다.

나머지는 일반 스토어 사용과 거의 같습니다. var check = store.first() 를 사용하면 가장 처음에 생성된 값을 불러와서 check 변수에 저장합니다. 값은 Object 로 들어갑니다. 그리고 값이 없을 경우, if 구문에서 구현한 값을 넣으면 되는데, id 는 자동으로 수치가 1, 2, 3 … 으로 증가합니다. SQL 데이타베이스 같이요. 배열의 인덱스라고 생각하시면 됩니다. 삭제는 remove() 메서드로 간단히 됩니다.(store.remove(check)) 그리고 sync() 를 꼭 시키세요. store 는 getCount() 메서드로 갯수를 얻은 후 getAt() 으로 인덱스의 값을 가져오면 되겠죠?

초반에 약관을 불러오고 체크로 구분해서 다시 불러오느냐 아니면 확인 했으니 안보이게 하는게 가능하겠죠? 로컬 저장소는 한번 저장하면 삭제하지 않는 이상 유지되므로 신경쓰시지 않아도 됩니다. 다만, 브라우저 캐시를 지우면 아마 같이 날라갈겁니다.

관련 포스트:

• Store 를 읽을 때 딜레이가 있는 경우

저는 resources/php/ 에 getFavorite.php 이란 파일을 만들고 다음과 같이 작성했습니다. Grooveshark 의 제 좋아하는 목록을 가져오겠습니다. 제 API 인데 그냥 쓰세요.

제가 PHP 는 좀 약하니 더 좋은 방법이 있으면 주저 말고 밑에 달아주세요. 이제 Sencha Touch(이하 센차) 의 스토어에 담는 작업을 해야합니다. Ext.List 를 생성하여, store 와 itemTpl 을 만들어줍니다.

툴바는 만드실 줄 아신다는 전제 하입니다. 그렇게 간단하게 만든 예제를 이 곳에서 보실 수 있습니다. CSS 부분을 약간 추가했는데, resources/css/style.css 에 있습니다.

관련 포스트:

• Store 를 읽을 때 딜레이가 있는 경우

위 load 이벤트를 쓰면 됩니다. this.onLoadStore 는 메서드의 이름입니다.

관련 포스트:

• 로컬 저장소(Local Storage)를 이용한 내용 저장
• JSON 목록을 통한 간단한 리더 만들기
• CSS 클래스 이름으로 탭(클릭) 했을 때 메서드로 넘기기
• Sencha Touch 를 이용한 웹 사이트가 쏟아진다.
• 맥 스팀 릴리즈와 24일까지 포탈 게임 무료

탭 이벤트 발생시의 처리입니다. div.ontap 아래에 img 태그를 선택시 onTap 메서드로 이동하라는 뜻입니다. 주의 할 점은 initComponent 함수에 넣으면 에러가 날겁니다. 이유는 initComponont 는 이 컴포넌트가 초기화를 하지만, 렌더링은 완료되지 않은 상태라 .ontap img 는 존재하지 않은 상태에서 사용할 수 없습니다. 렌더링 후 사용해야기 때문에 afterRender 이 후의 메서드에 사용가능합니다.

관련 포스트:

• 센차 터치 2와 안드로이드
• Store 를 읽을 때 딜레이가 있는 경우
• Sencha Touch 를 이용한 웹 사이트가 쏟아진다.
• Infinite Ajax Carousel
• 맥 스팀 릴리즈와 24일까지 포탈 게임 무료

요즘 Sencha Touch 를 접하고 매력에 빠져 직장에서 두세번의 개발을 해보고, 포럼을 만들었습니다. 오늘 피드를 보는데 소개를 엄청 하네요. 얼마전의 리뉴얼도 색달랐는데, 홍보에 박차를 가하나 봅니다. 잠깐 소개를 하자면, jQuery 는 개발을 빠르게 해주는 라이브러리라 한다면 이 것은 모바일 사이트의 개발을 예쁘게 구현해주게 합니다. 프레임워크이며 폰갭을 씌우면 앱으로도 가능합니다.

쇼핑몰과 CCM

쇼핑몰 사이트가 새로 나올까 했더니 나왔네요. 아이팟 터치나 아이폰으로 보세요. 아직 아이패드로는 안되네요. 예전에 이 쇼핑몰을 보면서 연습했다죠? 기본으로 소개하는 데모입니다. 기본 데모는 Infinite Ajax Carousel 로 멋진 UI 를 만들어냈것이 특징입니다. 많은 악세사리 류가 끝도 없이 Carousel 에 표현됩니다. 이번 쇼핑몰은 저도 구현할 수 있는 정도인 듯 합니다.

그리고 Echo Conference 에 대한 정보라는 모바일 웹도 있습니다. 사이트를 가보니 CCM 인거 같기도 하고 아무튼 장르는 음악이네요. 가보니 스케줄 리스트가 있고 한데, 알아보질 못하겠습니다.

이번에는 중고차 시장 웹도 있습니다. 중고가 아닌가? 아무튼, 사이트를 아이폰으로 방문하거나 사파리의 에이전트를 바꿔서 해보세요. 위 사이트들도 에이전트만 바꿔도 됩니다. 검색을 시작으로 기본적인 Sencha Touch 의 폼을 잘 활용했네요. 상당히 심플하면서 갖출건 다 있네요. 이런 모바일 웹을 보면 기존의 한국 모바일 웹은 전부 거품 같아 보입니다. 멜론의 모바일 웹을 보셨나요? 아이패드로 보세요. 보면 Sencha Touch 인데, 너무 느리고 모바일 웹까지 덕지덕지 쓸대어베는 UI 를 많이 쓰고 있습니다. 이런거 보면 외국 모바일 웹이 더 심플하고 빨라 보입니다.

Sencha Touch 의 간단한 장점

Sencha Touch 는 안드로이드까지 가능해서 아이폰용으로 끝내도 안드로이드에서 바로 볼 수 있는 장점도 있습니다. 장점이 많죠. 웹킷을 쓰기 때문에 HTML5, CSS3 를 지원합니다. 사파리나 크롬만 있어도 개발이 쉽습니다.

new Ext.data.Store({
    model: 'User',
    proxy: {
        type: 'ajax',
        url : 'users.json',
        reader: 'json'
    },
    autoLoad: true
});

Sencha Touch 의 경우 HTML5 의 로컬 스토리지를 API 를 통해 간단히 사용가능합니다. Store 를 사용하는데 여러가지가 있고 모든 Store 는 그저 간단합니다. AJAX 통신도 간단하고 ScriptTag 를 이용해 다른 도메인도 AJAX 통신을 사용할 수 있습니다. 많습니다. DOM 도 만질 수 있으며, 폼의 UI 가 모바일에 맞게 자동 생성이 가능하고, 아이폰의 액션이트나 픽커뷰도 쉽게 생성이 가능합니다. 테마역시 변경이 가능합니다. SASS & Compass 를 사용해서 간단히 변경 가능합니다. 비디오를 봤더니 변경이 쉽더군요.

포럼 홍보

만약 개발시나 공부시 포럼에 질문하시면 아는 한도에서 대답해 드리겠습니다. 잠깐 포럼 홍보를 하자면 아직 만든지 별로 되지 않아 영문으로 되있거나 허접합니다. 계속 변경 중입니다. OpenID 나 구글 아이디로 접속이 가능합니다. 페이스북이나 트위터도 곧 가능합니다. 개발 사이트에 앱 등록하기 귀찮아서 나두고 있긴 합니다. 양해해 주세요.

ExtJS

아직 소개가 더 있습니다. 이 것은 ExtJS 로 만들어 졌지만, 같은 Sencha 입니다. ExtJS 와 같은 회사이며 이미 ExtJS 를 할 줄 아신다면 익히기 간단합니다. CodeSmith Insight 는 소프트웨어 헬프 데스크 입니다. 하나 가입해서 써봤는데, 써본 경험이 없어 삽질 중입니다.

마치며

사실 더 소개해 드리고 싶지만, 한손으로는 힘드네요. 이 것으로 게임 개발도 가능합니다. 물론 자바스크립트를 아주 잘 하신다면야… 앱은 제가 굳이 소개를 하지 않아도 사이트에 널려있습니다. 데모를 보셔도 되고 Sencha Touch 의 컨테스트를 보셔도 됩니다. 컨테스트가 페이지가 별도였는데, 데모 하단에 있네요. 리뉴얼 되니 많이 변경됐네요. 포럼에 오시면 답변 잘 해드리겠습니다. 그리고 이 중에 바닐라 포럼을 많이 써보신분이 계시면 댓글 부탁 드려요.

관련 포스트:

• Infinite Ajax Carousel
• 센차 터치 2와 안드로이드
• Store 를 읽을 때 딜레이가 있는 경우
• CSS 클래스 이름으로 탭(클릭) 했을 때 메서드로 넘기기
• HTML5 는 국외 웹의 미래

Creating An Infinite Carousel

The infinite carousel (이하: 무한 회전 목마) 은 많은 아이템을 제어 할 수 있습니다. 이 것은 메모리에 저장된 객체를 통해 슬라이드 윈도우를 만들어냅니다. 현재 보여지는 카드, 바로 전 그리고 따라오는 카드 또한 만들어냅니다. 사용자의 스크롤을 통해, 아이템은 동시에 만들어지거나 소멸되고 필요에 따라 항상 최신의 윈도우를 보관합니다. 이 방법으로, 우리는 사실 얼마나 많은 아이템이 회전 목마에서에서 특정한 수에 관계없이 만들어졌는지 알 수 있습니다.

아래 다이어그램에는, 3개의 아이템을 가진 슬라이딩 윈도우가있습니다. 처음에 3번 아이템이 중앙에 위치하고 2번과 4번 아이템이 실제로 만들어져 있습니다. 사용자가 아이템 4번으로 변경할 때, 오른쪽으로 윈도우는 슬라이드 됩니다. 아이템 2는 지워지고 아이템 5가 생성됩니다.

회전 목마의 API 는 상당히 간단합니다. 아이템 설정 프로퍼티(items config property)를 사용하는 대신, createItem 설정 프로퍼티(createItem config property)를 허용합니다. 언제나 필요한 아이템은 생성되고, 인덱스와 함께 함수는 호출하게됩니다. 함수는 그 때 아이템을 반환하고 생성합니다. 같은 결과이지만, 2가지 방법을 선보이려합니다: 일반 화전목마와 우리가 말하는 무한 회전목마를 설명합니다.

슬라이딩 윈도우의 개념은 간단합니다. 초기에 로드되고 아이템이 변경되면, 창이 업데이트 됩니다. So the meat of the implementation is in the window update code. 중앙에 위치한 윈도우의 아이템의 인덱스는 호출됩니다. 풀 코드가 있습니다:

Custom Carousel Indicator

무한 회전목마의 위치 표시기(indicator)는 일반 회전 목마에서는 동작하지 않습니다. 일반 터치 스크롤바 보다 비슷한 위치 표시기 구성요소를 생성하여 해결합니다 . 일반 표시기를 사용한 템플릿이며, 꽤 간단한 코드입니다:

관련 포스트:

• Sencha Touch 를 이용한 웹 사이트가 쏟아진다.
• 센차 터치 2와 안드로이드
• CSS 클래스 이름으로 탭(클릭) 했을 때 메서드로 넘기기
• 카테고리와 프로토콜
• 외국 포럼의 NSFileManager 해석

아무튼 저도 완전하게 이해를 못했지만, 이번에 반복문의 사용을 소개하려 합니다. DOM 레벨 1에는 문서가 변경될 때마다 자동으로 갱신(updated, reflow)된다, 라는 말이 있습이다. 우리는 보통 DOM 트리 중에서 원하는 부분을 가져올 때 getElementsBy… 을 사용합니다. 그리고 라이브 즉, 실시간으로 수정하며 다이나믹한 웹 오브젝트를 만들어냅니다. 다이나믹 웹에는 당연히 DOM 수정이 이루어 집니다.

또한 수정 시에 보편적으로 사용되는 반복문을 짚고 넘어가야합니다. ‘보다 빠르게 할 수 없을까?’, 라는 질문에는 반복문의 사용이 어떤 영향을 주느냐에서 답이 대충 나오게 됩니다. 예제를 보세요. 동영상의 예제를 캡춰해서 다시 사용하겠습니다.

우리는 보통 이렇게 사용하지만, 실제로는 무한대의 루프라고 합니다. 여기서 문제는 제가 제대로 알아듣지 못했다는 점인데 들은데로 말하자면, 위의 length 프로퍼티는 배열 같지만, 실제로는 아니라는 부분입니다. 그리고 또 하나의 예제입니다.

Updated 02:55 AM DOM 1번의 수정은 1번의 페이지 갱신으로 이어집니다. 지금의 예제는 무한한 갱신이 실시간으로 이루어지는 것을 뜻합니다.

그림에서 2개의 구문은 달라보이지만, 정확히 같은 동작을 하고 있으며 각 브라우저별로 성능을 예로 보여줍니다. 아마 반복문을 실행하는 갯수인 듯 합니다. 그리고 당연히 이에 대한 해결책이 나와야죠?

이렇게 지역변수를 사용하는 것이라 합니다. 그리고 각 브라우저의 성능이 같아지게 됩니다. 저도 이번 계기로 나쁜 코딩이란 것을 알게 됐기 때문에 실무자들의 경험이 있으면 좋겠다는 생각이 있습니다. 있으시면 답글 달아주시면 저는 감사드립니다.

관련 포스트:

• 자바스크립트를 더욱 빠르게 하는 법은?
• 트위터의 아이디 자동 링크(@)를 블로그에 사용해 보자.
• 축구 방송을 해외 웹 페이지에서 보자.
• 해킨토시와 업데이트의 안정성

다른건 잘 못알아 듣겠고 DOM 부분만 조금 들립니다. 루프문을 변경해서 파이어폭스, 크롬, IE 에서 같은 속도를 내게 한다거나 reflow 를 줄이는 법을 소개하고 있습니다.

구글에서 주최했었나 봅니다. 보면 영어를 조금만 이해하셔도 영상이 말해주니 도움이 많이 됩니다. 마지막에 제대로 해석했는지 모르지만 좋은 브라우저를 쓰랍니다.

중간에 IE8 와 모던 브라우저의 벤치 마킹에서 정말 경악스러운 결과를 보여줍니다. IE8 속도는 모던 브라우저의 발 끝도 못 따라오는 속도를 지니는군요. 9 에서 좋아지리라 기대합니다.

iTunes 로 구독하는 방법이 있으면 좋겠네요. 아, RSS 로 구독할 수 있네요. 여담으로 마지막에 주머니에 손넣고 질문하면 한국에선 질타 맞겠죠.

http://davidwalsh.name/javascript-speed/comment-page-1

관련 포스트:

• 구글 크롬이 IE9 에 당하는 모습…
• Ryan Cabrera – Photo [OFFICIAL MUSIC VIDEO]
• 자바스크립트를 더욱 빠르게 하는 법은? : 확장편 1부
• Kyte.com 도 iPad 에 HTML5 사용
• 파일 전송이 가능한 구글 토크

Dojo 툴킷을 시작하기 위해 많은 정보들이 존재합니다. Dojo 의 기초를 독학하기 위해 여러 자원들을 모아봤습니다. 함수와 변수 혹은 새로운 Dojo 를 이해한다면, 이 것은 당신의 것이 됩니다.

나는 또한 Dojo 기초의 모자란 부분을 이 과정을 통해 도움이 되었으면 합니다. Dojo 자료와 핵심을 집중적으로 모아봤습니다. Dojo 의 일부분인; Dijit, DojoX 그리고 유틸(어떻게 구성되는지)의 내용을 다룹니다.

http://www.sitepen.com/blog/2010/03/05/learning-dojo/

관련 포스트:

• 관련된 포스트가 없습니다.

먼저 번들을 받아야겠죠? kswedberg 의 GitHub 에 들어가 소스를 받습니다. 그리고 다 받은 압축 파일을 해제한 후 폴더를 jquery.tmbundle 로 변환하고 확장자를 사용하게 합니다. 그러면 번들 파일이 만들어지고 더블 클릭하면 자동으로 설치가 됩니다. 그러나 HTML 파일에서는 자동완성 기능이 되질 않아 별도의 .js 파일을 만들지 않는 한은 활용도가 떨어지게 됩니다.

번들 메뉴의 번들 에디터에는 Edit Languages 가 있습니다. HTML 에서 patterns = ( 이란 문장이 보이실 겁니다. 아래에 이 내용을 추가 하신 후 Test 를 한번 눌르고 Text 재시동 하세요.

이제 HTML 에서도 자동완성이 될겁니다.

http://fwd4.me/1c4

관련 포스트:

• 관련된 포스트가 없습니다.

예전의 IE 를 통한 웹폰트가 유행했던 시절이 있습니다. 그러나 다른 브라우저에서는 쓸 수가 없었죠. CSS3 에서는 가능할지 모르나 또 반대로 IE 에서는 쓰지 못합니다, 현재까지는요. 그러나 폰트를 자바스크립트로 변경하여 쓰는 기술이 있습니다. 웹폰트와 유사하나 모든 브라우저가 쓸 수 있다는 점이 강점입니다. CSS3 의 @font-face 의 경우 웹의 특정 경로에 위치시키고 사용하고 이 또한 비슷합니다.

헤더에 스크립트를 위치시켜야 합니다. 하지만 하나의 스크립트가 더 필요합니다. 이 기술을 사용할 수 있게 해주는 스크립트입니다. 전의 것은 그냥 폰트를 변환한 것 뿐입니다. 우선 변환해야겠죠?

http://cufon.shoqolate.com/generate/

Use the following value as the font-family of the generated font (optional) 는 옵션이지만 원하는 이름을 적으세요. 다 변환하고 위의 Download 탭으로 스크립트를 받습니다. 이렇게 2가지 스크립트를 헤더에 올리면 99% 완료입니다. 이제 원하는 곳을 지정해야겠죠?

h1 은 원하는 태그명 fontname 에는 아까 옵션으로 적어준 이름 혹은 기본 폰트명을 쓰면 됩니다. 다음 폰트도 가능합니다. 외국에서는 간혹 헤드라인 폰트가 갑자기 바뀌는 경우가 있는데 모두 이 기술을 사용했기 때문입니다. 이쁘게 꾸민다고 남용하지는 마셨으면 합니다.

관련 포스트:

• 관련된 포스트가 없습니다.