LeonKim

HTML5 API - Storage

카라크라스 — Tue, 14 Dec 2010 00:09:38 +0900

ThinkFree Show

HTML5 API - Storage

Offline Application Cache

Web Storage

Web SQL Database

Indexed Database

Part I. Offline Application Cache

Part II. Web Storage

Part III. Web SQL Database

Part IV.  Indexed Database

ThinkFree Show

들어가며 . .

Browser Dom Object Model

ThinkFree Show
문서 객체 모델(DOM; Document Object Model)은 객체 지향 모델로써 구조화된 문서를 표현하는 형식이다.

DOM은 플랫폼/언어 중립적으로 구조화된 문서를 표현하는 W3C의 공식 표준이다.

DOM은 또한 W3C가 표준화한 여러 개의 API의 기반이 된다.

DOM 모델의 확인은 Firebug를 이용하여 확인이 가능하다.

ThinkFree Show
Part I. Offline Application Cache

ThinkFree Show
일반적인 Web Application의 동작을 위한 Resource

- css

- image

- javascript

- html

일반적 Online Web Application Server측에 Request and download

Offline에서 정상적으로 동작하는 Web Application

오프라인 브라우징 - 오프라인에서도 사이트에 접근 가능

속도 향상 - 로컬 영역에 저장해둔 리소스는 빠른 속도로 로드됨

서버 부하감소 - 리소스가 변경된 경우에만 다운로드를 시도

캐시 파일 목록을 명시하여 참조

example.manifest

manifest="http://foo.example.com/example.manifest">

manifest 파일에 캐쉬할 파일들의 목록등의 정보를 명시한다.

ThinkFree Show
CACHE MANIFEST

#캐쉬할 파일들

index.html

stylesheet.css

images/logo.png

scripts/main.js

1.맨윗줄은 무조건 Cache Manifest를 명시

2. #은 주석

3. 사이트당 최대 5MB까지 Cache가능

4. manifest에 명시된 파일의 다운로드가 실패할 경우 브라우저는 가장 최근에 성공적으 로 다운로드한 파일을 그대로 사용하며, 실패 이벤트를 발생

좀 더 복잡한 예

ThinkFree Show
CACHE MANIFEST

# v2

# 명시적으로 캐시된 항목

CACHE:

index.html

stylesheet.css

images/logo.png

scripts/main.js

# 사용자가 온라인 상태가 되었을 때 필요한 리소스들

NETWORK:

login.php

/myapi

http://api.twitter.com

# static.html 파일은 main.py 파일에 접근할 수 없을 때 보여짐

FALLBACK:

/main.py /static.html

ThinkFree Show
스크립트로 Cache Control

ThinkFree Show
var appCache = window.applicationCache;

var appCache = window.applicationCache;

appCache.update(); // 사용자의 캐시를 갱신하도록 시도함

...

if (appCache.status == window.applicationCache.UPDATEREADY) {

appCache.swapCache(); // 가져오기에 성공한 경우 새로운 캐시로 교체

}

ThinkFree Show
예 > http://html5.firejune.com/demo/manifest.html

ThinkFree Show
Part II. Web Storage

ThinkFree Show
Web Storage = Client Side Storage = Browser Storage

적은양의 간단한 데이터를 저장하기에 적합한 로컬 저장소

It's Key - Value Base

HTML5 Storage Specification

This specification defines an API for persistent data storage of key-value pair data in Web clients.

W3C : http://dev.w3.org/html5/webstorage/

Mozilla : https://developer.mozilla.org/en/dom/storage

Web Storage 의 구분

LocalStorage

SessionStorage

ThinkFree Show
API : setItem(Key, Value), getItem(Key), removeItem(Key), clear()

LocalStorage

브라우저 종료해도 데이터가 남는다.

ThinkFree Show

키/값 저장

localStorage.setItem( 'gilbird', 2010);

키/값 로드

var year = localStorage.getItem( 'gilbird');

키/값 모두 삭제

localStorage.clear();

SessionStorage

데이터는 윈도우 객체에 저장된다.(따라서, 브라우저 종료와 동시에 X)

ThinkFree Show

키/값 저장

sessionStorage.setItem( 'gilbird', 2010);

키/값 로드

var year = sessionStorage.getItem( 'gilbird');

키/값 모두 삭제

