[Till60] Prototype 개발을 위한 SessionDB - Web Storage를 이용한 간이 DB

SessionDB 개발 (Web Storage를 이용한 간이 DB)

원래는 이번 주에 Till60의 Prototype을 개발해서 전체적인 흐름을 한 번  짚어볼 예정이었다. 항상 구체적인 무엇인가로부터 출발하는 것이 

보다 명확한 진행을 가능학 해준다고 믿고 있는 나로서는 Prototype 개발은 꽤나 중요한 과정이다.

그런데 어느정도 동작 가능한 Prototype을 개발하려 했더니 아무래도 데이터 처리를 위한 준비가 번거로웠다. 물론 H2 Database같은 

In-memory db가 지원되어 간편하게 사용할 수 있지만 Prototype 개발에는 그조차 사치로 여겨졌다. 좀더 간편하게 데이터 흐름까지

짚어볼 수는 없을까?

곰곰이 생각을 하다가 sessionStorage를 이용해보는 것은 어떨까 하는데 생각이 미쳤다. 많은 제약이 있기는 하지만 개인 프로젝트의

Prototype을 만드는 정도에는 충분히 역할 할 것 같았다. 기왕 생각이 여기에 미친 바에는 차라리 제대로 기능을 만들어보자고 결심하고 

이틀간 열심히 지지고 볶아 sessionStorage와 localStorage를 DB처럼 사용할 수 있는 javascript 모듈과 AdminLTE UI 라이브러리를

이용해 Admin 화면까지 만들어보았다.

시스템에 대한 자세한 내용은 링크로 대신하고 이 글에서는 간단하게 화면 구성과 사용법을 적어보고자 한다.

소스코드 : https://github.com/mazdah/SessionDB

간단한 소개

앞서 말한대로 이 툴은 sessionStorage와 localStorage를 DB 처럼 사용할 수 있게 만든 툴이다. 가장 큰 장점이라면 아무런 설정 없이

바로 DB  처럼 사용 가능하며 단 하나의 파일로 CRUD의 처리를 모두구현할 수 있다는 점, 그리고 네트워크 연결 없이도 로컬에서 DB와 유사한

기능을 사용할 수 있어 프로젝트 초기 아무런 세팅도 안되어 있어 멍청한깡통 PC가 되버린 개발 PC에서도 충분히 흐름을 짚어볼 수 있다는 

점이 장점이라고 할 수 있을 것이다. 그리고 기본 javascript로 구현되어있어다른 javascript 라이브러리도 필요가 없다. 다만 Admin화면을 

위해서는 JQuery와 Bootstrap이 필요하다.

다만 Web Storage 기반인만큼 RDBMS보다는 NoSQL에 가깝고 데이터를 원격으로 공유할 수 없다는 점 등은 단점이 될 것이다.

하지만 데이터 공유 문제는 Export/Import 기능으로 어느 정도 만회가 될 수 있을 듯하다.

기능 설명

일단 초기 화면은 다음과 같다. Dashboard에서는 sessionStorage와 ocalStorage에 생성된 테이블의 갯수와 목록, 그리고 각 테이블에

생성된 데이터의 갯수가 표시된다.

좌측의 메뉴를 보면 가장 상단에는 sessionStorage와 localStorage를 선택하는 select 컨트롤이 있다. 이후 작업은 여기서 선택한 

storage에서 일어나게 된다.

다음은 앞서 본 대시보드로 이동하는 메뉴이며 3번째 메뉴는 생성된 테이블 목록을 보여주는 메뉴이다. 각 테이블 이름을 클릭하면 해당 

테이블에 대한 작업을 할 수 있는 화면으로 이동한다.

다음은 Create Table 버튼으로 이 버튼을 누르면 테이블 생성 화면으로 이동한다. 마지막으로 sessionStorage를 주로 이용하게 되므로 

Admin 화면에서 바로 테스트용 페이지로 이동 가능하도록 페이지 이동 기능을 추가하였다. Input 박스에 이동할 페이지 경로를 입력하고 

Go 버튼을 클릭하면 현재 윈도우에서 해당 페이지로 이동하게 된다.

먼저 Create Table 버튼을 클릭하여 테이블을 생성해보자. 테이블 생성은 매우 간단하며 테이블 이름을 입력한 후 Create Table 버튼을 

클릭하면 테이블이 생성된다. 물론 앞서 말한 것처럼 좌측 상단에 선택한 storage 영역에 테이블이 생성된다. 테이블은 아주 간단하게

 {“table”:[]}의 구조로 만들어지며 앞으로 table을 Key로 하는 배열 영역에 데이터들이 저장된다.

테이블을 생성했으니 이제 데이터를 insert 해보자. SessionDB는 스키마가 없는 JSON 기반의 DB이다. 따라서 테이블 생성시에는

아무런 구조 없이 그냥 빈 배열 하나가 만들어진다. 따라서 최초에 데이터를 입력할 때는 아래 그림과 같이 JSON 포맷으로 문자열을 

입력해주어야 한다.

아래와 같이 입력되었다.

하지만 한 번 데이터가 들어간 이후에는 입력된 데이터의 key를 기준으로 가상의 컬럼을 생성한다. 따라서 데이터 입력 시 아래와 같은 화면이 

나타난다.

데이터 입력시 편의를 위해 이렇게 구성은 하였으나 이로 인해 schemeless의  유연성이라는 장점은 포기했다. 즉, 한 테이블의 모든 데이터는 

동일한 갯수와 이름의 key로 구성되어야 정상적으로 사용이 가능할 것이다.

입력된 데이터는 테이블 화면에 목록으로 보여지며 항목 우측에 삭제와 수정 버튼 그리고 하단에 Export, Import, Drop Table 등의 기능 

버튼이 있다.

차례차례 살펴보면…

삭제 버튼은 당연히 데이터를 지우는 기능이다. 클릭하면 데이터가 바로 지워진다. 수정으 Update 기능에 해당하며 클릭하면 아래 이미지와 

같은 팝업이 뜨고 내용을 변경한 후 Update Row 버튼을 클릭하면 데이터가 수정된다.

Export Table 버튼을 클릭하면 화면 하단의 Textarea에 테이블 전체 데이터가 JSON 포맷의 문자열로 표시된다. 다만 기본 테이블 구조와 

다른 것은 tableName Key가 추가되어있다는 것이다. 이 문자열을 그대로 복사해 다른 PC에 설치된 툴에서 Import Table을 이용하면 

불편하나마 데이터를 공유할 수 있다.

Import Table은 Export Table을 했을 때 출력되는 포맷의 JSON 문자열로 테이블에 데이터를 입력하는 기능으로 2가지 옵션이 있다. 

각각의 이름대로 추가하기를 선택하면 기존 데이터에 Import 할 데이터가 덧붙여 지며 대체하기를 선택하면 기존 데이터는 삭제되고 새로운 

데이터로 테이블이 채워진다.

추가하기 선택 시

대체하기 선택 시

마지막으로 Drop Table은 이름 그대로 테이블 자체를 삭제해버리므로 저장된 데이터도 모두 지워진다.

이와 같은 기능으로 필요한 테이블과 테스트용 데이터를 미리 생성한 후 테스트 페이지들을 API를 이용해 구현하여 사용하면 쉽게 데이터 

처리가 가능한 Prototype을 만들 수 있을 것이다.

아직도 개선할 부분이 많이 보이지만 일단 개인적인 목적으로 만든만큼 써가면서 필요한 부분을 수정해 나가야겠다.

이제 다음주 부터는 진짜로 Till60 Prototype 개발에 집중해야겠다~