정보공간_1

[2기 부산 노형식] DB설치 없이 Web 상에서 Web SQL 사용하기 본문

IT 놀이터/Elite Member Tech & Talk

[2기 부산 노형식] DB설치 없이 Web 상에서 Web SQL 사용하기

알 수 없는 사용자 2012. 10. 17. 09:38


---------------------------------------------------------------------------

  반갑습니다! 오늘은 웹앱과 하이브리드 앱을 만드시는 분들에게 유용한 팁이 될 Web SQL에 대해서 소개 하는 시간을 가지도록 하겠습니다. 제가 지금까지 포스팅했던 jQuery와 jQuery Mobile을 통해서 웹앱에 대한 기초 개발을 할 수 있게 소개를 드렸습니다. 하지만 웹의 특성상 데이터를 저장 할 수 있는 방법이 매우 제약적입니다. 그래서 서버를 이용해서 MySql, MsSql, Oracle과 같은 DB를 사용하곤 하는데 웹앱에서 이러한 방법을 사용할려면 서버 측 DB와의 연동도 필요합니다. 웹앱을 구현 하실 때 간단한 메모장과 같이 크게 보안이 필요 없는 데이터는 Web SQL를 통해서 처리하시면 효율적인 웹앱 개발이 가능 하실 거라 생각듭니다.


1. Web SQL이 무엇?

  Web SQL은 RDB의 형태로 쿼리 구문을 통해 데이터를 효율적으로 저장하는 Local DB 입니다. Android 플랫폼에서 개발을 해보신 분들은 잘 알고 계시는 SQLite과 같은 역할을 한다고 보시면 됩니다. 실제로도 SQLite 의 엔진을 가지고 개발되었다고 하니 SQLite 를 써보신 분들은 쉽게 적응 하시리라 봅니다. 웹은 서버와 클라이언트(브라우저)로 구성되어 있는데 여기서에서 Local DB는 바로 브라우저를 뜻합니다. 브라우저 자체에 Web SQL이 사용된다고 보시면 됩니다. 그렇기 때문에 서버에 있는 DB가 서버 사이드 언어인 php나 jsp를 사용했다면 브라우저에 사용되는 Web SQL은 당연히 클라이언트 언어인 javascript를 이용합니다. 즉 한줄로 정리 하자면 javascript를 이용해서 쿼리문을 날리고 데이터를 브라우저 영역에 저장하는 Local DB라고 쉬울 것 같습니다. 




2. Web SQL의 특징

  Web SQL은 특징은 아래와 같습니다.

① Web SQL은 모바일 브라우저에 대해 강하다.

거의 대부분의 모바일 브라우저에 대해 지원 하며 일반적인 Web 보다 오히려 모바일 쪽에 강화된 모습을 보입니다. 크로스브라우징 이슈를 잘 다루고 있는 canIuse 사이트에서 보면 익스플로러 및 파이어폭스를 제외한 모든 브라우저에서 Web SQL을 지원하는 것을 볼 수 있습니다. (사이트 참조: 브라우저 별 Web SQL 지원 여부)
Web SQL이 블랙베리, iOS, Android등 모바일 브라우저에 대한 지원이 강하기 때문에 웹앱을 제작하시는 분들에게는 편리하게 사용 하실 수 있습니다.

② Web SQL은 기존의 DB와 같은 쿼리문을 사용 한다. 

대부분의 개발자 분들이 DB를 직접 사용해 보거나 학습 해 본 경험이 있으실 텐데 Web SQL은 웹앱 적용에 있어서도 별도의 학습 없이 이용하실 수 있습니다. javascript를 이용해서 쿼리를 던지거나 DB에 접속하는 부분을 제외 하면 기존의 SQL과 같은 사용성을 보장합니다.


③ 편리하지만 보안성에 취약 한 점은 유의 해야 합니다.

Web SQL은 클라이언트 사이드 DB 입니다. 앞서 설명 드린대로 브라우저 영역에서 저장되기 때문에 보안이 필요한 아이디, 비밀번호 인증이나 보안이 필요한 데이터를 저장 할 때는 취약하다고 볼 수 있습니다. 그래서 웹앱으로 만들때도 메모장이나 일정관리 웹 어플리케이션을 작성 하실 때 사용 하는 것이 적합합니다. 


3. Web SQL의 사용 방법

  그럼 본격적으로 Web SQL의 사용에 대해서 이야기 하도록 하겠습니다. 위에서 말씀 드린 것처럼 javascript로 이루어져 있기 때문에 <head>태그의 하위인 <script> 태그 안에 입력하도록 하겠습니다. Web SQL를 이용하기 위해서 별도의 외부 파일을 include 하는 경우 없이 Web SQL를 이용하는 브라우저에서만 준비해주시면 됩니다. 이번 강의에서는 구글의 크롬 브라우저를 이용해서 포스팅 하도록 하겠습니다. DB에 대한 기본적인 이해를 하고 계신다고 가정하고 DB 구조 및 테이블, 필드, 레코드에 관한 개념 설명을 생략하도록 하겠습니다.


먼저 Web SQL을 이용하기 위한 DB를 생성해보도록 하겠습니다. openDatabase 함수를 이용하여 DB를 생성하고 매개변수를 통해 정보를 전달합니다. open이라고 하면 이미 생성되어 있는 DB를 불러온다고 생각하실 수 있는데 Open을 했는데 생성된 DB가 없어서 만들겠다 라는 의미로 보셔도 됩니다. 실제로 이렇게 쓰시면 DB가 없는 경우에는 생성이 되고 있는 경우에는 불러오게 기능을 하게 됩니다.

