Meteor 공식 튜토리얼 번역 - 3.Collection 부터 5.Update and Remove 까지

미티어 공식 튜터리얼

위 링크를 번역한 것입니다. 오타나 오역은 댓글로 지적해주시면 수정하겠습니다.

===========================================================


컬렉션 : 지속적인 데이터를 저장하는 방법

새 컬렉션을 생성하는 것은 간단히 아래의 문장을 적으면 된다.
MyCollection = new Mongo.Collection("my-collection");



Inserting tasks from the console
- 콘솔로부터 task 삽입하기

Items inside collections are called documents. 
- 콜렉션 내에 항목들은 도큐먼트라고 부른다

Let's use the server database console to insert some documents into our 
collection. In a new terminal tab, go to your app directory and type:
meteor mongo
- 콜렉션에 도큐먼트를 넣어봅시다(콘솔로부터) 새로운 cmd 창을 열고, 작업 
디렉토리로 가서 meteor mongo 라고 칩니다

This opens a console into your app's local development database. Into 
the prompt, type:
- 이 명령은 당신의 앱에 로컬 데이터베이스를 불러옵니다 cmd 에 다음과 같
이 입력:

db.tasks.insert({ text: "Hello world!", createdAt: new Date() });
In your web browser, you will see the UI of your app immediately update 
to show the new task.
-니 웹브라우저에서, 새로운 task 가 업데이트 됨에 따라 즉각적으로 바뀌는 
UI를 볼 수 있을 것이다.

You can see that we didn't have to write any code to connect the 
server-side database to our front-end code — 
it just happened automatically.
- 또한 우리가 서버사이드 db 와 우리의 프론엔드 코드를 연결하기 위해 아
무런 코드도 작성할 필요가 없다는 것을 볼 수 있다.
그저 자동으로 일어난다.

Insert a few more tasks from the database console with different text. 
- 데이터베이스로부터 몇 가지 다른 텍스트를 더 삽입해봐라. 

In the next step, we'll see how to add functionality to our app's UI so 
that we can add tasks without using the database console.
- 다음 단계에서, 데이터베이스 콘솔 없이 task 를 추가하기 위해 어떻게 
app 의 UI 에 기능을 추가하는지 살펴본다

<Adding tasks with a form>
- 폼으로 task 추가하기

In this step, we'll add an input field for users to add tasks to the 
list.
- 이번 단계에서, 유저들이 list 에 task 를 추가하기 위한 입력칸을 추가할 
것입니다

First, let's add a form to our HTML:
-먼저 니 html에 폼을 추가합시다

Here's the JavaScript code we need to add to listen to the submit event 
on the form:
- 이것은 폼의 전송이벤트를 감지하기 위해 추가할 자바스크립트 코드입니다.

Now your app has a new input field. To add a task, just type into the 
input field and hit enter. If you open a new browser window and open 
the app again, you'll see that the list is automatically synchronized 
between all clients.
- 이제 니 앱은 새로운 입력필드가 추가되었습니다. 태스크를 추가하기 위해 
그저 타이핑 후 엔터를 치면 됩니다.
새로운 창이나 윈도우를 다시 열게되면 리스트가 클라이언트들 사이에서 자
동으로 동기화되는 것을 볼 수 있을겁니다.

<Attaching events to templates>
템플릿에 이벤트 추가하기

Event listeners are added to templates in much the same way as helpers 
are: 
- 이벤트 리스너는 헬퍼와 거의 동일한 방법으로 추가됩니다...

by calling Template.templateName.events(...) with a dictionary. 
- Template.templateName.events(...) 와 dictionary 를 호출함으로써요.

The keys describe the event to listen for, and the values are event 
handlers that are called when the event happens.
- 키는 우리가 감지하는 이벤트, 값은 이벤트가 일어났을때 호출되는 이벤트 
핸들러를 의미합니다..

방금 살펴본 코드에서는 우리는 submit 이벤트를 리스닝 중이고 엔터를 치면 
이벤트 핸들러가 발동되는 것입니다.

이벤트 핸들러는 'event' 라는 인자를 받는데 감지한 이벤트에 대한 정보를 
담고있습니다. 이 경우에서 event.target 은 우리의 form element 이고 우리
는 'event.target.text.value'를 통해 입력된 값을 얻을 수 있습니다.

console.log(event) 코드를 삽입함으로써 event 의 모든 properties 를 볼 
수 있습니다.

마지막 줄은 일종의 초기화 작업을 합니다. 입력 창을 빈 칸으로 만들고, 
false 를 return 하여 웹 브라우저에게 기본 폼 전송 동작을 하지 말것을 명
령합니다 왜냐면 우리는 이미 그것을 핸들링 했기 떄문입니다.

