안녕하세요 슬릭데브 입니다 ^^
요즘 많이 바뻐져서 Angularjs를 1주정도 못배웠습니다.
오늘은 그래서 중요한걸 배워보려고 합니다.
데이터베이스와 연결을해서 데이터 CRUD ( Create, Read, Update, Delete)를 하려고 합니다.
데이터 생성, 읽기, 수정, 삭제중에서 읽기부터 해보겠습니다.
제가 자주쓰던 데이터베이스가 페이스북사의 Parse.com 이였는데 2017년1월부터 서비스 종료를 한다고 합니다.
따로 SQL 서버 만들어서 해볼수도 있지만 back-end를 책임져줄수 있는 다른 데이터 베이스를 찾아봤습니다.
그중에서 Google의 Firebase를 사용해보려고 합니다.
Firebase는 JSON 형식의 데이터로 통신을 하네요.
그럼 메뉴를 데이터베이스에 저장하고 읽어봅시다.
Firebase 계정을 만드시고 간단한 튜터리얼을 통해서 데이터베이스를 생성합니다.
이 방법은 나중에 Firebase 섹션에 따로 올려놓겠습니다.
그럼 데이터베이스에 데이터를 올려봅시다!
JSON 데이터 파일을 아래와 같이 firebase에 올려봅시다.
이렇게 하면 Restaurant 아래에 슬릭치킨이있고, 그 아래에 메뉴가 있습니다.
메뉴들은 숫자로 0 부터 4 까지 있습니다.
우리가 Import 한 데이터는 숫자로 보여집니다.
그럼 아래와 같은 화면을 만들어 볼까요?
메뉴와 가격은 테이블로 만들어져 있고 그럼 ng-repeat은 필수!
그 아래 다음번을 위해서 Form 을 만들었습니다.
메뉴 이름과 가격을 넣고 버튼을 누르면 저장될수 있도록 다음번에 만들겠습니다.
searchrestaurant.html 파일입니다.
위 그림과 같이 header에 더 추가를 해주세요!
Firebase CDN 과 Bootstrap cdn, jQuery 등등 추가해주세요.
Front-end 디자인도 다 bootstrap 으로 빠르게 할 예정입니다.
와우! Front-end 와 back-end를 벌써 저 헤더에서 다 해줍니다!
위 그림은 테이블 형성과 메뉴이름, 가격을 binding 해줍니다.
그리고 밑에는 입력란을 만들어 줍니다.
mainApp.js 파일입니다.
파이어베이스 튜터리얼을 하시면 연결하시는 방법을 배울수 있습니다.
일단 위와 같이 간단히 읽기만 해주는 코드입니다.
오늘은 여기까지 하겠습니다.
요즘 너무 정신이 없어서 CRUD를 한번에 다 못 올렸습니다.
오늘은 R 을 했으니 다음엔 C 를 하겠습니다.
감사합니다.
//슬릭데브
