제가 받은 이 To-Do List 소스코드가 있는 곳을 찾았습니다.

여기로 가시면 보실 수 있으세요.

제가 이전 글에서 소스코드를 올렸나요?

만약 올렸다면 그건 잘 못 된 소스코드일 겁니다. 제가 잘 못 알았었나봐요.

위 링크를 따라 가시면 설명과 함께 소스코드를 받아 보실 수 있습니다.

그럼 to-do.js를 계속 분석 해 볼까요?

var model = new Model(),  listHeaders = [];

여기까지 했죠?

이건 뭔 뜻인지 제가 좀 헛갈립니다. 자바스크립트 문법을 잘 몰라서.

아마 Model() 의 객체를 model 변수에 담는데 이게 그 안에 배열이 있으니까 listHeaders 에 그 내부의 배열을 담나 봅니다.

좀 이상하긴 한데 머 아님 말구요.

다음 소스 분석하다 보면 답이 나오겠죠 뭐.

그 다음은 getListHeaders() 함수인데요.

$().each 메소드가 나왔습니다. jQuery 메소드죠.

이 메소드의 API는 위에 링크 걸어 놨는데요. 자세히 설명 돼 있습니다.

그러면 priority 별로 데이터들이 모이겠네요.

그 다음은 템플릿 플러그인을 사용하는 함수가 나옵니다.

이 의미는 listHeader 다음에 data-icon 을 delete로 하고 class를 item으로 하는 그리고 ${text} 가 브라우저에 표시되는 그런 패턴을 삽입하라는 겁니다.

첫번째 화면에 입력한 값이 들어가면 각 priority 아래에 그 내용들이 들어가는데 그 내용들에 대한 탬플릿을 추가하는 겁니다.

Sample Item #1 이 ${text} 이고 그 오른쪽에 data-icon = delete 가 되서 X 표시가 있죠? 이 라인을 만드는 함수 입니다.

다음은 id 가 createButton 인것이 클릭 되면 어떤 동작을 하는 함수인데요.

두 번째 화면의 Create 버튼이 클릭 되면 todoUrgency 가 id 인 곳의 값을 받아서 숫자로 형변환을 한 다음에 이것을 priority 변수에 넣습니다. 그리고 id가 todoDescription인 곳의 값을 받아서 그 priority와 함께 var Model = function() {} 함수 안에 있는 this.create 함수를 실행하는 겁니다. 

model.create()를 불러왔죠?

여기서는 인수로 받은 text,priority 값을 key, value 형태로 result에 담고 이것을 items에 push 합니다.

그리고 나서 save() 함수를 불러오는데 이 부분에서 쿠키를 만들어 주는 겁니다.

그러니까 두번째 화면에서 클릭하면 그 값들을 parsing 하고 변수에 담아서 items에 push 하고 이것을 쿠키로 만들어 지는 것 까지 자동적으로 이뤄지네요.

쿠키를 만든 다음엔 renderItemElement에 방금 만든 item을 보내서 X 표시가 있어서 데이터를 delete 할 수 있는 탬플릿을 만들구요. 

jQuery의 .listview() 메소드를 이용해서 #todoList 리스트 뷰를 refresh 합니다.

그리고 나서 두번째 페이지의  form 의 각 값들을 초기화 시키는 군요.

다음 함수의 .delegate() 도 jQuery 함수인데요. 

첫번째 인수를 클릭했을 때 어떤 일을 하라고 할 때 사용되는 겁니다.

즉 #todyList의 li.item 을 클릭하면 model의 remove를 실행하는 군요.

그럼 해당 아이템은 없어지고 그 아래 아이템들은 slideUp 되도록 하는 겁니다.

마지막 함수는

입니다.

model에 있는 getItems를 호출해서 .each() 메소드 처리를 하는 군요.

아까 처럼 각각 탬플릿 화 하는 겁니다. x표가 들어간 item을 만드는 거죠.

그리고 #todoList 리스트 뷰를 refresh 합니다.

지금까지 소스를 따라가면서 해석 해 봤는데요.

생각보다 쉬운건 아니네요.

자바스크립트나 jQuery 메소드들에 대해서 계속 공부하고 실습하고 해야 익숙해 질 것 같습니다.

jQuery Mobile 만 봤을 때는 아주 쉬워 보였는데 이걸 가지고 어떤 앱을 만들려니까 여러가지 배울것들이 더 많군요.

당분간 계속 샘플 앱 소스를 분석해야겠어요.

이제 제가 구한 To-Do List 의 자바스크립트 부분을 공부해 보겠습니다.

