Meteor 튜토리얼: Meteor로 실시간 웹 애플리케이션 구축

게시 됨: 2022-03-11

Meteor는 웹 및 모바일 애플리케이션을 위한 풀 스택 JavaScript 프레임워크입니다. 2011년부터 사용되었으며 신속한 프로토타이핑을 위한 이상적이고 사용하기 쉬운 솔루션으로 Meteor 개발자들 사이에서 강력한 명성을 얻었습니다. 그러나 최근 개발자들은 Meteor가 더 이상 프로토타이핑을 위한 것이 아니라 상업적 개발에 사용할 준비가 되었다는 것을 깨달았습니다. 그것이 제공하는 패키지의 무기고, 그것이 의존하는 견고한 mongoDB/node.js 기반, 그리고 그것이 제공하는 코딩 유연성; Meteor를 사용하면 브라우저 앱에서 서버 또는 데이터베이스에 이르기까지 모든 것을 처리하는 강력하고 안전한 실시간 웹 애플리케이션을 쉽게 구축할 수 있습니다.

유성 튜토리얼

이 Meteor 튜토리얼은 사용자가 로그인하고 책 목록을 관리할 수 있는 간단한 카탈로그인 Meteor에서 기본 웹 애플리케이션을 만드는 과정을 안내합니다.

왜 Meteor를 사용합니까? 짧은 대답은 "Meteor가 재미있기 때문에"입니다. 웹 애플리케이션 개발을 간단하게 만듭니다. 배우기 쉽고 데이터 동기화 및 페이지 제공의 기본보다 애플리케이션의 기능에 더 집중할 수 있습니다.

또한 편리한 동작이 많이 내장되어 있습니다. Meteor는 실시간 업데이트를 자동으로 수행하므로 데이터 변경 사항이 브라우저 창에 즉시 표시되고 애플리케이션 자체에 대한 코드 변경 사항도 "실시간"으로 모든 브라우저와 장치에 푸시됩니다. Meteor는 지연 보상 기능이 내장되어 있고 배포하기 쉽고 모든 종류의 기능을 처리하는 설치가 쉬운 "패키지"가 있습니다.

비교적 새로운 프레임워크임에도 불구하고 많은 신생 기업이 Respondly 및 Telescope와 같은 비교적 대규모 서비스를 포함하여 이미 Meteor 앱을 구축하고 있습니다.

Meteor 설치 및 비계

*nix 시스템에 Meteor를 설치하는 것은 한 줄짜리입니다:

 curl https://install.meteor.com/ | sh

아직 공식적인 지원은 없지만 Windows용 미리 보기는 잘 진행되고 있습니다. 소문에 따르면 Windows 지원은 2015년 4월 또는 5월에 1.1과 함께 제공될 예정입니다. Meteor와 같은 스마트 프레임워크에서 예상할 수 있듯이 응용 프로그램을 부트스트랩하려면 한 줄의 명령을 호출해야 합니다.

 meteor create book-list

그러면 "book-list"라는 디렉토리가 생성되고 일부 상용구 및 종속 코드로 채워집니다. 애플리케이션을 실행하려면 새로 생성된 디렉터리를 입력하고 다음을 실행합니다.

 meteor

웹 브라우저에서 http://localhost:3000 을 열면 다음이 표시됩니다.

운석에 오신 것을 환영합니다

JSFiddle for Meteor: Book List: Default App과 같은 사이트인 MeteorPad에서 우리 애플리케이션의 "버전 0"을 확인할 수도 있습니다.

Meteor는 보기를 HTML 파일에 저장합니다. "book-list.html"을 열면 다음이 표시됩니다.

 <head> <title>book-list</title> </head> <body> <h1>Welcome to Meteor!</h1> {{> hello}} </body> <template name="hello"> <button>Click Me</button> <p>You've pressed the button {{counter}} times.</p> </template>

