Parse를 사용하여 JavaScript로 만드는 Todo 앱

원문 : Todo App with JavaScript 

사용자 계정 및 데잍를 유지하기 위하여 백엔드로 Parse를 사용하여 정통적인 백본 todo 애플리케이션을 만드는 방법을 배워보자. 

이 튜토리얼의 소스 코드 라운로드 링크: .zip | GitHub

자바스크립트 SDK를 사용하여 우리는 디바이스간에 사용자 인증 및 데이터 지속성으로 정통적인 백본 todo 애플리케이션을 확장할 수 있다. 우리의 SDK는 Backbone을 기반으로하기 때문에 Parse를 사용하여 이 애플리케이션을 확장하는 것은 쉬운 일이다. 

이 튜토리얼은 todo 애플리케이션 코드를 통해서 여러분을 안내 할 것이다. 여러분은 여기에서 실제 애플리케이션을 가지고 놀수 있다. 전체 애플리케이션은 간단한 정적인 파일로 구성되어 있다. 자바스크림트 앱에 대한 백엔드를 Parse가 처리해준다. 

종속관계

앱의 필수 요소:

• Underscore
• jQuery

Parse 자바스크립트 SDK는 Backbone을 포크(fork)해서 만들어졌고 다른 자바스크립트 라이브러리는 필요하지 않기 때문에 Backbone을 필요로하지 않는다. 여기서는 우리는   이 앱의 특정 요소를 위해서 jQuery와 Underscore를 사용한다. 그러나 원하는 다른 라이브러리를 선택할 수도 있다.

템플릿

우리는 모든 뷰를 위해서 Underscore 템플릿을 사용한다. index.html의 스크립트 블록에 직접 위치하고 있다. 예를 들면, 이 탬플릿은 하나의 todo 아이템을 위한 것이다. 

<script type="text/template"  id="item-template">   <li class="<%= done ? 'completed' : '' %>">     <div class="view">       <input class="toggle" type="checkbox" <%= done ? 'checked="checked"' : '' %>>       <label class="todo-content"><%= content %></label>       <button class="todo-destroy"></button>     </div>     <input class="edit" value="<%= content %>">   </li> </script>

사용자 인증

우리는 전형적인 todo앱에 로그인을 허용하고 todo 아이템을 여러 디바이스에서 관리 할 수 있게 하는 사용자 인증을 확장했다. 다행이도 이 기능을 Parse를 통해서 충가하는 것은 쉽다. 

처음으로, 2개의 서브 뷰(LoginView와 ManageTodosView)를 관리하는 매인 뷰를 AppView로 만든다. 기본적으로, 일반적인 todo 앱의 앞에 로그인 화면을 추가한다. 만약에 사용자가 로그인되어 있다면 어떤 뷰를 보여줄지 결정하는 것을 간단하게 테스트한다. 

if (Parse.User.current()) {   new ManageTodosView(); } else {   new LogInView(); }

로그인 뷰는 2개의 폼을 보여준다. 하나는 로그인이고 또 다른 하나는 새로운 계정을 위한 가입이다. 

<form class="login-form">   <h2>Log In</h2>   <div class="error" style="display:none"></div>   <input type="text" id="login-username" placeholder="Username" />   <input type="password" id="login-password" placeholder="Password" />   <button>Log In</button> </form> <form class="signup-form">   <h2>Sign Up</h2>   <div class="error" style="display:none"></div>   <input type="text" id="signup-username" placeholder="Username" />   <input type="password" id="signup-password" placeholder="Create a Password" />   <button>Sign Up</button> </form>

뷰는 각각 유저의 로그인과 가입 폼의 서브밋 이벤트에 바인딩된다.  로그인 코드는 다음과 같다. 

Parse.User.logIn(username, password, {   success: function(user) {     new ManageTodosView();     self.undelegateEvents();     delete self;   },   error: function(user, error) {     self.$(".login-form .error").html("Invalid username or password. Please try again.").show();     this.$(".login-form button").removeAttr("disabled");   } });

일단 유저가 로그인 되면, Parse SDK는 자동적으로 세션을 유지하는 처리를 한다. 그래서 Parse.User.current()는 항상 로그인 된 사용자의 인스턴스가 될 것이다. 로그인 후에는 즉시 ManageTodosView를 보여준다.

가입 코드는 다음과 비슷하다. 

Parse.User.signUp(username, password, { ACL: new Parse.ACL() }, {   success: function(user) {     new ManageTodosView();     self.undelegateEvents();     delete self;   },   error: function(user, error) {     self.$(".signup-form .error").html(error.message).show();     this.$(".signup-form button").removeAttr("disabled");   } });

필드로부터 가져온 사용자이름과 비밀번호으로 사용자 계정을 생성한다. 또한 사용자에게 빈 ACL을 적용한다. 이작업은 만약 로그인 한 사용자가 아닌경우 User 클래스로 부터 데이터를 읽는 것을 방지한다. 

두 개의 뷰에서, 콜백시 div에 오류 메세지를 표시하여 오류를 처리한다. 

Todo 아이템 유지하기

애플리케이션의 대부분은 원조 Backbone.js todo 앱과 매우 유사하다. Backbone 모델과 콜렉션을 사용하여 todo 아이템을 표시하는 방법의 의미를 얻기 위해서 원조 주석이 달린 소스코드를 살펴 볼 수 있다. 

적용할 주요 변경사항은 Backbone 클래스 대신에 Parse 클래스로 교체하는 것이다. 다음과 같다. 

var Todo = Parse.Object.extend("Todo", {   // ... }); var TodoList = Parse.Collection.extend({   // ... });

이것은 자동적으로 Todo 모델의 자신을 원조 앱의 로컬 스토리지 대신에 Parse 플랫폼에 유지하는 것을 만들어 준다. 여기서 기존 Backbone 앱을 Parse로 변환하는 것에 대해서 더 살펴 볼 수 있다.

여기, 사용자가 소유하고 있는 모든 todo 아이템을 얻고 TodoList인스턴스를 위한 query로 설정하기 위해서 Parse.Query를 구축한다. 

// Todo의 콜랙션 생성 this.todos = new TodoList;   // 현재 사용자에서 todo을 살펴보기 위해 콜랙션에 대한 쿼리 설정 this.todos.query = new Parse.Query(Todo); this.todos.query.equalTo("user", Parse.User.current());   // ...   // Parse로 부터 이 유저에 대한 모든 todo 아이템 가져오기 this.todos.fetch();

이것이 전부이다. 이제 todo 아이템을 저장, 삭제 또는 생성할 수 있다. 이 값들의 상태는 Parse에 지속된다.