Skip to content

Commit

Permalink
update for 0.9.0
Browse files Browse the repository at this point in the history
  • Loading branch information
Lee Sangwon committed Sep 7, 2014
1 parent 7389e44 commit 53409dc
Show file tree
Hide file tree
Showing 7 changed files with 28 additions and 27 deletions.
5 changes: 4 additions & 1 deletion 02-getting-started.md.erb
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,6 @@ $ meteor create microscope
microscope.css
microscope.html
microscope.js
smart.json
~~~

미티어가 만든 이 앱은 몇 가지 단순한 패턴을 보여주는 간단한 보일러플레이트 애플리케이션이다.
Expand Down Expand Up @@ -247,6 +246,10 @@ body {
text-decoration: none;
background: rgba(0, 0, 0, 0.1);
}
.posts .spinner-container{
position: relative;
height: 100px;
}
~~~
<%= caption "client/stylesheets/style.css" %>
Expand Down
2 changes: 1 addition & 1 deletion 03s-using-github.md.erb
Original file line number Diff line number Diff line change
Expand Up @@ -114,7 +114,7 @@ HEAD is now at c7af59e... Augmented the postsList route to take a limit
$ git checkout master
~~~

이 과정의 어느 시점에서나, “detached HEAD” 상태에서도, 앱을 `meteor` 명령어로 실행시킬 수도 있다. 만약 Meteor가 패키지가 누락되었다는 메시지를 보이면 `mrt update` 명령을 바로 실행시키면 되는데, 이것은 Microscope의 Git 저장소에는 패키지가 포함되어 있지 않기 때문이다.
이 과정의 어느 시점에서나, “detached HEAD” 상태에서도, 앱을 `meteor` 명령어로 실행시킬 수도 있다. 만약 Meteor가 패키지가 누락되었다는 메시지를 보이면 `meteor update` 명령을 바로 실행시키면 되는데, 이것은 Microscope의 Git 저장소에는 패키지가 포함되어 있지 않기 때문이다.

### History 관점

Expand Down
8 changes: 4 additions & 4 deletions 04-collections.md.erb
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@ Posts = new Meteor.Collection('posts');

<%= screenshot "mongo-shell", "Mongo 쉘" %>