sessionStorage.clear();



ThinkFree Show
Part III. Web SQL Database

ThinkFree Show
Web SQL Database = Client-Side Database = Browser Database

구조적이고 체계화된 관계형 데이터를 대량으로 저장하기에 적합

HTML5 Web Database Specification

This specification defines an API for storing data in databases that can be queried using a variant of SQL.

W3C : http://dev.w3.org/html5/webdatabase/

온/오프라인 여부에 상관없이 사용 가능한, 브라우저에 내장된 Database

장점

저장소에 영구히 보존 할 수 있고, 리소스 점유율이 많은 덩치큰 데이터를 체계적

으로 관리 할 수 있다.

단점

SQL쿼리를 별도로 익혀야하는 단점이 있다.

관계형 데이타베이스의 경우 저장되는 데이터의 스키마의 유연성이 떨어질 수 있고 SQL 이라는 별도의 독립된 언어를 기반으로 하기 때문에 브라우저간 표준화및 호환성에 문제될 소지가 있다

(MS SQL과 오라클이 자체 비표준 SQL을 지원하는 것처럼 변형된 SQL이 발생할 수 있다는 것이다)

(때문에 현재는 Web SQL Database 사양 책정이 중지된 상태로, IndexedDB 스펙이 대안으로 떠오르고 있음)

ThinkFree Show
Transaction

transaction : 읽고, 쓰기

readTransaction : 읽기 전용

데이터베이스 개설(이름, 버전, 설명, 용량) ->

테이블 생성 ->

Insert, Select, Delete등 행위 수행

         - Transaction 안에 쿼리를 실행

소스예

<span style="font-size: 10pt; ">ThinkFree Show</span>
//DB 개설

this.db = window.openDatabase("raeok", "1.0", "테스트용DB", 1024 * 1024);  //Field 변수 db에 database 객체 할당

//테이블 생성

this.db.transaction(function(tx) {

tx.executeSql("create table Test(name,age)");   //name, age칼럼을 갖는 Table을 생성

});

//Select 구문 예