저도 자바스크립트는 그냥 소스 긁어다가 사용하는 수준이라서 잘 모르거든요. 그래서 이렇게 jQuery Mobile 제대로 들어가기 전에 자바스크립트 사용법 부터 공부하려고 소스 분석 하는 거 같아요.

지난번 글에서는 jQuery Mobile로 만든 두페이지 짜리 화면을 만드는 소스를 분석해 봤는데요.

오늘 배울 자바스크립트 부분을 작동 시키려면 지난번 그 index.html 파일의 header 안에 4개의 자바스크립트 링크를 더 달아야 합니다.

위에 3개는 이 예제소스 공부하기 전에 각각 대략의 사용법을 정리했었습니다.

지금 공부해야 할 부분은 to-do.js 입니다.

전체 소스는 아래와 같습니다.

처음에 $(document).ready(function() {}); 부분이 나오는데요.
이건 jQuery의 메소드 입니다.
자바스크립트의 window.onload 와 비슷한건데요. window.onload 가 전체 페이지가 다 로드 된 다음에 시작하는 거라면 $(document).ready(function() {}); 는 DOM 이 다 읽혀지기만 하면 곧바로 시작합니다.

그리고 한 파일에서 여러분 사용해도 jQuery 가 알아서 처리해 주구요. window.onload는 그러면 에러가 났거든요.

이렇게 to-do.js는  jQuery 메소드로 페이지가 로드되면 자동으로 실행 되도록 만들었네요.

그 다음에는 함수가 하나 있는데요. var Model = function() {}

Model 이라는 변수명을 가진 함수 입니다.
이 함수 안에는 처음에 var items 변수가 나오는데 이건 배열이네요.
json2.js 파일에 있는 JSON.parse() 메소드를 사용해서 쿠키의 내용을 배열 변수에 담는가 봅니다.
그 다음은 PRIORITY 선언이 있고 다음은 쿠키를 만드는 건데 expire 기간을 1년으로 잡았습니다.

여기서 $.cookie 로 시작하는 것은 아시겠지만 jquery.cookie.js 플러그인에 있는 메소드를 사용할 때 필요한 겁니다.

그 다음 함수인  this.create = function(text, priority) 는 뭘까요?

일단 text와 priority를 받는거네요. 그리고 이 받은 값들을 this.save(); 를 call 해서 쿠키로 저장하는 군요. 그 다음에 결과값을 return 하구요.

this.remove = function(item) 는 쿠키를 remove 하는 것 같습니다.

this.clear = function() 는 items 배열을 싹 비우는 함수구요.

this.getItems = function() 는 items의 갯수를 구해서 전부를 push 하는군요.

load(); 는 jQuery 의 메소드로서 HTML을 로드하고 DOM 에 삽입하는 겁니다. Ajax 기능이죠.

var Model = function() {}은 MVC 패턴 중에 M(Model) 부분을 구현한 거군요.
Model은 주로 비지니스 로직을 구현하는 거죠. 이 앱의 경우에는 여러 아이템들을 추가 삭제하고 쿠키를 만들거나 삭제하는 것 같은 비지니스 로직들이 이 안에 들어가 있습니다.

var model = new Model(),        listHeaders = [];

이거는 뭘까요? 지금까지 만든 Model에 대한 객체를 만들고 그 변수 이름을 model이라고 하구요. 그런데 listHeaders=[];는 왜 붙었을 까요.

오늘은 다른 할 일이 있어서 여기까지 해야 겠네요.

제가 자바스크립트는 잘 몰라서 그냥 제가 이해하는 만큼만 정리한 건데요.

제가 느끼기에 제가 좀 부족하게 이해한 것 같은데요.

자바스크립트 잘 아시는 분 있으시면 조언 좀 해 주세요.

시간 있을 때 차근차근 하나 하나 찾아가면서 마저 공부해야 겠습니다.

지난 시간에 얘기했던 것 처럼 오늘부터는 소스를 분석해 보겠습니다.

우선 index.html부터 보겠습니다.

일반 웹페이지 만들 때와 똑 같겠죠? jQuery Mobile로 화면부터 만들고 난 다음에 javascript로 dynamic 한 효과를 줍니다.

그럼 jQuery Mobile을 사용하기 위해서는 관련된 js 파일과 css 파일을 불러와야 겠죠.

그리고 이 앱은 두개의 페이지로 돼 있으니까 data-role="page" 가 들어가 있는 div 를 두개 만들어야 할 겁니다.

나머지는 화면에 보이는대로 각 위젯들을 갖다가 넣으면 됩니다.

그럼 전체 소스를 한번 보죠.

첫번째 줄의 <!DOCTYPE html> 는 HTML5를 사용한다는 태그이구요.

그 다음부터 본격적인 html 이 시작됩니다.

