jQuery Mobile 로 만든 To-Do List 분석하기 01

jQuery Mobile을 배우는데 Tutorial을 봐도 깔끔하게 정리되지 않아서요.

뭔가 제대로 된 App 소스 하나.. 완성된 App 소스 하나 제대로 분석해 보면 좀 더 많이 이해 되지 않을까 싶은 마음에 ....

여기 저기 소스코드를 찾다가 Mobile To-Do List를 찾았습니다.

지난 세기(Century)에 처음 웹 프로그래밍을 배울때 쇼핑몰 소스 가지고 설명한 책을 사서 무조건 개발에 들어갔던 기억이 나네요.

PHP로 만든건데.. 그때는 PHP 뿐만이 아니라 아무런 언어도 배우지 않았을 때거든요.

대충 한두달 짜리 강좌는 들었지만 전혀 프로그래밍과는 상관없는 문과 출신이어서 뭔소린지 도통 이해 못하겠더라구요.

그래서 이해하고 뭘 시작하면 안될것 같아서.. 무작정 쇼핑몰 개발에 들어갔죠..

jQuery Mobile도 튜토리얼을 통해 각 기능만 봤을 때는 쉬워보이더만 막상 뭘 개발하려고 하니까 이것 저것 막히는게 많네요.

튜토리얼을 어느정도 공부했으니 이제부터는 여기 저기 샘플 소스 코드 사냥에 나서서 분석하고 응용해서 내것도 만들고 그래야 겠어요.

제가 찾은 소스는 Mobile To-Do List 입니다.

여기로 가시면 소스코드를 다운 받을 수 있습니다.

뭐 혼자 소스 분석 하실 수 있으신 분은 직접 다운받아서 하시면 됩니다.

이 블로그는 제가 공부하기 위해서 만든거니까 저는 그냥 제 공부를 위해서 정리해 놓는것 뿐입니다.

혹시 다른 분들 좋은 jQuery Mobile로 만든 좋은 샘플 앱 소스코드 있으시면 정보 부탁드려요.

제가 잘 분석해서 여기에 올릴께요.

먼저 제가 분석할 Mobile To-Do List 앱 화면은 아래와 같습니다.

index.html을 치시면 위와 같은 화면이 나올겁니다.

처음 실행 시키는 거니까 내용은 아무것도 없습니다.

내용을 만들려면 New 버튼을 클릭합니다.

그러면 내용을 넣을 수 있는 화면이 나옵니다.

우선 Description을 넣고 select 메뉴에서 중요도를 정합니다.

제대로 작성했으면 Create 버튼을 누릅니다.

그러면 다시 첫번째 화면으로 오는데요.

좀 전에 저장한 데이터가 쿠키로 저장되고 그것을 불러와서 화면에 뿌려 줍니다.

오른쪽에 있는 X 버튼을 누르시면 해당 내용이 지워지구요.

보니까 딱 2페이지 짜리 앱이네요.

우선 jQuery Mobile로 두 페이지를 만들고 버튼들에 각각 이벤트가 일어나면 어떤 일을 하도록 JavaScript로 프로그래밍을 해야 할 것 같습니다.

그럼 다음 글 부터 직접 소스코드를 놓고 분석을 해 봐야겠습니다.

참 이 소스코드를 분석하려고 바로 전에 jquery.cookie.js, jQuery.tmpl, json2.js  플러그인을 분석했습니다.

필요하신 분들은 그 글들 먼저 보시면 좋을 거예요.