this.db.transaction(function(tx) {

tx.executeSql("select * from Test", [],function(tx, result){

// It's call back method . . .

// do something.

}

});

//Delete 구문 예

this.db.transaction(function(tx) {

tx.executeSql("delete from Test", [],

function() {

alert("All of list are cleared.");

});

});

ThinkFree Show
Part IV. Indexed Database

<span style="font-size: 10pt; ">ThinkFree Show</span>
HTML5 IndexedDB Specification

This document defines APIs for a database of records holding simple values and hierarchical objects. Each record consists of a key and some value. Moreover, the database maintains indexes over records it stores. An application developer directly uses an API to locate records either by their key or by using an index. A query language can be layered on this API. An indexed database can be implemented using a persistent B-tree data structure.

w3c : http://www.w3.org/TR/IndexedDB/

mozilla : https://developer.mozilla.org/en/IndexedDB

Web Database에 비하여  Indexed DB는 스크립트에서 데이터 베이스를 다루기에 좀 더 최적화된 인터페이스를 제공한다.

에서 사용할 수 있는 클라이언트 사이드 RDMBS인데, 이를 대체할 HTML5 의 대세는, Indexed Database API

FireFox 4.0에서 지원할 예정 (하지만 아직 FireFox4 Beta6에서도 지원되지 않고 있음 . .)

ThinkFree Show
var db = indexedDB.open('books', 'Book store', false);

if (db.version !== '1.0') {

  var olddb = indexedDB.open('books', 'Book store');

  olddb.createObjectStore('books', 'isbn');

  olddb.createIndex('BookAuthor', 'books', 'author', false);

  olddb.setVersion("1.0");

}

// db.version === "1.0";

var index = db.openIndex('BookAuthor');

var matching = index.get('fred');

if (matching)

  report(matching.isbn, matching.name, matching.author);

else

  report(null);

ThinkFree Show

'Web' 카테고리의 다른 글

Sencha Touch (0)	2010/12/31
HTML5 - Web SQL Database (0)	2010/12/14
HTML5 - Web Storage (0)	2010/12/14
HTML5 API - Storage (0)	2010/12/14
ant에 dojo build task 삽입하기 (0)	2010/08/17
CSS Reference (0)	2009/12/15

jQuery Mobile에 ListView활용하기.

카라크라스 — Sun, 12 Dec 2010 04:08:22 +0900

jQuery Mobile에 ListView활용하기.

jQuery Mobile은 다양한 형태의 ListView들을 지원한다.

Static한 ListView를 정의할때 단순히 아래와 같이 구성하면된다.

			<ul data-role="listview" data-theme="d" data-inset="true">

				<li>Acura</li>

				<li>Audi</li>

				<li>BMW</li>

				<li>Cadillac</li>

				<li>Chrysler</li>

				<li>Dodge</li>

				<li>Ferrari</li>

			</ul>




동적으로 리스트를 추가하거나,삭제해 보자.


위의 예를 기반으로 리스트 내용을 모두 지우고 새로운 리스트를 추가해 보자.

jQuery("ul li").remove(); //ul하위 모든 ui를 삭제한다.


var ulNode = jQuery("ul"); //ul 노드를 가져온다.


ulNode.append("<li>새로운 리스트</li>"); //ul노드에 샤로은 li노드를 추가한다.


ulNode.listview("refresh"); //refresh 메소드를 실행한다.


jQuery Mobile 내부를 살펴보니, jQuery ui 의 영향을 받아, 

jQuery.widget 팩토리를 이용하여 컴포넌트들이 개발되어져 있었다.



예를 들면 아래 navbar같은 녀석(간단한 녀석으로 뽑아보았다 +_+)


더보기
$.widget( "mobile.navbar", $.mobile.widget, {

	options: {

		iconpos: 'top',

		grid: null

	},

	_create: function(){

		var $navbar = this.element,

			$navbtns = $navbar.find("a"),

			iconpos = $navbtns.filter('[data-icon]').length ? this.options.iconpos : undefined;

		

		$navbar

			.addClass('ui-navbar')

			.attr("role","navigation")

			.find("ul")

				.grid({grid: this.options.grid });		

		

		if( !iconpos ){ 

			$navbar.addClass("ui-navbar-noicons");

		}

		

		$navbtns

			.buttonMarkup({

				corners:	false, 

				shadow:		false, 

				iconpos:	iconpos

			});

		

		$navbar.delegate("a", "click",function(event){

			$navbtns.removeClass("ui-btn-active");

		});	

	}

});





jQuery Mobile API가 좀 부실하니 . . .

요런 번거로움이 . . . . 

(* 참고로 jQuery Mobile내부 인터페이에 "_ 언더바"로 시작하는 메소드들은 private 메소드로서 접근이

불가능하다. 이 부분은 $.widget.bridge의 구조를 살펴보세용. 

참고 : http://www.erichynds.com/jquery/using-jquery-ui-widget-factory-bridge/)

'MobileApp' 카테고리의 다른 글

jQuery Mobile 페이지 구조 (0)	2011/01/09
jQuery Mobile 자주쓰는 Event와 API 몇개 (0)	2010/12/29
jQuery Mobile에 ListView활용하기. (0)	2010/12/12
Phonegap API를 간단히 살펴보자 (0)	2010/11/10
PhoneGap + jQueryMobile을 이용한 WebApp개발 -Footer Navbar (0)	2010/11/10
PhoneGap + jQueryMobile을 이용한 WebApp개발 -툴바 (0)	2010/11/09

소셜커머스 . .

카라크라스 — Mon, 29 Nov 2010 15:47:59 +0900

요즘 다양한 소셜커머스 사이트들이 생겻다 . .

때문에 부정적인 기사와 뉴스 보도들이 줄을 잇고 있다 . .

하지만 . . . 나는 티켓몬스터만을 이용하기 때문에 . . . 별로 그런 뉴스들이 눈에 들어오지는 않는다 +_+a

나름 다른 사이트에 비해 신뢰도가 있다 . . .

한 7 ~ 8번 정도 구매한거 같은데 . . 아직까지 실망했던적이 한번도 없다 . ㅋ

갤텝을 주는 이벤트를 한다는데 +_+a

아 갖고 싶구먼 . .

미래를 바꿀 "식스 센스", 웨어러블 장비를 시연 . .

카라크라스 — Mon, 15 Nov 2010 01:43:59 +0900

http://www.ted.com/talks/lang/eng/pattie_maes_demos_the_sixth_sense.html

Greatest Hits of TED Videos

url : http://www.fastcompany.com/magazine/148/greatest-hits-of-ted-videos.html

2위에 랭크되어있는 2009년 1월 wearable interface의 시연 강연이다.

지금의 스마트폰들은 미래에 Wearable interface (또는 그와 유사한 . . . . 인체 이식 컴퓨팅?ㅋ)로 확장되어 무수히 많은

혁신을 일으킬것이리라 . .

http://www.6thsensetechnologies.com/ 에서 좀 더 다양한 정보를 접할수 있다 . .

역시 . . MIT Media Lab . .

세상은 정말 무서운 속도로 . . .
변화하고 있다 . . .

'Ma' 카테고리의 다른 글

App Store for Mac (0)	2011/01/07
One time bestseller (0)	2010/12/14
미래를 바꿀 "식스 센스", 웨어러블 장비를 시연 . . (0)	2010/11/15
event (0)	2010/09/30
새 라인업 (0)	2010/08/27
싱가폴여행 (0)	2010/08/27

Phonegap API를 간단히 살펴보자

카라크라스 — Wed, 10 Nov 2010 03:24:08 +0900

사이트 : http://docs.phonegap.com/

Phonegap.js 는 Javascript 객체를 이용하여, Device에 접근이 가능도록 다양한 API를 제공한다.

따라서 Web App을 구성하여, Device 자원에 직접 접근이 가능하다.

카테고리는 아래와 같다.

Keyword Index

Accelerometer : 디바이스 모션 센서 접근(현재 가속도 정보등등)

Captures device motion in the x, y, and z direction.

Camera : 디바이스의 기본 카메라 어플리케이션에 접근

The camera object provides access to the device's default camera application.

Contacts : 디바이스의 연락처 데이터 베이스에 접근(연락처 만들기, 검색등등)

The contacts object provides access to the device contacts database.

Device : 디바이스 H/W S/W 정보에 접근 (디바이스명, 플랫폼버전등등)

Events : 폰갭이 모두 로드 되었을때, 딱 한번 deviceready 메소드를 수행한다. (엔트리 포인트 . .)

Geolocation : 디바이스 GPS센서에 접근 (현재 위치등등)

Network : 디바이스의 cellular, wifi 정보 접근 (호스트 네임등등)

Notification : Visual, audible, and tactile device notifications. (alert, confirm, beep, vibrate등등을 발생 시키는 . .)

jQuery Mobile(jqTouch등등)을 이용하여 이쁘게 UI 구성하고, Phonegap API를 이용하여 어플을 만들어보자~*

'MobileApp' 카테고리의 다른 글

jQuery Mobile 자주쓰는 Event와 API 몇개 (0)	2010/12/29
jQuery Mobile에 ListView활용하기. (0)	2010/12/12
Phonegap API를 간단히 살펴보자 (0)	2010/11/10
PhoneGap + jQueryMobile을 이용한 WebApp개발 -Footer Navbar (0)	2010/11/10
PhoneGap + jQueryMobile을 이용한 WebApp개발 -툴바 (0)	2010/11/09
PhoneGap + jQueryMobile을 이용한 WebApp개발 -멀티 페이지 전환하기 (0)	2010/11/08

PhoneGap + jQueryMobile을 이용한 WebApp개발 -Footer Navbar

카라크라스 — Wed, 10 Nov 2010 03:08:52 +0900

PhoneGap + jQueryMobile을 이용한 WebApp개발 -Footer Navbar

어플리케이션 개발에 있어 아쥬 유용하게 쓰일 Footer Navigation Bar에 대해서 살펴보자.

http://jquerymobile.com/demos/1.0a1/#docs/toolbars/footer-persist-a.html 에서 참고 및 활용이 가능하다.

Footer Persist Navigation Bar

계속 유지되는 Footer 네비게이션 바의 구현 방법을 알아보자

페이지의 내용만 변경되고 Footer의 네비게이터는 변하지 않았으면 할때 . .

보통 이런 모습은 많은 얩들에서 볼수 있다.

아주 간단하게 구현이 가능한데,

예를 들어 4개의 페이지를 위한 Footer 네비게이터가 필요하다면

>>Search페이지를 위한 네비게이터 코드

<ul>

<li><a class="ui-btn-active">Search</a></li>

<li><a>Items</a></li>

</ul>

</div>

</div>

>>Items 페이지를 위한 네비게이터 코드 (모두 동일한데, 선택된 버튼의 class만 다름을 알수 있따)

<ul>

<li><a >Search</a></li>

<li><a class="ui-btn-active">Items</a></li>

</ul>

</div>

</div>

위 Footer를 동일한 data-id로 유지하면서, 선택된 페이지에 맞는 버튼의 class만

ui-btn-active로 설정해 주면된다.

(똑같은 네벌의Footer에 각 버튼의 class만 변경해서 네비게이터가 유지되는것 처럼 보이게 . .)

'MobileApp' 카테고리의 다른 글

jQuery Mobile에 ListView활용하기. (0)	2010/12/12
Phonegap API를 간단히 살펴보자 (0)	2010/11/10
PhoneGap + jQueryMobile을 이용한 WebApp개발 -Footer Navbar (0)	2010/11/10
PhoneGap + jQueryMobile을 이용한 WebApp개발 -툴바 (0)	2010/11/09
PhoneGap + jQueryMobile을 이용한 WebApp개발 -멀티 페이지 전환하기 (0)	2010/11/08
PhoneGap을 이용한 WebApp개발 - jQueryMobile 이용하기 (0)	2010/11/08

PhoneGap + jQueryMobile을 이용한 WebApp개발 -툴바

카라크라스 — Tue, 09 Nov 2010 02:12:57 +0900

PhoneGap + jQueryMobile을 이용한 WebApp개발 -툴바

기본 페이지의 구조는 아래와 같다.

<div data-role="header" data-position="fixed"> //HEADER

<h1>Header</h1>

</div>

<p><a href="#slidePage" data-transition="slide">Slide Page</a></p>

</div> //FOOTER

<h1>Fixed toolbars</h1>

</div>

</div>

Header

Content

Footer

와 같은 삼단 구조로 이루어져 있다.

아이폰 어플리케이션을 만지다 보면,

Header, Footer에 위치하는 툴바는 결국 Header 와 Footer에 위치할 툴바를 어떠한 방식으로 배치 시킬지..

- inline
- fixed
- fullScreen

data-position="inline"

data-position="fixed"

data-fullscreen="true"

위 세가지 옵션을 이용하여 Header와 Footer를 위치 시킨다.

헤더에 버튼등을 위치 시키는 방법

버튼의 종류는 jQuery Mobile에서 좀 더 알아보도록 하자.

<div data-role="header" data-position="fixed">

<a href="#" data-icon="delete_c">Edit</a> //Header Toolbar에 왼쪽 버튼

<h1>Header</h1>

<a href="#" data-icon="info" data-iconpos="right">Info</a> // 오른쪽 버튼

</div>

Header bar에 Back button이 자동으로 페이지 이동시 생기는데 요거를 방지해주기 위한 방법

<div data-role="header" data-theme="c" data-nobackbtn="true">

'MobileApp' 카테고리의 다른 글

Phonegap API를 간단히 살펴보자 (0)	2010/11/10
PhoneGap + jQueryMobile을 이용한 WebApp개발 -Footer Navbar (0)	2010/11/10
PhoneGap + jQueryMobile을 이용한 WebApp개발 -툴바 (0)	2010/11/09
PhoneGap + jQueryMobile을 이용한 WebApp개발 -멀티 페이지 전환하기 (0)	2010/11/08
PhoneGap을 이용한 WebApp개발 - jQueryMobile 이용하기 (0)	2010/11/08
Phonegap을 이용한 App 개발 - 준비 (0)	2010/11/02

PhoneGap + jQueryMobile을 이용한 WebApp개발 -멀티 페이지 전환하기

카라크라스 — Mon, 08 Nov 2010 01:59:14 +0900

여러개의 페이지를 유저 액션에 맞게 전환도록 해보자.

아래 소스는 5개 페이지 요소가 존재하는 소스다.
data-role=page로 구분된 페이지들간 전환은 단순히 link로서 쉽게 전환된다.

아래 소스와 같이 data-transition의 내용에 따라 전환 효과가 달라진다.
slide, slideup, slidedown, pop, fade등이 있다.

전체 소스는 아래와 같다.

'MobileApp' 카테고리의 다른 글

PhoneGap + jQueryMobile을 이용한 WebApp개발 -Footer Navbar (0)	2010/11/10
PhoneGap + jQueryMobile을 이용한 WebApp개발 -툴바 (0)	2010/11/09
PhoneGap + jQueryMobile을 이용한 WebApp개발 -멀티 페이지 전환하기 (0)	2010/11/08
PhoneGap을 이용한 WebApp개발 - jQueryMobile 이용하기 (0)	2010/11/08
Phonegap을 이용한 App 개발 - 준비 (0)	2010/11/02
plist 파일 내용을 로드하거나, 저장 (0)	2010/09/14

PhoneGap을 이용한 WebApp개발 - jQueryMobile 이용하기

카라크라스 — Mon, 08 Nov 2010 00:41:01 +0900

jQueryMobile 이용하기 - 1. 페이지에 로드하여 샘플 패이지 만들어보기~*

PhoneGap 플러그인을 정상적으로 XCode에 추가 완료하였다면,
PhoneGap 프로젝트를 일단 생성한다.

WebApp을 위한 다양한 라이브러리들이 존재하는데,
간단히 조사해본 결과 jQuery기반의 두가지 라이브러리가 존재한다.

jqTouch : http://jqtouch.com/

jQuery Mobile : http://jquerymobile.com/

jQuery Mobile을 사용하여 간단한 WebApp을 만들어보자.

Page에 js 소스 import하기 방법은 두가지가 있다.
1. CDN에서 로드하기
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" />
<script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>

2. 내 프로젝트에 포함하여 로드하기
a. www폴더에 lib폴더를 만들어둔다.
b. 최신 jQuery Core 다운하여, www /lib 에 복사한다.
c. jQuery Mobile 사이트에서 jQuery Mobile js와 css를 다운하여, www/lib에 복사한다.
d. 페이지에 로드한다.
<link rel="stylesheet" href="./lib/jquery.mobile-1.0a1.css" />
<script type="text/javascript" charset="utf-8" src="./lib/jquery-1.4.3.js"></script>
<script type="text/javascript" charset="utf-8" src="./lib/jquery.mobile-1.0a1.js"></script>

나는 이외에도 Class 기반으로 좀 더 깔끔한 코드 진행을 위하여 classBuilder라는 플러그인을 확장 사용하기 위해
jquery.classbuilder 플러그인을 추가로 확장하였다.
(class builder에 관한 정보 : http://plugins.jquery.com/project/classBuilder )

<script type="text/javascript" charset="utf-8" src="./lib/jquery.classbuilder.js"></script>

e. 테스트 페이지 구성해보기
전체소스

'MobileApp' 카테고리의 다른 글

PhoneGap + jQueryMobile을 이용한 WebApp개발 -툴바 (0)	2010/11/09
PhoneGap + jQueryMobile을 이용한 WebApp개발 -멀티 페이지 전환하기 (0)	2010/11/08
PhoneGap을 이용한 WebApp개발 - jQueryMobile 이용하기 (0)	2010/11/08
Phonegap을 이용한 App 개발 - 준비 (0)	2010/11/02
plist 파일 내용을 로드하거나, 저장 (0)	2010/09/14
아이폰-기본적인 상호작용 다루기 정리 (0)	2010/04/21

magic mouse 매직 마우스 설정

카라크라스 — Wed, 18 Aug 2010 16:27:29 +0900

http://magicprefs.com/

매직 마우스를 삿는데, 기존 마이티 마우스에 스크롤 클릭을 Expose all Window 기능과 매핑하여 사용했었다.

그런데 매직 마우스는 기본 설정으로 Expose를 매핑할 수 없었다.

구글링을 통해 좋은 팁을 발견했다.

http://magicprefs.com/
= > http://magicprefs.com/MagicPrefs.app.zip

magicprefs를 설치하면 아래와 같은 환경설정 창을 통하여 다양한 옵션이 매핑 가능하다.
Click & Tabs, Swipes, Drag, Pinch등을 이용하여 가능~*

'Ma' 카테고리의 다른 글

새 라인업 (0)	2010/08/27
싱가폴여행 (0)	2010/08/27
magic mouse 매직 마우스 설정 (0)	2010/08/18
컴퓨터를 바꿧다. (0)	2010/08/16
어느덧.. (0)	2010/07/12
"눈이 녹으면 흰 빛은 어디로 가는가?" (0)	2010/01/08