먼저 head 부분이 오게 되는데 이곳에는 title이 있고 필요한 자바스크립트나 스타일 쉬트 파일을 참조하는 태그들이 있습니다.

여기서는 jQuery Mobile을 사용하기 위해 필요한 두개의 자바스크립트 파일과 한개의 스타일 쉬트 파일을 참조했습니다.

오늘은 화면 구성만 할 거기 때문에 다른 dynamic한 처리를 하기 위한 자바스크립트는 일단 제외했습니다.

그건 다음글에서 다룰 생각입니다.

그 다음 나오는 <body> 서부터가 실제로 브라우저에 표시될 내용들입니다.

우선 data-role="page" 가 있는 div를 두개 만들어서 jQuery Mobile에서 사용할 두개의 페이지를 나눕니다. 하나는 mainPage 이고 또 다른 하나는 addPage 이네요.

우선 mainPage 부터 볼까요.

이 mainPage에는 header와 contents 가 있습니다. 이 둘을 나누는 것은 data-role= 를 이용해서 나누구요. 물론 div안에 그것을 넣습니다.

header 부분에는 제목과 New 버튼이 들어가네요.

jQuery Mobile의 header에서는 링크를 만들면 자동적으로 버튼으로 처리하죠?

그리고 그 버튼은 좌,우 각 한개씩 두개까지 만들 수 있습니다.

여기서는 이 New 버튼을 누르면 뭔가가 실행이 되겠네요.#addPage로 링크가 걸렸으니까 그 페이지가 뜰 겁니다.

그럼 addPage는 새로운 것을 입력하는 form 이겠네요.

그건 나중에 보기로 하고.....

그 다음 content 부분에서는 세개의 item 이 있는 listview를 만들었습니다.

data-role 이 listview로 돼 있죠? 그 다음에 아이템들에는 data-role이 list-divider로 돼 있고 각각 data-priority 가 등록 돼 있습니다.

이제 첫번째 페이지가 완성 됐네요.

여기까지 하면 위 화면을 볼 수 있습니다.

다음 두번째 페이지인 addPage를 볼까요.

여기도 mainPage와 마찬가지로 header와 contents 두개가 가장 윗단에 있습니다.

헤더 안에는 #mainPage로 가는 링크가 두개가 있네요. 이 링크는 data-role이 button 입니다.

두개가 다른 것은 두번째 버튼(Create)에는 id="createButton" 이 있습니다

(data-icon 도 다르네요.)

두번째 버튼에 id 를 준 것은 이 아이디를 가진 버튼이 클릭 됐을 때 자바스크립트에서 어떤 동작을 하도록 하기 위해서 입니다.

이 자바스크립트 부분은 다음 글에서 분석해 보겠습니다.

두번째로 content 부분을 볼까요.

여기엔 data-role="fieldcontain" 부분이 두개가 있습니다.

첫번째 것에는 Label 하고 input 박스가 있습니다.

두번째 input 박스에는 id="todoDescription" 이 있죠? 이렇게 id 가 있는 태그는 대부분 자바스크립트에서 어떤 처리를 하는데 필요한 것들이라고 보시면 됩니다.

두번째 fieldcontain에는 Label 하고 select 메뉴가 있습니다. 디폴트로 Normal 이 select 되도록 되 있네요.

두번째 화면을 브라우저에서 실행시키면 위와 같이 됩니다.

첫번째 화면에서 New를 클릭하면 두번째 화면이 나오고 두번째 화면에서 Back을 하거나 Create 버튼을 누르면 다시 첫번째 화면이 나오죠.

아직 자바스크립트 부분을 완료하지가 않아서 form에 value를 넣고 Create를 눌러도 첫번째 화면에는 아무런 변화가 없을 겁니다.

그 자바스크립트 부분은 다음 글에서 다룰 께요.

Bar theming

header와 footer bar 모두 디폴트로 theme a 로 스타일 됐습니다. 왜냐하면 이 바들은 특히 페이지의 visual hierarchy에서 primary 이기 때문이죠.

Theming headers and footers

이 header와 footer 바에 다른 theme을 적용하려면 data-theme attribute를 추가하시고 특정 테마 swatch (a,b,c, etc.)를 넣으시면 됩니다. 예를 들어 아래 예제는 swatch b를 설정하는 소스코드입니다.

<div data-role="header" data-theme="b"> 
	<h1>Page Title</h1> 
</div> 

Theming buttons in toolbars