<Inserting into a collection>
Inside the event handler, we are adding a task to the tasks collection 
by calling Tasks.insert().
- 이벤트 핸들러 내에서, 우리는 'Task.Insert()' 를 호출해서 tasks 콜렉션에 task를 추가할 수 있습니다.

We can assign any properties to the task object,
- 우리는 task 객체 에 어떤 속성이든지 할당할 수 있습니다.

such as the time created, since we don't ever have to define a 
schema for the collection.
- 예로 생성 날짜와 같은... , 우리는 콜렉션의 스키마 같은 것을 전혀 정의하지 않았기 때문입니다.

Being able to insert anything into the database from the client isn't 
very secure,
- 클라이언트로 부터 어떤 값이든 입력받게 하는것은 보안상 좋지 않지만,

but it's okay for now. 
-지금 당장은 괜찮습니다

In step 10 we'll learn how we can 
make our app secure and restrict how data is inserted into the 
database.
- 10단계에서 우리는 어떻게 우리 앱의 보안을 강화하고 어떻게 데이터가 데이터베이스에 들어오는 지를 제한하는지 배울겁니다

<Sorting our tasks>
Currently, our code displays all new tasks at the bottom of the list.
-현재, 우리의 코드는 모든 새로운 태스크를 리스트 하단에 뿌려줍니다.

That's not very good for a task list, because we want to see the newest tasks first.
- 그것은 작업리스트로서 별로 좋지 않습니다 우리는 새로운 것이 상단에 위치되기 원하기 때문입니다..

We can solve this by sorting the results using the createdAt field that is automatically added by our new code. Just add a sort option to the find call inside the tasks helper:
-우리는 createdAt 필드를 이용해서 리스트가 자동정렬되도록 할 것입니다..그저 task helper 내의 find call 을 이용해서..

<Getting data in event handlers>
Inside the event handlers, this refers to an individual task object. 
- 이벤트 핸들러내에서, "this"는 각각의 태스크 오브젝트를 가리킵니다

In a collection, every inserted document has a unique _id field that can be used to refer to that specific document. 
- 컬렉션에서, 모든 삽입된 도큐먼트는 유니크한 _id 필드를 가지고 있습니다. 그리고 그것은 특정 도큐먼트를 가리킬 때 사용됩니다.

We can get the _id of the current task with this._id. Once we have the _id, we can use update and remove to modify the relevant task.
- 우리는 this._id 문장을 통해 현재 태스크의 _id 필드 밸류를 얻어올 수 있습니다.
한번 _id를 얻으면, 해당 태스크를 업데이트하거나 삭제할 수 있습니다..

<Update>
The update function on a collection takes two arguments.
- 컬렉션의 update 함수는 2개의 인자를 가집니다..

The first is a selector that identifies a subset of the collection, and the second is an update parameter that specifies what should be done to the matched objects.
- 첫 번째는 컬렉션의 subset을 의미하는 선택자입니다. 그리고 두 번째는 update 인자로, 매치된 개체가 바뀌어야 할 값을 의미합니다.

In this case, the selector is just the _id of the relevant task. The update parameter uses $set to toggle the checked field, which will represent whether the task has been completed.
- 이 경우에서, 선택자는 해당 task의 _id 입니다. 업데이트 인자는 $set 을 사용하여 check 영역(작업이 완료되었는지를 표시하는)을 토글합니다.

<Remove>
The remove function takes one argument, a selector that determines which item to remove from the collection.
- 삭제 함수는 하나의 인자를 가지고, 선택자는 컬렉션에서 삭제할 항목을 결정합니다.

<Using object properties or helpers to add/remove classes>

If you try checking off some tasks after adding all of the above code, 
- 너가 아래의 코드를 모드 추가한 후, 체크를 해제하면
you will see that checked off tasks have a line through them. 
- 해제한 항목들에 줄이 그어지는 것을 확인할 수 있다

This is enabled by the following snippet:
- 다음 스니펫으로 이것을 작동한다

<li class="{{#if checked}}checked{{/if}}">

With this code, if the checked property of a task is true, the checked class is added to our list item. 
- 이 코드에서는, task 의 체크 속성값이 참이면, 체크된 class 는 우리의 list item에 추가된다.

Using this class, we can make checked-off tasks look different in our CSS.
- 이 class를 사용해서, 우리는 체크 해제된 tasks가 우리의 CSS 에서 다르게 보여지도록 할 수 있다.