Meteor는 템플릿 엔진인 "Blaze"를 사용하여 이러한 HTML 파일의 응답을 렌더링합니다. 이중 중괄호는 Handlebars.js(또는 기타 유사한 템플릿 엔진)를 사용해 본 사람이라면 누구에게나 친숙할 것이며 여기에서도 유사한 기능을 제공합니다. Blaze는 이중 중괄호 쌍 안에 있는 표현식을 검사하고 각각을 이러한 표현식이 산출하는 값으로 바꿉니다.

이 간단한 예제 프로그램에는 이중 괄호 표현식이 두 개뿐입니다.

  • 첫 번째 "{{> hello}}"는 Blaze에 "hello"라는 템플릿을 포함하도록 지시합니다. 해당 템플릿은 파일 하단의 <template name=”hello”> 섹션에 정의되어 있습니다.

  • 두 번째 "{{counter}}"는 조금 더 복잡합니다. 이 "counter" 값이 어디에서 오는지 보려면 "book-list.js"를 열어야 합니다.

 if (Meteor.isClient) { // counter starts at 0 Session.setDefault('counter', 0); Template.hello.helpers({ counter: function () { return Session.get('counter'); } }); Template.hello.events({ 'click button': function () { // increment the counter when button is clicked Session.set('counter', Session.get('counter') + 1); } }); } if (Meteor.isServer) { Meteor.startup(function () { // code to run on server at startup }); }

여기에 설명이 필요한 사항이 있습니다. 먼저 "if(Meteor.isClient)"와 "if(Meteor.isServer)"로 나눕니다. Meteor는 풀 스택 프레임워크이므로 작성한 코드는 서버와 클라이언트 모두에서 실행됩니다. 이러한 조건을 사용하면 첫 번째 블록은 클라이언트에서만 실행되고 두 번째 블록은 서버에서만 실행되는 것을 제한할 수 있습니다.

둘째, "Session.setDefault" 호출이 있습니다. 이것은 브라우저에서 "counter"라는 세션 변수를 초기화합니다. 세션 변수는 Meteor의 전역과 약간 비슷하게 작동합니다(좋든 나쁘든). 그러나 해당 세션 변수는 "{{counter}}"에 직접 표시되지 않습니다. 대신 해당 "counter" 표현식은 "Template.hello.helpers" 섹션에 정의된 "helper"입니다. 이 도우미는 단순히 세션 변수의 값을 잡아서 반환합니다.

도우미는 "반응형"입니다. 즉, 세션 변수가 변경될 때마다 Meteor는 이를 참조하는 이 도우미 함수를 자동으로 다시 실행하고 Blaze는 새 콘텐츠로 브라우저를 자동으로 업데이트합니다.

클라이언트 코드는 또한 "Template.hello.events"를 통해 이벤트를 모니터링합니다. 이벤트 유형과 선택기(이 경우 "클릭 버튼")별로 이벤트를 식별한 다음 해당 이벤트가 수행해야 하는 작업을 Meteor에 알립니다. 이 경우 세션 변수가 증가하여 도우미 기능을 다시 실행하고 콘텐츠를 다시 렌더링합니다.

정적 데이터 표시

이 모든 것이 훌륭하지만 이 튜토리얼에서 우리가 원하는 Meteor 애플리케이션은 아닙니다.

이 응용 프로그램을 조정하기 시작하겠습니다. 정적이고 하드 코딩된 책 목록을 표시합니다. 지금은 세션 변수에 책 목록을 숨길 것입니다. "isClient" 코드에서 bookList 템플릿이 렌더링되는 즉시 "Template.hello.rendered"를 사용하여 세션 변수를 설정합니다.

 Template.hello.rendered = function() { Session.setDefault('books', [ {title: "To Kill a Mockingbird", author: "Harper Lee"}, {title: "1984", author: "George Orwell"}, {title: "The Lord of the Rings", author: "JRR Tolkien"}, {title: "The Catcher in the Rye", author: "JD Salinger"}, {title: "The Great Gatsby", author: "F. Scott Fitzgerald"} ]); };

그런 다음 "hello" 템플릿의 새 도우미와 함께 해당 세션 변수를 반환합니다.

 Template.hello.helpers({ books: function () { return Session.get('books'); } });

그리고 "hello" 템플릿에서 변수 보간을 통해 화면에 표시합니다.

 <template name="hello"> <h3>Here are your books:</h3> {{ books }} </template>

Meteorpad: Book-List: Show Session Variable에서 작동 중인 이 코드를 확인할 수 있습니다.

가장 먼저 주목해야 할 점은 Meteor 서버가 코드베이스의 변경 사항을 자동으로 감지하고 새 코드를 클라이언트에 푸시하고 클라이언트에 다시 로드하라는 메시지를 표시했다는 것입니다. 애플리케이션을 배포한 후에도 변경 사항을 배포하고 핫 코드 푸시를 통해 클라이언트를 자동으로 업데이트할 수 있습니다.

변경 사항을 자동으로 배포

지금까지 얻은 정보는 다음과 같습니다.

잘못된 데이터 표시

데이터를 잘못 표시하고 있습니다. Blaze는 여기에서 정확성에 대한 점수를 얻습니다(왜 예, 그것은 객체의 배열입니다). 그러나 유용한 방식으로 책 목록을 표시하려면 좀 더 영리해야 합니다. 다행히 Blaze는 "#each" 지시문을 사용하여 데이터 배열로 작업하는 것을 매우 쉽게 만듭니다.

 <h3>Here are your books:</h3> <UL> {{#each books}} <LI><i>{{title}}</i> by {{author}}</LI> {{/each}} </UL>

Blaze에서 "#each"는 Angular의 "ng-repeat" 지시문과 약간 유사하게 작동합니다. 배열 구조를 반복하고 현재 컨텍스트를 배열의 현재 객체로 설정하고 "{{#each …}}”. 이것이 지금 우리의 책 목록이 보이는 것입니다:

정확한 데이터 표시

MeteorPad에서: 세션 변수를 올바르게 표시

일부 청소

더 진행하기 전에 코드를 조금 정리하겠습니다.

Meteor는 코드베이스를 구성하는 방법에 엄청난 자유를 줍니다. 보시다시피, 몇 가지 엄격하고 빠른 규칙만 있습니다. HTML과 JavaScript를 어디에 넣으면 Meteor가 찾을 수 있습니다. 이러한 유연성은 훌륭하지만 의미 있는 방식으로 코드를 구성하는 것이 더 중요하다는 것을 의미하므로 거대한 혼란을 유지하는 데 갇히지 않습니다.

먼저 이 "hello" 템플릿의 이름을 "bookList"와 같이 의미 있는 것으로 바꾸고 상용구 HTML을 다음과 같이 바꾸겠습니다.

 <head> <title>book-list</title> </head> <body> {{> bookList}} </body> <template name="bookList"> <h3>Here are some books:</h3> <UL> {{#each books}} <LI><i>{{title}}</i> by {{author}}</LI> {{/each}} </UL> </template>

둘째, "클라이언트"와 "서버" 부분을 별도의 파일로 분할하겠습니다. 애플리케이션 디렉토리에서 "클라이언트" 서브디렉토리와 "서버" 서브디렉토리를 설정할 것입니다. Meteor는 클라이언트에서 "/client/" 파일을 실행하고 "/server/" 파일을 실행하는 것을 자동으로 알게 됩니다. 섬기는 사람. 템플릿 이름을 따서 명명된 JavaScript 파일에 템플릿 코드를 넣는 것이 좋은 규칙이므로 클라이언트 코드를 "client/bookList.js"에 넣습니다. 현재 비어 있는 서버 시작 코드를 "server/startup.js"에 넣을 수 있습니다. 마지막으로 "

이 모든 전환 후에도 Meteor는 여전히 모든 HTML 및 JavaScript 파일을 자동으로 찾습니다. 파일이 "/client/"에 있는 한, Meteor 는 클라이언트에서 파일을 실행한다는 것을 알게 됩니다. 파일이 "/ server /"에 있는 한 유성은 서버에서 파일을 실행한다는 것을 알게 됩니다. 다시 말하지만, 정리를 유지하는 것은 개발자의 몫입니다.

이제 코드는 다음과 같아야 합니다.

book-list.html:

 <head> <title>book-list</title> </head> <body> {{> bookList}} </body>

클라이언트/bookList.html:

 <template name="bookList"> <h3>Here are some books:</h3> <UL> {{#each books}} <LI><i>{{title}}</i> by {{author}}</LI> {{/each}} </UL> </template>

클라이언트/bookList.js:

 Template.bookList.rendered = function() { Session.setDefault('books', [ {title: "To Kill a Mockingbird", author: "Harper Lee"}, {title: "1984", author: "George Orwell"}, {title: "The Lord of the Rings", author: "JRR Tolkien"}, {title: "The Catcher in the Rye", author: "JD Salinger"}, {title: "The Great Gatsby", author: "F. Scott Fitzgerald"} ]); }; Template.bookList.helpers({ books: function () { return Session.get('books'); } });

서버/startup.js:

 Meteor.startup(function () { // code to run on server at startup }); ~~~ Check it out on MeteorPad: [Initial Code Cleanup](http://meteorpad.com/pad/MwvMcsBAzfbWwEXp3/Book-List:%20Initial%20Code%20Cleanup) Verify that everything's running correctly by checking the browser window and then we're good to move on to the next step. ## Using the Database in Meteor The Meteor server runs on top of a MongoDB database. In this section of our tutorial, we will move the static list of books out of the session variable and into that database. First, delete the Template.bookList.rendered code, so that we're no longer putting stuff into that session variable. Next, we should add that list of books to the database as fixture data when the server initializes. As you'd expect for MongoDB, Meteor stores data in "collections". So, we'll create a new collection for our books. To keep things simple we will name it "books". It turns out that both the client and the server will want to know about this collection, so we'll put this code in a new subfolder: "/lib/". Meteor knows automatically that files in "/lib/" run on the client and the server. We'll create a file called "lib/collections/books.js", and give it just one line of code: ~~~ js Books = new Meteor.Collection("books");

http://localhost:3000을 가리키는 브라우저 창에서 개발자 콘솔로 이동하여 "Books" 값을 확인합니다. 이제 몽고 컬렉션이어야 합니다! "Books.find().fetch()"를 실행하면 빈 배열을 얻을 수 있습니다. 아직 책을 추가하지 않았기 때문에 의미가 있습니다. 콘솔에서 항목을 추가할 수 있습니다.

 Books.insert({title: "To Kill a Mockingbird", author: "Harper Lee"})

콘솔에 항목을 추가하는 것은 다소 지루합니다. 대신, 서버가 시작될 때 고정 데이터를 데이터베이스에 자동으로 삽입하도록 설정할 것입니다. 이제 "server/startup.js"로 돌아가서 다음을 추가해 보겠습니다.

 Meteor.startup(function () { if (!Books.findOne()) { Books.insert({title: "To Kill a Mockingbird", author: "Harper Lee"}); Books.insert({title: "1984", author: "George Orwell"}); Books.insert({title: "The Lord of the Rings", author: "JRR Tolkien"}); Books.insert({title: "The Catcher in the Rye", author: "JD Salinger"}); Books.insert({title: "The Great Gatsby", author: "F. Scott Fitzgerald"}); } });

이제 서버가 시작될 때 데이터가 없으면 조명기 데이터를 추가합니다. 터미널로 돌아가 유성 서버를 중지하고 다음 명령을 실행하여 이를 확인할 수 있습니다.

 meteor reset

참고: 이 명령은 Meteor가 사용 중인 데이터베이스를 재설정(즉, 지우기 )하기 때문에 거의 필요하지 않습니다. Meteor 애플리케이션의 데이터베이스에 사용자 데이터가 있는 경우 이 명령을 실행하면 안 됩니다. 그러나 이 경우 우리는 가지고 있는 테스트 데이터를 지울 것입니다.

이제 서버를 다시 시작하겠습니다.

 meteor

시작 시 Meteor는 시작 루틴을 실행하고 데이터베이스가 비어 있는지 확인하고 고정 데이터를 추가합니다. 이 시점에서 콘솔로 이동하여 "Books.find().fetch()"를 입력하면 이전에 가지고 있던 다섯 권의 책을 가져옵니다.

이 단계에서 남은 것은 책을 화면에 표시하는 것뿐입니다. 다행히 "return Session.get('books');"를 대체하는 것만 큼 간단합니다. "책" 도우미에서 다음을 사용합니다.

 return Books.find();

그리고 우리는 다시 사업을 시작합니다! 애플리케이션은 이제 세션 변수 대신 데이터베이스 커서의 데이터를 표시합니다.

MeteorPad에서 확인하세요: 데이터베이스로 이동

보안 문제

나는 이것을 말함으로써 이것을 서두에서 말할 것이다: "이 일을 하지 말라".

누군가 브라우저에서 이 앱을 실행하고 콘솔로 이동하여 "Books.remove({})"를 입력하면 어떻게 될까요?

답은 컬렉션을 지워버릴 것입니다.

따라서 이는 상당히 큰 보안 문제입니다. 사용자가 데이터베이스에 너무 많이 액세스할 수 있습니다. 모든 클라이언트는 전체 데이터베이스에 액세스할 수 있습니다. 뿐만 아니라 모든 클라이언트는 ".remove({})" 데이터 삭제를 포함하여 전체 데이터베이스를 변경할 수 있습니다.

이것은 좋지 않으므로 수정합시다.

Meteor는 기능을 추가하기 위해 소위 "패키지"를 사용합니다. Node.js에 대한 모듈, Ruby에 대한 보석, Meteor에 대한 번들 기능의 장점은 무엇입니까? 모든 종류의 패키지가 있습니다. 사용 가능한 항목을 탐색하려면 분위기.js를 확인하십시오.

"meteor create"로 만든 기본 유성 앱에는 "autopublish"와 "insecure"라는 두 개의 패키지가 포함되어 있습니다. 첫 번째 패키지는 클라이언트가 전체 데이터베이스에 자동으로 액세스할 수 있도록 하고 두 번째 패키지는 사용자가 해당 데이터베이스에서 모든 작업을 수행할 수 있도록 합니다.

그것들을 제거합시다. 앱 디렉토리에서 다음을 실행하여 이를 수행할 수 있습니다.

 meteor remove autopublish insecure

완료되면 책 목록 데이터가 화면에서 사라지고(더 이상 액세스할 수 없기 때문에) "Books.insert" 호출을 시도하면 "삽입 실패 : 접근이 거부되었습니다.” MeteorPad: 보안 과잉

이 Meteor 튜토리얼에서 다른 것을 취하지 않았다면 다음을 기억하십시오. Meteor 앱을 배포할 때 autopublish 및 insecure 패키지를 제거해야 합니다. Meteor에는 좋은 보안 예방 조치가 많이 있지만 이 두 패키지를 설치된 상태로 두면 모두 소용이 없습니다.

그렇다면 보안 위험이 있는 경우 Meteor가 이러한 패키지를 자동으로 포함하는 이유는 무엇입니까? 그 이유는 특히 초보자의 경우 이 두 패키지를 사용하면 시작하기가 더 쉬워지기 때문입니다. 브라우저 콘솔에서 데이터베이스를 쉽게 디버그하고 조정할 수 있습니다. 그러나 가능한 한 빨리 자동 게시를 버리고 안전하지 않게 하는 것이 좋습니다.

게시 및 구독

그래서 우리는 보안 허점을 수정했지만 두 가지 문제가 발생했습니다. 첫째, 이제 데이터베이스에 액세스할 수 없습니다. 둘째, 데이터베이스와 상호 작용할 방법이 없습니다.

여기서 첫 번째 문제를 해결해 보겠습니다. Meteor는 서버가 데이터베이스의 하위 집합을 "게시"하고 클라이언트가 해당 게시를 "구독"하도록 하여 데이터베이스에 대한 보안 액세스를 제공합니다.

먼저 "/server/publications.js"를 생성해 보겠습니다.

 Meteor.publish('books', function() { return Books.find({}); });

그리고 "/client/subscriptions.js"를 생성합니다.

 Meteor.subscribe('books');

MeteorPad에서 확인하세요: 게시 및 구독

서버는 모든 데이터에 액세스할 수 있는 커서를 "게시"하고 클라이언트는 다른 쪽 끝에서 커서를 "구독"합니다. 클라이언트는 이 구독을 사용하여 데이터베이스의 미러된 복사본을 커서의 모든 데이터로 채웁니다. "Books.find().fetch()"에 액세스하면 5개의 객체가 모두 표시되고 이전과 같이 화면에 표시됩니다.

차이점은 클라이언트가 액세스할 수 있는 것을 제한하는 것이 정말 쉽다는 것입니다. 발행물 "find()"를 데이터의 하위 집합으로 전환해 보십시오.

 Meteor.publish('books', function() { return Books.find({}, {limit:3}); });

이제 고객은 다섯 권의 책 중 세 권만 보고 나머지 책을 볼 수 있는 방법이 없습니다. 이것은 보안에 큰 도움이 될 뿐만 아니라(다른 모든 사람의 은행 계좌를 볼 수 없음) 데이터를 분할하고 클라이언트 과부하를 방지하는 데 사용할 수 있습니다.

새 책 추가

제한적이고 안전한 방법으로 클라이언트에게 데이터베이스에 대한 읽기 액세스 권한을 부여하는 방법을 살펴보았습니다. 이제 두 번째 문제를 살펴보겠습니다. 사용자가 원하는 작업을 수행하지 않고 데이터베이스를 변경하도록 하려면 어떻게 해야 합니까? 패키지를 안전하지 않게 제거하면 클라이언트가 전혀 액세스할 수 없습니다. 책 추가를 다시 허용해 보겠습니다. 유성에서는 서버에 "메소드"를 추가하여 이를 수행합니다. 새 책을 추가하는 메소드를 "/lib/collections/books.js"에 추가해 보겠습니다.

 Meteor.methods({ addBook: function(bookData) { var bookID = Books.insert(bookData); return bookID; } });

보시다시피, 이것은 "bookData"(이 경우 "title" 및 "author" 필드가 있는 개체)를 가져와 데이터베이스에 추가합니다. 클라이언트가 다시 로드되면 클라이언트에서 이 메서드를 호출할 수 있습니다. 콘솔로 이동하여 다음과 같이 입력할 수 있습니다.

 Meteor.call('addBook', {title: "A Tale of Two Cities", author: "Charles Dickens"})

그리고 프레스토! 책 목록에 다른 책이 있습니다. 콘솔을 사용하는 것은 참을 수 없이 투박하므로 "bookList" 템플릿 끝에 새 책을 추가할 수 있는 간단한 양식을 추가해 보겠습니다.

 <form class="add-book"> Title:<br> <input type="text" name="title"> <br> Author:<br> <input type="text" name="author"> <input type="submit" value="Add Book"> </form>

그리고 원래 테스트 애플리케이션에서와 같이 이벤트 케이스를 사용하여 JavaScript에 연결할 수 있습니다.

 Template.bookList.events({ "submit .add-book": function(event) { event.preventDefault(); // this prevents built-in form submission Meteor.call('addBook', {title: event.target.title.value, author: event.target.author.value}) } });

MeteorPad: Methods에서 작동하는 것을 볼 수 있습니다.

안전하지 않은 자동 게시가 있을 때 클라이언트는 전체 데이터베이스에 액세스하고 변경할 수 있습니다. 이제 안전하지 않고 자동 게시가 사라지지만 게시, 구독 및 메서드를 통해 클라이언트는 데이터베이스에 액세스하고 제어된 방식으로 데이터베이스와 상호 작용할 수 있습니다.

참고로 "허용 및 거부 규칙"을 사용하여 Meteor의 보안 문제를 해결할 수도 있습니다. 이에 대한 자세한 내용과 내가 위의 접근 방식을 선호하는 몇 가지 이유는 discovermeteor.com에서 확인할 수 있습니다.

사용자 인증

방금 시작한 곳으로 되돌아간 것처럼 보일 수 있지만 한 가지 중요한 차이점이 있습니다. 이제 데이터베이스에 대한 액세스를 제한하는 것이 정말 쉽습니다. 이것이 어떻게 작동하는지 보려면 이 앱에 사용자를 추가해 보겠습니다. 앱에 로그인 시스템을 추가한 다음 모든 클라이언트가 하나의 시스템 전체 책 목록으로 작업하도록 하는 대신 각 사용자가 자신의 책 목록에 추가하거나 읽을 수만 있도록 만들 것입니다.

앱 디렉터리로 이동하여 두 개의 패키지를 설치합니다.

 meteor add accounts-ui accounts-password

거기. 앱에 로그인 시스템을 추가했습니다. 이제 book-list.html에 로그인 UI를 추가하기만 하면 됩니다. 본문 맨 위에 다음 한 줄을 넣으십시오.

 {{> loginButtons}}

화면 상단에 로그인 프롬프트가 표시되어야 합니다.

로그인 프롬프트

로그인 링크를 클릭하면 이메일 주소와 비밀번호를 묻는 메시지가 표시됩니다. 다음이 포함된 "/client/config.js"를 생성하여 간단한 사용자 이름/비밀번호 로그인 시스템으로 전환할 수 있습니다.

 Accounts.ui.config({ passwordSignupFields: "USERNAME_ONLY" });

이 시점에서 콘솔에 "Meteor.userId()"를 입력하면 "null"이 반환됩니다. 링크를 클릭하여 계정을 만들 수 있습니다. "Meteor.userId()"를 호출하면 이제 ID 문자열을 반환해야 합니다. 서버는 이와 동일한 정보("this.userId")에 액세스할 수 있으므로 "책 추가" 메소드가 사용자를 강제로 로그인시키고 userID 필드를 포함하도록 만드는 것은 간단합니다.

 Meteor.methods({ addBook: function(bookData) { if (this.userId) { bookData.userID = this.userId; var bookID = Books.insert(bookData); return bookID; } } });

이제 남은 것은 클라이언트를 제한하여 이 사용자가 추가한 책만 표시하는 것입니다. 우리는 출판물의 기능을 사용하여 클라이언트가 액세스할 수 있는 범위를 좁힙니다.

 Meteor.publish('books', function() { return Books.find({userID: this.userId}); });

이제 발행물은 이 특정 사용자의 책만 찾습니다. Blaze 표현식에서 "{{currentUser}}"로 userId에 액세스할 수도 있습니다. "{{#if}}" 지시문과 함께 이것을 사용하여 사용자가 로그인했을 때만 데이터를 표시할 수 있습니다.

 <template name="bookList"> {{#if currentUser}} <h3>Here are your books:</h3> <UL> {{#each books}} <LI><i>{{title}}</i> by {{author}}</LI> {{/each}} </UL> <form class="add-book"> Title:<br> <input type="text" name="title"> <br> Author:<br> <input type="text" name="author"> <input type="submit" value="Add Book"> </form> {{else}} <h3>Please log in to see your books</h3> {{/if}} </template>

MeteorPad에서 최종 결과를 확인하세요: 사용자

전개

이제 이 Meteor 애플리케이션을 인터넷에 배포할 수 있습니다. 터미널의 애플리케이션 디렉토리로 이동하고 다음을 실행하여 이를 수행합니다.

 meteor deploy <your app's name>.meteor.com

"<앱 이름>"을 애플리케이션 인스턴스의 실제 짧은 이름으로 바꿔야 합니다. 이 명령을 실행하면 Meteor로 계정을 설정하라는 메시지가 표시되고 인터넷에서 사용해 볼 수 있도록 Meteor의 테스트 서버에 새 애플리케이션이 저장됩니다.

빠른 데모를 보려면 이 Meteor.com 솔루션만 있으면 됩니다. Meteor 팀은 서버의 스토리지 또는 대역폭에 대한 명시적인 제한을 발표하지 않았습니다. 유일한 주목할만한 제한 사항은 앱을 오랫동안 사용하지 않으면 다음 사용자를 위해 사이트가 가동되는 데 몇 초가 걸린다는 것입니다.

즉, meter.com은 상업적 용도로 사용되지 않습니다. 그러나 프로덕션으로 이동하면 Meteor 앱을 쉽게 배포할 수 있도록 해주는 Modulus 및 Digital Ocean과 같은 서비스로서의 플랫폼 회사가 있습니다. 자신의 서버에 유성 앱을 배포하려는 경우 "meteor up"을 사용하면 해당 프로세스도 간단합니다.

다음 단계

축하합니다! Meteor를 배우려는 과정에서 이제 매우 간단한 실시간 Meteor 웹 애플리케이션을 만들고 배포했습니다. 분명히 이것은 기능과 기능의 전체 세계로 들어가는 아주 작은 첫 번째 단계에 불과합니다. 지금까지 본 내용이 마음에 든다면 David Turnbull의 Your First Meteor Application을 강력히 추천합니다. 이 응용 프로그램은 독자에게 유성 기능에 대한 추가 정보와 함께 더 복잡한 응용 프로그램을 만드는 과정을 안내합니다. 그것은 작은 가격에 Kindle 책으로 제공되며 Turnbull의 웹 사이트에서 무료 PDF로 제공됩니다.

또한 Meteor에 사용할 수 있는 패키지를 탐색하고 싶을 것입니다. 열에 아홉은 "Meteor에서 <x>를 어떻게 하나요?"에 대한 대답입니다. "이를 위한 패키지가 있습니다"입니다. "내 애플리케이션에 라우팅을 어떻게 추가합니까?" Iron Router를 사용합니다. “RESTful API는 어떻게 제공하나요?” RESTivus를 사용합니다. "단위 테스트를 어떻게 포함합니까?" Velocity를 사용합니다. "스키마 유효성 검사를 어떻게 추가합니까?" Collection2를 사용합니다. 사용 가능한 모든 패키지를 보면 Atmosphere.js에서 쉽게 길을 잃을 수 있습니다.

왜 Meteor를 사용하지 않습니까?

이 튜토리얼에서 볼 수 있듯이 Meteor는 애플리케이션을 작성하는 데 간단하고 재미있지만 단점을 언급하지 않았다면 후회했을 것입니다.

Meteor는 아직 상대적으로 미숙합니다. 지난 10월에 1.0에 도달했고, 이는 몇 가지 문제로 이어집니다. 모호한 작업을 수행하려는 경우 해당 기능에 대한 패키지를 아직 작성하지 않은 사람이 있을 수 있습니다. 존재하는 패키지는 버그가 있을 가능성이 더 높습니다. 단순히 모든 문제를 해결할 만큼 오래 있지 않았기 때문입니다.

Meteor에서는 스케일링이 다소 알려지지 않을 수도 있습니다. 합당한 수의 사용자까지 확장할 수 있는 Meteor 사이트는 많이 있지만 매우 큰 사이트는 거의 없으며 수천만 또는 수억 명의 사용자가 있는 Facebook이나 LinkedIn이 없습니다.

그러나 대부분의 애플리케이션에서 Meteor는 완벽한 선택입니다. 개발 시간을 단축하고 위대한 일의 시작에 참여할 수 있는 기회이기 때문입니다.