header 블럭에 링크를 추가하게 되면 자동적으로 버튼으로 만들어지고 테마는 그 바의 테마 swatch가 적용 됩니다. 이 버튼만 다른 테마를 적용하시려면 data-theme attribute를 사용해서 그 버튼만 다른 테마가 적용되도록 만들 수 있습니다. 에를들어 헤더를 테마 c가 적용되도록 하면 양쪽의 버튼은 자동적으로 테마 c 가 적용된 버튼이 됩니다. 그 중 Save 버튼만 튀게 보이게 하고 싶으면 data-theme attribute를 오버라이드 해서 Save 버튼의 anchor에  다른 테마를 적용해서 넣으시면 됩니다.

<a href="add-user.php" data-theme="b">Save</a> 

Theme variations

아래는 헤더와 footer 바에 그리고 그 안의 버튼들에 다양하게 테마를 적용한 경우들 입니다.

Headers

Footers

아래는 안에 link 버튼이 들어있는 footer 바들 입니다. footer는 header하고 약간 다른 prescriptive markup convention을 가지고 있습니다. 헤더에서는 링크만 걸면 자동으로 버튼 모양으로 만들어지고 또 2개 까지만 만들수 있고 하는 규칙이 있는데 footer에는 그런 규칙이 없습니다. 그래서 원하시는 디자인으로 꾸미시려면 layout grids 나 다른 custom styles로 만드실 수 있습니다.

bars-themes.html

여기까지 jQuery Mobile Tutorial의 Toolbars 부분을 마치고 다음부터는 Buttons 부분으로 들어갑니다.
이제 본격적으로 jQuery Mobile 프로젝트가 시작할것 같으니까 좀 더 속도를 내서 jQuery Mobile 공식 튜토리얼을 모두 훑어봐야 겠어요.

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  플러그인을 분석했습니다.

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

Parsing a message in JavaScript with JSON

"String.parseJSON(filter)" 메소드를 이용해서 자바스크립트 내에서 JSON으로 메세지를 parse 할 수 있습니다. 이 JSON 메세지는 sting이나 객체로 parse 됩니다. filter 파라미터는 optional 입니다. filter 메세지나 결과를 transform 하는데 사용됩니다. 이 메소드는 자바스크립트의 eval()메소드를 message parse를 위해 내부적으로 사용합니다.

아래 ParseMessageJSON.htm의 전체 예제 코드가 있습니다.

ParseMessageJSON.htm

이 예제를 실행시키려면 json2.js 파일이 필요합니다. 이 파일을 ParseMessageJSON.htm내에 include 해야 합니다. 이 json2.js는 creating message in JavaScript with JSON 강좌에서 사용했던 것과 같은 겁니다.

Output:

======== o ========= o ============ o ============= o =============

지금까지 3개의 article 을 통해서 쿠키, 탬플릿, json 관련된 플러그인 사용법을 알아봤습니다.

jQuery Mobile 샘플을 하나 분석해 보려고 봤더니 이 3개의 플러그인이 있어서 공부해 봤습니다.

아주 도움이 많이 된 것 같네요.

마지막 플러그인인 json2.js 는 이 글가지고 약간 부족할 수도 있을 것 같은데요.

네이버에서 json2.js로 검색하셔서 따로 읽어 보세요.

그럼 다음시간에는 원래 하기로 했던 jQuery Mobile 예제 파일을 분석해 보겠습니다.

jQuery.tmpl( template [, data] [, options] ) Returns: jQuery

Description: Render the specified HTML content as a template, using the specified data.

• jQuery.tmpl( template [, data] [, options] )    

• version added: 1.4.3

  template The HTML markup or text to use as a template.

  data The data to render. This can be any JavaScript type, including Array or Object.

  options An optional map of user-defined key-value pairs. Extends the tmplItem data structure, available to the template during rendering.

  
  

$.tmpl( "<li>${Name}</li>", { "Name" : "John Doe" }).appendTo( "#target" );

$.tmpl( myTemplate, myData ).appendTo( "#target" );

<ul id="movieList"></ul>

<script type="text/javascript">
  var movies = [
      { Name: "The Red Violin", ReleaseYear: "1998" },
      { Name: "Eyes Wide Shut", ReleaseYear: "1999" },
      { Name: "The Inheritance", ReleaseYear: "1976" }
  ];

  var markup = "<li><b>${Name}</b> (${ReleaseYear})</li>";

  // Compile the markup as a named template
  $.template( "movieTemplate", markup );

  // Render the template with the movies data and insert
  // the rendered HTML under the "movieList" element
  $.tmpl( "movieTemplate", movies )
      .appendTo( "#movieList" );
</script>

var markup = "<li><b>${Name}</b> (${ReleaseYear})</li>";

// Compile the markup as a named template
$.template( "movieTemplate", markup );

$.ajax({
  dataType: "jsonp",
  url: moviesServiceUrl,
  jsonp: "$callback",
  success: showMovies
});