<script>
var db = openDatabase('bssm', '1.0', 'Samsung Software membership', 5*1024*1024);
</script>

var db를 통해 db 변수에 담아준 것은 차후에 쿼리 구문을 통해 접속을 해야 하기 때문에 미리 설정해둔 것입니다. 간단히 openDatabase 함수의 매개 변수에 대해 설명을 드리고 넘어가도록 하겠습니다. openDatabase(DB명, DB버전, DB설명, DB크기)와 같이 설정 되어 있습니다. 마지막의 매개변수는 생략 가능하지만 function 이름을 적어주시면 콜백 함수의 역할로 사용 할 수 있습니다. 즉 DB생성이 끝난 후 실행 할 함수 지정이라고 생각하시면 됩니다.


그럼 생성한 DB에 정보를 담을 수 있는 테이블(Table)을 제작 해보도록 하겠습니다. 실습을 위해서 메모장 정보를 담을 테이블을 제작 할 것이며 구조는 다음과 같습니다.


< Memo Table >

memo_text (메모 내용)

 memo_time (메모 시간)


이 구조를 DDL언어인 Create문을 통해 생성해보도록 하겠습니다. Web SQL에서 쿼리문을 실행하기 위해서는 transaction 이라는 함수를 사용 하게 됩니다. 앞서 지정한 db변수를 통해 쿼리문을 날려보도록 하겠습니다.

var db = openDatabase('bssm', '1.0', 'Samsung Software membership', 5*1024*1024);
db.transaction(function(tx){
    tx.executeSql("create table memo(memo_text,write_date)");
});

이렇게 실행하시면 DB 및 테이블이 생성되는 것을 확인 하실 수 있습니다. executeSql안에 있는 구문은 기존의 SQL 쿼리와 마찬가지로 쓰시면 됩니다. Web SQL 영역을 확인하기 위해서 크롬에서는 요소 검사라는 기능을 제공합니다. 

검사할 페이지 오른쪽 버튼 클릭 -> 요소 검사(N) ->
Resources -> Web SQL 순으로 찾아 오시면 됩니다.


크롬 브라우저에서 확인 한 결과 DB 및 테이블이 생성 된 것을 볼 수 있습니다. 그럼 javascript 단에서 직접 데이터를 입력 해보도록 하겠습니다. 


db.transaction(function(tx){
     tx.executeSql('INSERT INTO memo(memo_text,write_date) VALUES( ?, ? )', [ '안녕하세요' , '2012년 10월 16일' ] );
});

마찬가지로 transaction을 이용해서 쿼리를 날려줍니다. 


데이터가 정확하게 들어간 것을 확인 하실 수 있습니다. 데이터 정보를 가져 오는 select 쿼리 구문도 마찬가지로 이용 가능합니다. 


db.transaction(function(tx){
     tx.executeSql('SELECT * FROM memo', [ ] , function ( tx, results) {  
     for ( var i = 0 ; i < results.rows.length ; i++) {

    document.write('메모내용:'+results.rows.item(i).memo_text+'메모 시간'+               results.rows.item(i).write_date+'<br>');
}

});

 });

위 코드는 document.write를 통해서 화면에 표시한 코드 입니다. 그럼 다음과 같이 데이터가 나타 나게 됩니다.

위 그림을 보면 저장 된 DB가 화면에 나타난 것을 볼 수 있습니다. 지금까지 배운 내용을 응용하면 얼마든지 데이터를 넣고 가져오고 자유롭게 쓸 수 있습니다. 다만 아쉬운 점은 SQL 관리 툴이 따로 없기 때문에 페이지 자체에서 DB값을 변경 하는 것을 만들거나 DB를 초기화 하는 방법(브라우저 초기화)를 통해서 관리를 해야하는 불편한 점이 있습니다. 


4. 마치며

이번 포스팅에서는 Web SQL에 대한 소개와 개념 그리고 사용 방법에 대한 예제를 올려 보았습니다. 다음 시간에는 이번 포스팅과 연계를 하여서 웹 기반으로 Web SQL를 사용한 프로그램을 하나 만들어 보도록 하겠습니다. 항상 섹멤 블로깅을 하면서 웹의 최신동향과 신 기술을 올려야 겠다고 생각을 했는데 스스로도 공부를 하면서 포스팅을 하다 보니 부족한 점이 많이 보입니다. 또 재미있는 웹 정보와 함께 포스팅 하도록 하겠습니다. 지금까지 포스팅을 읽어 주셔서 정말 감사합니다. 






'IT 놀이터 > Elite Member Tech & Talk' 카테고리의 다른 글

[2기 부산 최은진] 당신의 스마트폰이 Wi-Fi에 접속하기 까지  (1) 2012.10.19
[2기 전주 심경원] Cortex - M3 동작 원리 및 개발 TIP  (0) 2012.10.18
[2기 대구 최진원] Constructor & Destructor  (0) 2012.10.17
[2기 부산 이환승]Django를 이용한 Google App Engine 개발. -2-  (0) 2012.10.16
[2기 대전 김호원] Concerto MCU 3.클럭 설정과 GPIO  (1) 2012.10.16
'IT 놀이터/Elite Member Tech & Talk' Related Articles more