- 터미널에서 `meteor mongo`나 `mrt mongo` 명령어를 실행하여 구동된다.
- 터미널에서 `meteor mongo` 명령어를 실행하여 구동된다.
- 앱의 데이터베이스에 직접 접속한다.
- 프롬프트: `>`.
- 다른 이름: Mongo Console
Expand Down Expand Up @@ -236,7 +236,7 @@ if (Posts.find().count() === 0) {
~~~
<%= caption "브라우저 콘솔" %>

이 post들을 HTML에 보이기 위해서, 템플릿 헬퍼를 사용한다. 3장에서 우리는 미티어에서 단순 데이터 구조의 HTML 뷰를 구축하기 위하여 *데이터 컨텍스트*를 Handlers 템플릿에 엮는 방법을 적용해 보았다. 컬렉션 데이터도 같은 방법으로 엮을 수 있다. 단지, 정적인 `postsData` Javascript 데이터 객체를 동적인 컬렉션으로 바꾸기만 하면 된다.
이 post들을 HTML에 보이기 위해서, 템플릿 헬퍼를 사용한다. 3장에서 우리는 미티어에서 단순 데이터 구조의 HTML 뷰를 구축하기 위하여 *데이터 컨텍스트*를 Spacebars 템플릿에 엮는 방법을 적용해 보았다. 컬렉션 데이터도 같은 방법으로 엮을 수 있다. 단지, 정적인 `postsData` Javascript 데이터 객체를 동적인 컬렉션으로 바꾸기만 하면 된다.

안그래도, `postsData` 코드는 편하게 삭제한다. 이제 `posts_list.js` 파일의 코드는 다음과 같을 것이다:

Expand Down Expand Up @@ -266,7 +266,7 @@ Template.postsList.helpers({

<%= screenshot "4-3", "라이브 데이터 사용하기" %>

이와같이 우리는 `{{#each}}` 헬퍼가 `Posts` 전체를 반복하여, 이들을 화면에 뿌려주었다는 것을 명확하게 알게 된다. 서버쪽의 컬렉션은 Mongo로부터 post 목록을 추출하여, 이들을 클라이언트쪽의 컬렉션에 넘기고, handlebars 헬퍼가 이들을 템플릿으로 전달한 것이다.
이와같이 우리는 `{{#each}}` 헬퍼가 `Posts` 전체를 반복하여, 이들을 화면에 뿌려주었다는 것을 명확하게 알게 된다. 서버쪽의 컬렉션은 Mongo로부터 post 목록을 추출하여, 이들을 클라이언트쪽의 컬렉션에 넘기고, Spacebars 헬퍼가 이들을 템플릿으로 전달한 것이다.

이제, 한 단계를 더 나가자; 브라우저 콘솔에서 새로운 post를 추가해보자:

Expand All @@ -283,7 +283,7 @@ Template.postsList.helpers({

<%= screenshot "4-4", "콘솔에서 post 추가하기" %>

독자는 처음으로 반응형으로 동작하는 것을 본 것이다. 우리가 handlebars에게 `Posts.find()` 커서를 통해서 반복하도록 지시했을 때, 이것은 지속적으로 변화를 관찰하면서, 그 HTML을 가장 간단한 방식으로 수정하여 화면에 올바른 데이터를 보여준다.
독자는 처음으로 반응형으로 동작하는 것을 본 것이다. 우리가 Spacebars에게 `Posts.find()` 커서를 통해서 반복하도록 지시했을 때, 이것은 지속적으로 변화를 관찰하면서, 그 HTML을 가장 간단한 방식으로 수정하여 화면에 올바른 데이터를 보여준다.

<% note do %>

Expand Down
8 changes: 3 additions & 5 deletions 05-routing.md.erb
Original file line number Diff line number Diff line change
Expand Up @@ -22,13 +22,11 @@ paragraphs: 72
먼저, 이 패키지를 Atmosphere로부터 설치한다:

~~~bash
$ mrt add iron-router
$ meteor add iron:router
~~~
<%= caption "터미널" %>

이 명령어는 iron-router 패키지를 다운로드하여 앱에 설치하고, 사용할 수 있는 상태로 만든다. 때로 이 패키지를 사용하기 전에 앱을 재구동(`ctrl+c`로 프로세스를 삭제한 다음 `mrt`로 다시 구동한다)해야 할 수도 있다는 점에 유의하라.

유의할 사항은 Iron Router는 서드파티 패키지이므로, 이를 설치하려면 Meteorite를 이용해야 한다(`meteor add iron-router` 명령은 작동하지 않는다).
이 명령어는 Iron Router 패키지를 다운로드하여 앱에 설치하고, 사용할 수 있는 상태로 만든다. 때로 이 패키지를 사용하기 전에 앱을 재구동(`ctrl+c`로 프로세스를 삭제한 다음 `meteor`로 다시 구동한다)해야 할 수도 있다는 점에 유의하라.

<% note do %>

Expand Down Expand Up @@ -173,7 +171,7 @@ Router.onBeforeAction('loading');

구독을 기다리도록 하는 것은 좋은 아이디어이다. 사용자 체험 측면에서 뿐 아니라, 데이터를 템플릿 내부에서 항상 이용할 수 있다고 생각할 수 있다는 점에서도 그렇다. 이렇게 함으로써 데이터를 받기 전에 템플릿이 화면을 그리도록 - 종종 기교를 부려야 한다 - 해야 할 필요가 없게 된다.

마지막 단계는 바로 `loadingTemplate`이다. 우리는 `spin` 패키지를 사용하여 멋진 애니메이션이 되는 스피너를 만든다. `mrt add spin`명령어로 추가한 다음, 아래 코드로 `loading` 템플릿을 만든다:
마지막 단계는 바로 `loadingTemplate`이다. 우리는 `spin` 패키지를 사용하여 멋진 애니메이션이 되는 스피너를 만든다. `meteor add sacha:spin`명령어로 추가한 다음, 아래 코드로 `loading` 템플릿을 만든다:

~~~html
<template name="loading">
Expand Down
6 changes: 3 additions & 3 deletions 06-adding-users.md.erb
Original file line number Diff line number Diff line change
Expand Up @@ -19,11 +19,11 @@ UI가 데이터의 변경에 어떻게 반응하는 지도 보았고, 추가되

다행히, 미티어가 대신해준다. 미티어 패키지가 서버(Javascript)와 클라이언트(JavaScript, HTML, 그리고 CSS) 양쪽에서 작동하는 덕분에 계정 시스템이 거의 공짜로 구현된다.

우리는 미티어의 계정에 대한 빌트인 UI(`mrt add accounts-ui` 명령으로)를 사용하면 되는데, 현재 앱을 Bootstrap으로 구현하고 있으므로, 대신에 `accounts-ui-bootstrap-dropdown` 패키지(걱정마라. 다른 점은 오로지 스타일뿐이다)로 구현한다. 커맨드 라인에서 다음과 같이 입력한다:
우리는 미티어의 계정에 대한 빌트인 UI(`meteor add accounts-ui` 명령으로)를 사용하면 되는데, 현재 앱을 Bootstrap으로 구현하고 있으므로, 대신에 `accounts-ui-bootstrap-dropdown` 패키지(걱정마라. 다른 점은 오로지 스타일뿐이다)로 구현한다. 커맨드 라인에서 다음과 같이 입력한다:

~~~bash
$ mrt add accounts-ui-bootstrap-dropdown
$ mrt add accounts-password
$ meteor add mrt:accounts-ui-bootstrap-dropdown
$ meteor add accounts-password
~~~
<%= caption "터미널" %>

Expand Down
24 changes: 12 additions & 12 deletions 09s-creating-a-meteorite-package.md.erb
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
---
title: Meteorite 패키지 만들기
slug: creating-a-meteorite-package
title: Meteor 패키지 만들기
slug: creating-a-meteor-package
date: 0009/01/02
number: 9.5
sidebar: true
Expand All @@ -10,7 +10,7 @@ paragraphs: 22

오류에 대한 재사용 가능한 패턴을 구축했는데, 이를 묶어 스마트 패키지를 만들고 이를 미티어 커뮤니티에서 공유하도록 하면 어떨까?

첫째, 이 패키지의 구조를 만들어야 한다. 우리는 이 패키지를 `packages/errors` 라는 이름의 디렉토리에 넣는다. 이렇게 하면 자동으로 사용되는 커스텀 패키지가 된다(Meteorite가 `packages/` 디렉토리 에 symlink로 패키지를 설치한다는 사실을 알지 모르겠다).
첫째, 이 패키지의 구조를 만들어야 한다. 우리는 이 패키지를 `packages/errors` 라는 이름의 디렉토리에 넣는다. 이렇게 하면 자동으로 사용되는 커스텀 패키지가 된다(Meteor가 `packages/` 디렉토리 에 symlink로 패키지를 설치한다는 사실을 알지 모르겠다).


둘째, 그 폴더에 `package.js`를 만든다. 이 파일은 미티어에게 해당 패키지를 사용하는 방법과 그 패키지가 내보내는 symbol들을 알려준다.
Expand Down Expand Up @@ -172,7 +172,7 @@ Tinytest.addAsync("Errors template works", function(test, done) {

~~~js
Package.on_test(function(api) {
api.use('errors', 'client');
api.use('tmeasday:errors', 'client');
api.use(['tinytest', 'test-helpers'], 'client');

api.add_files('errors_tests.js', 'client');
Expand All @@ -185,7 +185,7 @@ Package.on_test(function(api) {
그러면 다음 명령어로 테스트를 실행할 수 있다:

~~~bash
$ meteor test-packages errors
$ meteor test-packages tmeasday:errors
~~~
<%= caption "터미널" %>
Expand All @@ -195,7 +195,7 @@ $ meteor test-packages errors

이제, 패키지를 릴리즈하여 모두가 이를 이용할 수 있게 하려고 한다. 그렇게 하려면 Atmosphere에 올리면 된다.

우선, `smart.json`을 추가하여 Meteorite와 Atmosphere에 그 패키지에 대한 중요한 상세 내용을 알린다:
우선, `smart.json`을 추가하여 Meteor와 Atmosphere에 그 패키지에 대한 중요한 상세 내용을 알린다:

~~~json
{
Expand All @@ -217,31 +217,31 @@ $ meteor test-packages errors

이 모두가 마무리되면 릴리즈는 쉽다. git 저장소를 만들고 원격 git 서버로 올리고, `smart.json`에 그 주소에 대한 연결정보를 추가한다.

[GitHub](http://github.com)에서 이 작업을 하려면, 우선 새 저장소를 만든 다음, 그 저장소에서 패키지의 코드를 얻는 일반적인 과정을 따른다. 그리고, `mrt release` 명령어를 사용하여 게재한다:
[GitHub](http://github.com)에서 이 작업을 하려면, 우선 새 저장소를 만든 다음, 그 저장소에서 패키지의 코드를 얻는 일반적인 과정을 따른다. 그리고, `meteor release` 명령어를 사용하여 게재한다:

~~~bash
$ git init
$ git add -A
$ git commit -m "Created Errors Package"
$ git remote add origin https://github.com/tmeasday/meteor-errors.git
$ git push origin master
$ mrt release .
$ meteor release .
Done!
~~~
<%= caption "터미널 (`packages/errors` 내에서 실행한다)" %>

주: 패키지 이름은 유일해야 한다. 위의 내용을 문자 그대로 따라하여 동일한 패키지 이름을 사용하면, 충돌이 발생해서 작동하지 않게 될 것이다. 미래에 Atmosphere는 저자에 따른 네임스페이스를 가지게 될 것이므로, 이 이름이 바뀔 수 있다는 점을 감안하기 바란다.

두 번째 주: http://atmosphere.meteor.com에 로그인하여 `mrt release`를 호출할 때 커맨드 라인에서 입력할 username과 비밀번호를 만들어야 한다.
두 번째 주: http://atmosphere.meteor.com에 로그인하여 `meteor release`를 호출할 때 커맨드 라인에서 입력할 username과 비밀번호를 만들어야 한다.

이제 패키지가 릴리즈되면, 프로젝트에서 그것을 제거하고 Meteorite를 이용하여 그것을 직접 복원한다:
이제 패키지가 릴리즈되면, 프로젝트에서 그것을 제거하고 그것을 직접 추가하여 복원한다:

~~~bash
$ rm -r packages/errors
$ mrt add errors
$ meteor add errors
~~~
<%= caption "터미널 (앱의 루트 경로에서 실행한다)" %>
<%= scommit "9-5-4", "개발 트리에서 패키지를 삭제했다." %>

이제 Meteorite에서 패키지를 다운로드하는 것을 처음으로 볼 수 있을 것이다. 잘했다!
이제 Meteor에서 패키지를 다운로드하는 것을 처음으로 볼 수 있을 것이다. 잘했다!
2 changes: 1 addition & 1 deletion 12-pagination.md.erb
Original file line number Diff line number Diff line change
Expand Up @@ -378,7 +378,7 @@ Post 목록 화면은 다음과 같이 보일 것이다:
iOS의 사파리나 Medium과 유튜브같은 사이트와 유사하게, `iron-router-progress`는 얇은 로딩바를 화면의 상단에 추가한다. 이를 구현하는 것은 앱에 패키지를 추가하는 것처럼 쉽다:

~~~bash
mrt add iron-router-progress
meteor add mrt:iron-router-progress
~~~
<%= caption "bash console" %>

Expand Down

0 comments on commit 53409dc

Please sign in to comment.