// Within the callback, use .tmpl() to render the data.
function showMovies( data ) {
  // Render the template with the "movies" data and insert
  // the rendered HTML under the 'movieList' element
  $.tmpl( "movieTemplate", data )
    .appendTo( "#movieList" );
}

var markup = "<li>Some content: ${$item.myMethod()}.<br/>" 
           + " More content: ${$item.myValue}.</li>";

// Compile the markup as a named template
$.template( "movieTemplate", markup );

// Render the template with the movies data
$.tmpl( "movieTemplate", movies,
  { 
      myValue: "somevalue", 
      myMethod: function() { 
          return "something";
      } 
  } 
).appendTo( "#movieList" );

Additional Notes:

Examples:

<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.min.js"></script>
  <script src="http://ajax.microsoft.com/ajax/jquery.templates/
beta1/jquery.tmpl.min.js"></script>
</head>
<body>
  
<ul id="movieList"></ul>

<script>
  var movies = [
  { Name: "The Red Violin", ReleaseYear: "1998" },
  { Name: "Eyes Wide Shut", ReleaseYear: "1999" },
  { Name: "The Inheritance", ReleaseYear: "1976" }
  ];

var markup = "<li><b>${Name}</b> (${ReleaseYear})</li>";

/* Compile the markup as a named template */
$.template( "movieTemplate", markup );

/* Render the template with the movies data and insert
   the rendered HTML under the "movieList" element */
$.tmpl( "movieTemplate", movies )
  .appendTo( "#movieList" );
</script>

</body>
</html>

Example: Render data from a remote service, using jQuery.tmpl().

<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.min.js"></script>
  <script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/
jquery.tmpl.min.js"></script>
</head>
<body>
  
<button id="cartoonsBtn">Cartoons</button>
<button id="dramaBtn">Drama</button>

<ul id="movieList"></ul>

<script>
var markup = "<li><b>${Name}</b> (${ReleaseYear})</li>";

/* Compile the markup as a named template */
$.template( "movieTemplate", markup );

function getMovies( genre, skip, top ) {
  $.ajax({
    dataType: "jsonp",
    url: "http://odata.netflix.com/Catalog/Genres('" + genre
    + "')/Titles?$format=json&$skip="
    + skip + "&$top=" + top,
    jsonp: "$callback",
    success: function( data ) {
      /* Get the movies array from the data */
      var movies = data.d;

      /* Remove current set of movie template items */
      $( "#movieList" ).empty();

      /* Render the template items for each movie
      and insert the template items into the "movieList" */
      $.tmpl( "movieTemplate", movies )
      .appendTo( "#movieList" );
    }
  });
}

$( "#cartoonsBtn" ).click( function() {
  getMovies( "Cartoons", 0, 6 );
});

$( "#dramaBtn" ).click( function() {
  getMovies( "Drama", 0, 6 );
});

</script>

</body>
</html>

Working with cookies using jQuery and JavaScript

오늘은 jQuery 나 pure javascript 를 통해서 쿠키를 쉽게 사용할 수 있도록 하는 몇가지 테크닉을 다루겠습니다.

What is a cookie?

쿠키는 Hypertext Transfer Protocol (HTTP) requests 와 response 를 포함하고 있는 text string 입니다. 쿠키는 state 정보를 유지하기 위해 사용됩니다. 여러 웹사이트를 돌아다니다가 그 웹사이트에 다시 돌아왔을 때 일관성을 유지시켜주기 위해 사용되는 것이죠. 이 글은 쿠키에 대한 정보를 제공하고 있습니다.

What do i do with cookies

요즘은 주로 쿠키가 유저의 로그인 정보를 저장하기 위해서 가장 많이 쓰이고 있습니다. 이 의미는 유저가 로그인 된 상태로 특정 시간동안 유지하도록 하는 기능을 쿠키가 제공해 주고 있다는 것이죠. 그 이외에도 그 웹사이트에 머물러 있었던 마지막 순간의 정보에 대한 아주 temporary 한 정보들을 저장하기도 합니다.

쿠키는 외부로부터 여러분의 웹사이트에 의해 혹은 유저에 의해 접근해야될 필요가 있는 정보 저장에는 사용하지 않습니다. 각각의 컴퓨터나 브라우저의 local에 쿠키들은 저장됩니다.

How do i actually use them

쿠키는 모든 웹 프로그래밍 언어에 의해 접근될 수 있습니다. 이 의미는 자바스크립트, python, php 그리고 다른 많은 언어들이 쿠키를 다룰 수 있다는 거죠. 첫번째로 쿠키를 다루는 가장 쉬운 방법인 jQuery를 이용한 쿠키 다루기를 설명하겠습니다.

