미티어-CRUD-서비스-몽고디비편

Mysql, 오라클 같은 관계형 디비(Relational DataBase) 이하 RDB은 컬럼에 테이블 같은것이 있고

Ansi Query를 통해 데이터를 조회하는 반면

몽고디비는 Document DB로 Collection이라는 곳에 데이터를 Key-Value값으로 데이터를 처리하는 차이가 있다

미티어는 기본적으로 몽고디비서버와 클라이언트의 미니몽고가 있어 데이터를 백단에서 동기화하므로써

화면에 보이는 데이터가 아주 빠르게 변화되는것 처럼 보여준다.

 

todos.js를 생성하고 코딩한다.

todos라는 콜렉션(테이블)을 몽고디비에 새로 생성하였고 우리는 todoContainer라고 사용할것이다.

imports>api>todos.js 생성

서버에서는 todoContainer로 사용하기 위해 import하였다.

server>main.js 수정

클릭시 데이터를 밀어 넣기 위한 Add 버튼을 생성

<button onClick={this.handleClick.bind(this)}>Add</button>

와 handleClick 클릭 이벤트를 넣어준다.

클릭이벤트에서 보면 클라이언트에서 바로 insert 문장으로 db에 데이터를 넣는것을 알수 있다.

그리고 데이터를 넣고나면 state와 input 박스를 클리어한다.

 

인풋박스에 add를 하고 난뒤 데이터가 들어갔는지 커멘트 창을 열어서 확인한다.

meteor mongo

db.todos.find({})

이렇게 몽고 디비에 데이터를 넣는 처리가 끝났고

넣은 데이터를 조회하는 기능을 진행함.

 

TodoList.jsx 이 파일이 콜렉션의 데이터를 표시해주는 역할을 함.

imports>TodoList.jsx 생성

componentWillMount는 화면이 렌더링하기 전에 한번만 호출한다.

Tracker 기능은 Meteor의 기능이다.(드디어 Meteor기능이 나옴)

데이터가 변경되었을떄 변경을 감지하여 실행을 하는 기능이다.

이 마법같은 기능으로 인하여 입력하자 마자 데이터는 추가되고 리스트는 자동으로 갱신되어진다.

 

HelloMeteor.jsx로 와서 위에서 생성한 파일을 import함

import TodoList from './TodoList'

화면안에서 표시를 해야하기 때문에 add 버튼 아래

<TodoList/>를 추가함

그러면 Tracker가 없어서 에러가 발생하므로 Tracker를 cmd 창에서 추가해야한다.

meteor add tracker

 

 

열심히하는게 아니라 잘해야지...

다음 내용은 데이터 삭제, 갱신, 스타일까지 입히는 내용으로 진행할 예정입니다.

회사일로 바쁘겠지만 최대한 시간내서...

*별거 아닌 내용인데 글쓰면서 코딩하니 시간이 작살군요.