HTML5에서 로컬 DB로 사용가능하며,(웹브라우저일 경우 제약이 각각 있습니다... ) 

CouchDB와 편리하게 서버동기화가 가능하도록 마련되어있습니다...


웹이라는 제약은 물론 있지만, cordova를 통해 앱으로 만들 경우 Plugin으로 그 제약을 풀 수 있다는 장점이 있죠...

(인터페이스는 동일)



기존 HTML5의 로컬DB스펙인 WEBSQL은 예전에 SQLITE기반이었던거 같은데... 

아마도 특정 벤더에 종속되는 것을 막기 위해서 그런지.... 

표준화되면서 폐기되버렸네요... ㅡㅡ;

대신 키/밸류 기반의 IndexedDB라는걸 각 브라우저 벤더사에서 각각 제공해주는 듯합니다.


PouchDB는 이러한 춘추전국시대 같은 다양한 환경에서 최적에 상황에 맞도록 셋팅가능하게 합니다.. 아래링크 참조합니다.

https://pouchdb.com/adapters.html



PouchDB를 위한 12가지 프로팁 (읽어볼만하며, PouchDB의 특징도 알 수 있습니다.)

https://pouchdb.com/2014/06/17/12-pro-tips-for-better-code-with-pouchdb.html



- API 레퍼런스는 여기서 확인이 가능합니다.

https://pouchdb.com/api.html


- ES7일 경우 async , await가 사용가능하나,, ES5는 Promise패턴을 이용해야합니다.


-  Mango Query(cf.Mongo DB) 가 가능한 헬퍼 패키지가 있어 사용할 수 있습니다. 

Vue 인스턴스 생성시 최초에, 객체를 주입하고, 이후 각 콤포넌트에서 this.$bucket 으로 접근하는 방식..

https://www.npmjs.com/package/vue-pouch-db


- ibm watson 데이터랩에서 제공하는 Vuejs / PouchDB 튜터리얼 문서입니다.

https://github.com/ibm-watson-data-lab/shopping-list-vuejs-pouchdb/blob/master/tutorial.md


- MongoDB같은 json 문서 DB입니다.. RDB랑 같이 생각해선 곤란....하구요. MongoDB같은 접근법이 필요합니다.


- 테이블 개념이 없네요.. 이것 때문에 좀 헷갈렸는데. DB가 여러개. 문서속에 하위노드나, attach, 연결정보를 추가하도록 합니다.



Vuejs에서 사용시 아래와 같이 사용했습니다.


- 초기 접근

노드 입력시 guid가 필요해서 vuex에  공용 guid생성 함수를 만들어서 사용했습니다.


최초, 로딩되도록 아래 같이 호출합니다.

created () {
this.load()
},


로드 메소드는 아래와 같이 구성했고..

methods: {
load () {

var vm = this;
this.$bucket.db('vmbook').allDocs({include_docs: true})
.then(function (res) {
vm.groups = res.rows
}).catch(function (err) {
alert(err);
});
},


저장 버튼 눌렀을때 메소드 구현은 아래와 같이 했습니다.

save () {
var vm = this;
this.$bucket.db('vmbook').put({
_id: this.$store.state.global.uuid(),
title: this.regform.group_name, items: []})
.then(function(res) {
vm.load()
vm.show = false
}) .catch(function(err) {
alert(err)
//vm.show = false
})
}
},


삽질이 있었지만.. 잘됩니다.



웹쪽 기술동향을 알 수 있다는 점에서는 흥미롭네요.

+ Recent posts