jQuery는 jQuery library와 함꼐 사용하는 plugin을 가지고 있습니다. (이 링크에서 받으실 수 없으시면 아래 파일을 받으세요.)

jquery.cookie.js

이 플러그인을 이용하시면 정말 쉽게 쿠키를 저장하고 또 거기에 접근하실 수가 있습니다. 그럼 쿠키를 저장하고 displaying 하는 부분의 코드를 볼까요.

이제 코드의 중요한 부분을 살펴보죠. 첫번째로 jQuery를 embed 해야죠. 그 다음에 jquery cookie 플러그인을 add 했습니다. 그리고 저 아름다운 jQuery code를 시작합니다.

set cookie 하는 부분은 그냥 보시기만 하셔도 아시겠죠? 딱 한 줄 입니다. 그러면 my_cookie_name이라는 쿠키가 세팅 될 겁니다. 그 값은 value inside of it 이 되겠죠. 

$.cookie() 플러그인에 두개의 파라미터를 pass 했습니다. 이름과 값에는 작은 따옴표나 큰 따옴표를를 붙여야 합니다.

그리고 마지막으로 쿠키를 지우는 것은 쿠키를 저장하는 것과 거의 같습니다.

단지 다른것이 있다면 값에 null 을 넣으시면 됩니다.

Now let’s go more advanced

이제 쿠키를 세팅하고 값을 add 하고 저장된 값을 delete 하는 것 까지 다 했습니다.

이제 쿠키를 특정 시간 동안 저장하는 것 같은 혹은 특정 date 까지 저장하는 방법 같은 것을 알아보겠습니다.

첫번째 코드는 이 쿠키가 10일 이후에 expire 되도록 세팅한 겁니다. 이게 끝입니다. 정말 간단하죠. 세번째 파라미터에 쿠키가 저장 될 path를 넣습니다. 그리고 / 를 넣어서 깔끔하게 정리하시고 다음으로는 expiration days를 넣으시면 됩니다.

두번째 코드는 우선 date 변수를 만듭니다. 이 date 변수에는 현재 날짜가 들어갑니다. 그리고 이것을 특정 JavaScript date 에 expire 되게 쿠키에 세팅할 겁니다. real date를 넣으면 여러분이 그 javascript date를 넣을 때까지는 작동을 하지 않을 겁니다. 자세한 사항은 JavaScript date 에 대한 글을 읽어 보세요.

How to do this with JavaScript

아래에는 일반 자바스크립트에서 쿠키를 다루는 예제입니다.

두개의 함수를 만들었습니다. setCookie와 getCookie 입니다. setCookie에는 두개의 변수를 pass 해야 합니다. key와 value 한 쌍이죠. 위 예제에서는 쿠키의 expire 날을 1년으로 잡았습니다. 물론 여러분이 바꿀 수도 있죠. 위에 javascript date에 대한 링크가 있죠? 거길 참조하세요.

이 글을 읽으시고 쿠키에 대해서 그리고 쿠키를 다루는 법에 대해서 감을 잡으셨기를 바랍니다.

======================================================

위 글은 jQuery Mobile 이 아니라 jQuery 에서 쿠키 관련 플러그인을 사용하는 법을 알려주고 있습니다.

하지만 jQuery Mobile에서도 같은 방법으로 이용하시면 됩니다.

예제를 하나 공부하려고 하는데 거기에 저 플러그인을 사용했길래 먼저 이 플러그인을 한번 훑어 봤습니다.

2. Does CoronaSDK work with the new MacBook Retina?

코로나 SDK는 new retina display 에서 잘 작동을 하지만 low resolution 모드라야 합니다. 이 모드는 현재 daily builds 버전 (2012.865 이후 버전)에서는 세팅돼 있지만 2012.840 버전에서는 여러분이 세팅을 하셔야 합니다.

이 release build 버전을 사용하시고 low resolution으로 모드가 세팅돼 있지 않다면 text가 있어야 할 자리에 black block이 나타나는 것 같은 여러 display 문제들을 보실 수 있을 겁니다.

CoronaSDK에서 이 모드를 세팅하시려면 Finder app을 사용하셔서 CoronaSDK 폴더로 가 주세요. Corona Simulator.app을 마우스 오른쪽 클릭을 하시고 (Corona Terminal 이 아님) Get Info를 선택해 주세요. 그리고 Open in Low Resolution 옵션을 선택해 주시면 됩니다.

3. What build can I use to build for an older iOS (e.g, iOS 3.1.3)?

현재의 release (840) 버전은 iOS 4.3 대 버전만 지원합니다. 그 이유는 애플이 다른 IOS 버전의 지원을 중단했기 때문이죠. 여러분 앱의 최신 CoronaSDK를 필요로 하지 않으면 2012.704b 버전을 다운받아서 사용하세요. 이것은 Daily Build 페이지에 있는데 유료 등록자로 로그인을 해야지 접근 하실 수 있습니다. 이것은 iOS 3.1에서 5.1 버전 까지 지원하는 SDK입니다. 그러니까 iPad Retina 까지 지원되죠. 2012.704a 는 iPad Retina를 지원하지 않습니다.

4. Why don’t I see any errors when I run the Mac Simulator?

시뮬레이터를 돌릴때 터미널에는 에러나 wornings 그리고 print messages들이 보여집니다 윈도우즈에서는 시뮬레이터를 실행하면 터미널이 자동으로 open 됩니다. 맥에서는 Corona Terminal을 따로 오픈해야 합니다. Corona Simulator.app 이 아닙니다. 두 프로그램 모두다 CoronaSDK 폴더에 있습니다. 여러분이 coronaSDK를 인스톨 할 때 그 폴더는 Application 폴더 아래에 위치하게 됐을 겁니다.

여러분이 Corona Terminal을 시작하면 Terminal window가 열리고 Corona Simulator가 시작합니다. Corona Simulator 앱만 running  하는 것은 그냥 앱이 동작하는 것을 보이기만 하고 터미널에 뜨는 정보들이 필요 없는 경우에 유용할 겁니다.

5. What are the keyboard shortcuts for the Simulator?

맥이나 윈도우지 시뮬레이터 모두 다양한 키보드 shortcut들이 있습니다. 여기 제가 찾은 유용한 shortcut들이 있습니다. 윈도우즈에서는 control 키를 누르고 Mac 에서는 command 키를 누르고 아래 키들을 눌러 보세요.

R               Relaunch the simulator with the current project
O               Open an existing project
B               iOS Build window
Shift B         Android Build window
+               Zoom In (makes the "skin" larger)
-               Zoom Out (makes the "skin" smaller)
Left arrow      Rotate the "skin" left
Right arrow     Rotate the "skin" right
Up arrow        Simulate device "shake"
Down arrow      Suspend/Resume simulator

여기까지가 오늘의 질문과 답변들입니다. 유익한 시간이었기를 바랍니다.

Storyboard: Scene Purging vs. Removal

Posted on July 31, 2012. Written by Jonathan Beebe

코로나 SDK 의 storyboard API에서 혼동되는 부분 중 하나가 scene을 purging 하고 removal 하는 겁니다. purging과 removing의 차이점은 무엇일까요? 그리고 scene을 purge 한다는게 무슨 의미죠? 이런것들이 우리가 자주 받는 질문들 중 일 부분입니다.

오늘은 이런 의문점을 깨끗하게 날려드리기 위해 purging과 removal이 되면 scene들 뒷편에선 어떤 일들이 일어나는지에 대한 high-level overview를 알려드리겠습니다. 그리고 몇가지 예제들도 보여드릴거구요.

Memory Consumption

Corona display object가 생성 됐을 때 이 객체는 texture 메모리 (graphics)와 Lua 메모리 (테이블과 변수 같은 데이터)를 차지하게 됩니다. scene 모듈 같은 모듈이 로딩 될 때 이것은 메모리에 저장돼 있는 단순한 테이블입니다. 그래서 좀 더 빠르게 메모리에서 로딩 할 수 가 있습니다. 그렇지만 한번에 메모리에 너무 많은 것들이 있으면 퍼포먼스에 지장을 줄 수 밖에 없겠죠. 이것 때문에 저희는 개발자들이 메모리에 무엇을 남길지 그리고 어떤 것들을 unload 시키거나 freed 시킬지의 여부에 대해서 전적으로 콘트롤 할 수 있도록 하자고 정했습니다. 

이러한 배경을 염두에 두신후 아래 스토리보드 scene들에 서 purging과 removing이 무엇인제에 대한 기본 개요를 보시기 바랍니다.

Purging은 scene에서 display object들만 remove 시키는 겁니다. 그렇게 되면 texture memory는 freeing 되겠죠. 그리고 이 scene이 external module에 의해 represent 되면 이 모듈은 계속 메모리에 남아있는 상태가 될 겁니다. 여러분이 만든 custom 변수들이 모두 메모리에 있게 된다는 겁니다.

scene을 Removing 한다는 것은 display 객체든 루아 객체든 모두 remove 한다는 의미 입니다. 그 결과로 texture 메모리 뿐만이 아니라 루아 메모리도 모두 freed 되게 됩니다.

So why purge at all?

만약에 유저가 나갔다가 다시 돌아올 것으로 예상되는 scene이 있다면 그런데 그 scene이 아주 많은 texture 메모리를 가지고 있다면 이 scene은 purge 시키는 것이 좋을 겁니다. 그러면 다른 scene이 로드될 떄 퍼포먼스에 지장을 주지 않겠죠. (그 모듈-scene-은 계속 메모리에 남아 있는 겁니다.)

예를 들어 action arcade 게임을 만든다고 했을 때, 그 게임은 아주 많은 physics와 아주 빠르게 움직이는 수 많은 객체들을 사용하게 될 겁니다. 두말 할 것도 없이 그 게임 scene은 아주 많은 texture 메모리를 필요로 하게 되죠.

이 game screen 구석에는 pause 버튼이있습니다. 그 버튼을 누르면 pausegame 이 로드 되죠. 유저기 이 scene을 자주 들락거려야 한다면 이 scene을 purge 하는게 훨씬 나을 겁니다. 유저는 이 scene에 다시 돌아올 가능성이 많을 겁니다. 그러니까 다른 scene의 퍼포먼스에  부담을 덜기 위해서 pause를 사용해서 texture 메모리를 절약하고 다시 돌아올 경우에 빨리 로드되게 하기 위해서 루아 객체는 메모리에 그대로 두는 pause가 유용하게 이용될 수 있을 겁니다

Functions for Purging

scene purging을 handle 하는 스토리보드의 function에는 두가지가 있습니다.

• storyboard.purgeScene()
• storyboard.purgeAll()

첫번째 함수는 single argument를 받습니다. sceneName을 받게 되죠. purge 할 특정 scene을 지칭하는 겁니다. purged 될 scene이 external module과 correspond 된다면 이것은 module name이 되겠죠. (.lua 확장자를 뺀 나머지 부분)

이렇게 purging이 되면 해당 scene의 display object들은 destroy 될 겁니다. 더이상 display object들이 화면에 display 될 필요가 없을 떄 사용하는 것이죠. 이 작업을 하기에 가장 알맞는 이벤트는 didExitScene 입니다.

scene이 완전히 screen에서 사라졌을 떄 그 scene을 purge 하는 예제가 아래에 있습니다.

어떤 scene에서 menu.lua로 전환한다고 칩시다. 이 경우 menu.lua로 되돌아 오는 다른 scene들은 여러경우가 있습니다. 이럴 경우 그 이전 scene이 어떤건지 확실히 모를 때 어떻게 이전 scene을 pause 하는지에 대한 예제가 아래에 있습니다.

여러분들은 현재 작동중인 scene을 제외한 모든 scene들을 purge 시키기 위해 storyboard.purgeAll()를 사용하실 수 있습니다.  scene이 purge 될 때는 destroyScene 이벤트가 dispatch 될 겁니다. 그 이벤트를 이용해서 Runtime listener를 remove 한다던가 하는 last minute action들을 처리하실 수 있습니다.

Functions for Removing

scene을 removal 하는 것을 처리하기 위한 스토리 보드 함수에는 두가지가 있습니다. 아래 두 함수중에 하나가 call 되면 해당 scene은 우선 purge 하고 그 다음에 remove 될 겁니다.

• storyboard.removeScene()
• storyboard.removeAll()

첫번째 함수는 single argument를 받습니다. sceneName 인데요 remove 할 scene을 말하는 것이죠. 이 remove 될 scene이 external module 이면 그 모듈 이름이 되겠죠. (.lua 확장자를 제외한 부분)

remove 되기 전에 해당 scene이 purge 되면 destroyScene 이벤트가 해당 scene에 dispatch 될 겁니다.

Automatic Purging

iOS에서는 디폴트로 OS가 Low memory warning을 issue 하면 least-recently-used scene이 자동적으로 purge 됩니다. 이 purge가 자동적으로 이뤄지도록 하고 싶지 않으면 storyboard.disableAutoPurge 프로퍼티를 사용하시면 됩니다.

디폴트 값은 false 입니다. 그러니까 여러분이 true로 세팅하시면 더이상 필요하지 않거나 여러분 앱의 texture memory 소비를 많이 잡아 먹는 scene 이 있으면 여러분이 직접 pause 해 주셔야 합니다. 이 자동 pause 기능은 안드로이드 디바이스에서는 작동되지 않습니다.

만약 매뉴얼 purging 도 원하지 않고 automatic scene purging 도 원하지 않으면 storyboard.purgeOnSceneChange 프로퍼티를 true로 해 놓으세요. 그러면 scene이 바뀔 때마다 전환될 scene을 제외한 모든 scene들이 purge 될 겁니다.

좀 더 자세한 내용은 storyboard.* API documentation을 보세요.