Korean (한국어) translation by h1ghqlty. (you can also view the original English article)
Meteor 프로젝트는 자바 스크립트로 작성된 앱을 만들 수 있는 오픈 소스 웹 앱 개발 플랫폼입니다.
Meteor는 필수 웹 응용 프로그램 요구 사항에 대한 개발 도구를 제공하므로 신생 기업 및 새로운 프로젝트에 일반적으로 적합합니다. 그것은 하나의 코드 베이스 (iOS, 안드로이드, 데스크탑)에서 많은 장치에 배포하는 것과 같은 기능을 제공하며 핫 푸시 업데이트는 즉시 지원됩니다.
즉, 앱 스토어 승인을 기다리지 않고 사용자의 기기에서 앱을 업데이트할 수 있습니다. npm과 자체 Atmosphere 라이브러리를 통해 제공되는 풍부한 패키지로 Meteor는 작업할 수 있는 흥미로운 도구입니다.
미티어의 신속한 개발
3 년 전 Meteor를 사용하기 시작한 주된 이유 중 하나는 몇 시간 안에 작동하는 웹 응용 프로그램을 제공하는 신속한 기능이었습니다. 이를 통해 고객의 높은 기대치와 1 차 예선 자금 조달 예산을 제공할 수 있었습니다.
마지막으로, 겸손한 시작과 함께 큰 아이디어를 수용할 수 있는 이 웹 프레임 워크를 사용하면 최고 품질의 반응 형 모바일 웹 앱이 단일 개발 팀의 범위 내에 있습니다.
NPM + Atmosphere 패키지
Meteor에서 npm
의 패키지를 사용할 수 있으므로 Grunt, Browserify, Webpack, Bootstrap, React, jQuery 및 Angular와 같은 도구를 사용하려면 Meteor에서 이러한 패키지를 사용하는데 문제가 없습니다.
새 패키지를 검색:
- npm 패키지의 경우 npmjs.com을 사용하십시오.
- Meteor 패키지의 경우에는 atmospherejs.com을 사용하십시오.
Meteor에서 npm 패키지를 설치하려면 다음을 실행하십시오.
1 |
$ meteor npm install --save browserify |
이 명령을 실행하면 package.json
이 종속성으로 업데이트되고 패키지를 응용 프로그램의 로컬 node_modules/
디렉토리로 다운로드합니다.
버전 관리
중요한 사항 : 이식 가능성을 위해서 node_modules/
를 git에 맡기지 말고 새로운 개발자에게 전달하는 대신 meteor npm install
을 실행하도록 요청하면 필요한 모든 패키지가 설치됩니다.
사용자 계정



accounts-ui 패키지를 사용하면 사용자가 로그인하여 앱을 등록할 수 있으며 oAuth 지원 기능을 제공하여 Meteor 계정과 인터페이스 할 수 있습니다.
브랜드 및 커뮤니케이션 목적을 위해 이메일 확인 (sendVerificationEmail
) 또는 초대장 (sendEnrollmentEmail
)을 앱의 전체 테마에 맞게 맞춤 설정하는 것이 일반적인 요청입니다.
Meteor에서 HTML 이메일을 작성하는 가장 좋은 방법은 요기벤 (Yogiben)의 pretty emails 패키지를 사용하는 것입니다.
1 |
meteor add yogiben:pretty-email |
이제 몇 줄만 사용해 확인 이메일을 변경할 수 있습니다.
1 |
PrettyEmail.defaults.verifyEmail = |
2 |
heading: 'Yo - You Need to activate your account on mega mushrooms' |
3 |
buttonText: 'Activate' |
4 |
... |
회사 정보를 위해 PrettyEmail.options
를 다음과 같이 구성 할 수 있습니다.
1 |
PrettyEmail.options = |
2 |
from: 'support@mycompany.com' |
3 |
logoUrl: 'http://mycompany.com/logo.png' |
4 |
companyName: 'myCompany' |
5 |
companyUrl: 'http://mycompany.com' |
6 |
companyAddress: '123 Street, ZipCode, City, Country' |
7 |
companyTelephone: '+1234567890' |
8 |
companyEmail: 'support@mycompany.com' |
9 |
siteName: 'mycompany' |
전자 메일을 보내려면 다음 방법을 사용하십시오.
1 |
Accounts.sendVerificationEmail Meteor.userId() |
2 |
Accounts.sendResetPasswordEmail Meteor.userId() |
3 |
Accounts.sendEnrollmentEmail Meteor.userId() |
템플릿을 추가하려면 다음 옵션을 사용자 정의하여 템플릿을 추가할 수 있습니다.
1 |
PrettyEmail.send 'call-to-action', |
2 |
to: 'myuser@myuser.com' |
3 |
subject: 'You got new message' |
4 |
heading: 'Your friend sent you a message' |
5 |
message: 'Click the button below to read the message' |
6 |
buttonText: 'Read message' |
7 |
buttonUrl: 'http://mycompany.com/messages/2314' |
8 |
messageAfterButton: "I come after the button!" |
스타일을 변경하는 것도 매우 쉽습니다.
1 |
PrettyEmail.style = |
2 |
fontFamily: 'Helvetica' |
3 |
textColor: '#606060' |
4 |
buttonColor: '#FFFFFF' |
5 |
buttonBgColor: '#007FFF |
다음은 사용자가 이메일 클라이언트에서 수신할활성화 이메일의 예입니다.



Pretty email에는 소셜, 백 링크, 머리말과 꼬리말 등을 위한 전체 옵션이 더 많이 있습니다. 자세한 내용은 메뉴얼 페이지를 참조하십시오.
래칫, 구체화 및 부트 스트랩 지원
또한 널리 사용되는 프론트 엔드 라이브러리와 Ionic에 대한 사용자 계정 패키지가 있습니다. 각각은 고객의 요구에 맞게 완전히 구성할 수 있습니다.
- Ratchet:
meteor add useraccounts:ratchet
- Ionic:
meteor add useraccounts:ionic
- Bootstrap:
meteor add useraccounts:bootstrap
- Materialize:
meteor add useraccounts:materialize
UI
사용자 계정과 마찬가지로 Bootstrap, Angular, React 및 Blaze 템플릿 엔진과 같은 대중적인 프론트 엔드 라이브러리와 Semantic UI와 같은 많은 패키지가 있습니다.
대기 검색은 많은 결과를 산출합니다. 여기 저의 즐겨찾기 중 일부가 있습니다 :
- 각 패키지 : angularui
- 시맨틱 UI 통합 : Semantic-UI-Meteor
- 블레이즈 부품 (블레이즈 재사용 가능 부품) : blaze-components
- 로닉 부품: meteoric:아이오닉
- 래칫 프레임 워크: pcjpcj2:ratchet
반응 + 부트 스트랩
먼저 다음과 같이 React npm 패키지를 설치해야합니다.
1 |
$ npm install --save react react-dom |
2 |
$ npm install --save react-bootstrap |
이제 meteor 패키지에 meteor add universe:react-bootstrap
을 실행하십시오.
React JSX 내에서 Bootstrap components를 사용할 수 있습니다.
1 |
const buttonsInstance = ( |
2 |
<div> |
3 |
<ButtonToolbar> |
4 |
<Button bsStyle="primary" bsSize="large">Large button</Button> |
5 |
<Button bsSize="large">Large button</Button> |
6 |
</ButtonToolbar> |
7 |
<ButtonToolbar> |
8 |
<Button bsStyle="primary">Default button</Button> |
9 |
<Button>Default button</Button> |
10 |
</ButtonToolbar> |
11 |
<ButtonToolbar> |
12 |
<Button bsStyle="primary" bsSize="small">Small button</Button> |
13 |
<Button bsSize="small">Small button</Button> |
14 |
</ButtonToolbar> |
15 |
<ButtonToolbar> |
16 |
<Button bsStyle="primary" bsSize="xsmall">Extra small button</Button> |
17 |
<Button bsSize="xsmall">Extra small button</Button> |
18 |
</ButtonToolbar> |
19 |
</div> |
20 |
); |
21 |
|
22 |
ReactDOM.render(buttonsInstance, mountNode); |
페이지 전환
Iron Router를 사용한다면 meteor-transitioner 패키지를 이용할 수 있습니다. Blaze 템플릿을 작업하면서 {{yield}}
주위에 다음 핸들 바를 추가하십시오 :
1 |
{{#transitioner}} |
2 |
{{> yield}} |
3 |
{{/transitioner}} |
이제 경로간 전환을 설정하십시오.
1 |
Transitioner.transition({ |
2 |
fromRoute: 'fromRouteName', |
3 |
toRoute: 'toRouteName', |
4 |
velocityAnimation: { |
5 |
in: animation, |
6 |
out: animation |
7 |
} |
8 |
}) |
전환에 대한 자세한 내용은 README를 확인하십시오.
Mongo
웹 브라우저에서 몽고 데이터베이스를 편집 할 때 몽골 도구는 내가 사용한 최고의 도구 중 하나입니다. 몽고를 다음과 같이 설치하면 :
1 |
$ meteor add msavin:mongol |
Control-M을 누르기 만하면 전체 브라우저 내 CRUD 지원을 통해 컬렉션에 액세스 할 수 있습니다.
몽골을 사용하면 새로운 앱이나 기존 앱의 데이터를 디버깅할 때 매우 유용합니다.



브라우저 확장
Chrome에서 작업하는 사용자의 경우 MiniMongo라는 Mongo 플러그인을 사용하면 개발자 도구 창에서 Meteor 데이터베이스를 탐색할 수 있습니다.
MiniMongo Explorer 프로젝트는 직접 소스를 빌드하려는 경우 GitHub에서 사용할 수 있습니다.
전개
뛰어난 무료 도구 mup
을 사용하면 몇 분 안에 Digital Ocean VPN에 사이트를 배포할 수 있습니다.
설정은 매우 간단하며 HTTPS를 사용하려면 앱, SSH 자격증 명 및 SSL 인증서만 있으면 됩니다.
mup
을 설정하려면 배포할 디렉토리를 만들어야 합니다.
1 |
$ cd meteor-app |
2 |
$ mkdir .deploy |
3 |
$ cd .deploy |
mup 설치하기:
1 |
$ npm install -g mup |
디렉토리 초기화:
1 |
$ mup init |
이제 이전 단계에서 작성한 mup.js 파일을 설정하여 배치를 구성해야 합니다.
1 |
module.exports = { |
2 |
servers: { |
3 |
one: { |
4 |
host: '1.2.3.4', |
5 |
username: 'root', |
6 |
// pem: '/home/user/.ssh/id_rsa', |
7 |
// password: 'password', |
8 |
// or leave blank to authenticate using ssh-agent |
9 |
opts: { |
10 |
port: 22, |
11 |
}, |
12 |
} |
13 |
}, |
14 |
|
15 |
meteor: { |
16 |
name: 'app', |
17 |
path: '../app', |
18 |
// lets you add docker volumes (optional) |
19 |
volumes: { |
20 |
// passed as '-v /host/path:/container/path' to the docker run command |
21 |
'/host/path': '/container/path', |
22 |
'/second/host/path': '/second/container/path' |
23 |
}, |
24 |
docker: { |
25 |
// Change the image to 'kadirahq/meteord' if you |
26 |
// are using Meteor 1.3 or older |
27 |
image: 'abernix/meteord:base' , // (optional) |
28 |
imagePort: 80, // (optional, default: 80) |
29 |
|
30 |
// lets you add/overwrite any parameter on |
31 |
// the docker run command (optional) |
32 |
args: [ |
33 |
'--link=myCustomMongoDB:myCustomMongoDB', // linking example |
34 |
'--memory-reservation 200M' // memory reservation example |
35 |
], |
36 |
// (optional) Only used if using your own ssl certificates. |
37 |
// Default is "meteorhacks/mup-frontend-server" |
38 |
imageFrontendServer: 'meteorhacks/mup-frontend-server', |
39 |
// lets you bind the docker container to a |
40 |
// specific network interface (optional) |
41 |
bind: '127.0.0.1', |
42 |
// lets you add network connections to perform after run |
43 |
// (runs docker network connect <net name> for each network listed here) |
44 |
networks: [ |
45 |
'net1' |
46 |
] |
47 |
}, |
48 |
|
49 |
// list of servers to deploy, from the 'servers' list |
50 |
servers: { |
51 |
one: {}, two: {}, three: {} |
52 |
}, |
53 |
|
54 |
buildOptions: { |
55 |
// skip building mobile apps, but still build the web.cordova architecture |
56 |
serverOnly: true, |
57 |
debug: true, |
58 |
cleanAfterBuild: true, // default |
59 |
buildLocation: '/my/build/folder', // defaults to /tmp/<uuid> |
60 |
|
61 |
// set serverOnly: false if want to build mobile apps when deploying |
62 |
|
63 |
// Remove this property for mobileSettings to use your settings.json |
64 |
// (optional) |
65 |
mobileSettings: { |
66 |
yourMobileSetting: 'setting value' |
67 |
}, |
68 |
server: 'http://app.com', // your app url for mobile app access (optional) |
69 |
// adds --allow-incompatible-updates arg to build command (optional) |
70 |
allowIncompatibleUpdates: true, |
71 |
}, |
72 |
env: { |
73 |
// PORT: 8000, // useful when deploying multiple instances (optional) |
74 |
ROOT_URL: 'http://app.com', // If you are using ssl, this needs to start with https |
75 |
MONGO_URL: 'mongodb://localhost/meteor' |
76 |
}, |
77 |
log: { // (optional) |
78 |
driver: 'syslog', |
79 |
opts: { |
80 |
'syslog-address': 'udp://syslogserverurl.com:1234' |
81 |
} |
82 |
}, |
83 |
ssl: { |
84 |
// Enables let's encrypt (optional) |
85 |
autogenerate: { |
86 |
email: 'email.address@domain.com', |
87 |
domains: 'website.com,www.website.com' // comma separated list of domains |
88 |
} |
89 |
}, |
90 |
deployCheckWaitTime: 60, // default 10 |
91 |
// lets you define which port to check after the deploy process, if it |
92 |
// differs from the meteor port you are serving |
93 |
// (like meteor behind a proxy/firewall) (optional) |
94 |
deployCheckPort: 80, |
95 |
|
96 |
// Shows progress bar while uploading bundle to server (optional) |
97 |
// You might need to disable it on CI servers |
98 |
enableUploadProgressBar: true // default false. |
99 |
}, |
100 |
|
101 |
mongo: { // (optional) |
102 |
port: 27017, |
103 |
version: '3.4.1', // (optional), default is 3.4.1 |
104 |
servers: { |
105 |
one: {}, |
106 |
}, |
107 |
}, |
108 |
}; |
이제 서버를 설정하십시오.
1 |
$ mup setup |
배포:
1 |
$ mup deploy |
터미널에서 프로세스의 각 단계에 대한 확인을 볼 수 있습니다. 배포가 완료되면 앱이 서버에 게시되고 브라우저에서 앱을 확인할 수 있습니다.
SSL로 구성하는 방법에 대한 자세한 내용은 이 가이드를 참조하십시오.
캐싱
Meteor에는 appcache
가 제공됩니다. appcache는 첫 번째 로드 후에 앱을 캐시하지만 오프라인 사용에는 캐시하지 않습니다.
오프라인으로 캐시하려면 GroundMeteor를 사용해야합니다. 이것은 LocalCollection에서 작동하는 클라이언트 전용 저장소입니다.
예를 들어, 우리는 컬렉션을 모니터하고 로컬로 저장할 수 있습니다.
1 |
local = new Ground.Collection('offlineCache'); |
2 |
|
3 |
local.observeSource(Data.find()); |
4 |
|
5 |
Meteor.setTimeout(() => { |
6 |
// Stop observing - keeping all documents as is |
7 |
local.stopObserver(); |
8 |
}, 1000); |
여기에서 Data.find()
게시의 내용은 오프라인 Ground Collection에 캐시됩니다.
키 스토어 캐시
메모리 키 저장소 캐싱의 경우 memcache 패키지 또는 redis 패키지를 사용하여 서버의 데이터 캐싱에 액세스할 수 있습니다.
이 패키지는 memcache 또는 redis 서버가 이미 실행 중이며 memcache에 키를 저장할 수 있다고 가정합니다.
1 |
var memcached = new Memcached( [ 'localhost:11211', 'localhost:11212'] ); |
2 |
|
3 |
memcached.set( "key", "value", 2, function (err, res) { |
4 |
console.log("memcached set action response", err, res); |
5 |
}); |
또는 Redis 컬렉션:
1 |
var redisCollection = new Meteor.RedisCollection("redis"); |
2 |
|
3 |
Meteor.publish("movies", function () { |
4 |
return redisCollection.matching("movies-*"); |
5 |
}); |
Redis 구현은 Meteor의 publish/subscribe 아키텍처를 통해 브로드 캐스팅하는 데 사용할 수 있으므로 매우 유용합니다.
개발 도구
이미 언급 한 도구 외에도 Meteor 용 Chrome에서 사용할 수 있는 Firebug와 유사한 브라우저 확장은 디버깅을 훨씬 쉽게 만듭니다. DDP 탭에서 서버에서 클라이언트로 전달되는 데이터를 모니터링하고 Blaze 속성을 통해 Blaze 템플릿을 검토할 수 있습니다.



IDE 도구
Sublime 텍스트 편집기의 개발을 위해 Tern.js 패키지의 사용자 정의 버전은 Meteor에 자동 완성 기능을 제공합니다. GitHub에서 다운로드하십시오.
JetBrains은 Meteor 프로젝트와 구문 강조 및 디버깅을 자동으로 통합합니다. Atom은 구문, 코드 스 니펫 및 자동 완성을 위한 여러 패키지도 제공합니다.
보일러 플레이트



이미 설정한 앱으로 빠르게 가고 싶다면 요기벤의 초보자를 볼 수 있습니다. Meteor chef는 훌륭한 베이스 스타터를 보유하고 있습니다. React를 사용하려면 이 Yeoman 생성기를 출발점으로 볼 수 있습니다.
Meteor Kitchen은 앱을 시작하는데 도움을 더하기 위해 경로 및 환경 설정을 위한 GUI를 제공합니다.
관리 패널



Yogiben의 Meteor Starter를 사용하고 있다면, 그가 만든 관리자 패널이 잘 작동하는지 확인할 수도 있습니다. React Router 애플 리케이션은 Iron Router와 충돌할 수 있지만, mongo와 blaze를 사용하는 거의 모든 프로젝트가 이에 적합해야 합니다.
관리자 패널의 테마는 광범위하게 수정할 수 있으며 설명서를 읽을 수 있습니다.
Meteorites에서 Meteor



여기서 끝내기 전에 Meteor 프로젝트에 대한 배경 지식을 알려 드리겠습니다. Meteor는 벤처 캐피털 회사 Andreessen Horowitz로부터 1120만 달러를 지원받은 Y Combinator 인큐베이터 프로젝트의 결과인 2012년 1월에 공개되었습니다.
처음에는 Meteorite (cli에서 mrt
)라는 패키지 관리자로 시작했으며 확장 성은 항상 Meteor의 핵심 요소였습니다. Meteor 0.9가 출시됨에 따라, 분위기 패키지의 시작과 함께 상황이 바뀌었습니다.
Meteor app에 패키지를 추가하는 것은 meteor add mrt:moment
처럼 간단해 졌습니다.
이 프로젝트의 추진력이 계속됨에 따라, 그것은 대중의 관심을 얻었으며 오래되고 새로운 개발자들에 의해 채택되었습니다. 이를 위한 핵심 드라이버 중 하나는 Java Script와 클라이언트 및 서버에서 완벽하게 작동할 수 있는 유연성이었습니다.
처음에는 Meteor가 1.3 버전을 출시하기 전까지는 npm 패키지를 사용할 수 없었습니다. 이 버전은 지금까지 개발 사이클에서 중대한 이정표로 기록되었습니다.
전체적으로 Java Script로 작업 Meteor는 npm
의 통합으로 기존 JS 및 노드 라이브러리의 방대한 라이브러리와 인터페이스 할 수 있었습니다.이로써 Meteor는 프레임 워크로서 최첨단을 갖추게 되었습니다.
Meteor, npm
및 그 대기 패키지가 여러분의 손끝에 전달하는 강력한 힘의 크기를 생각하면 웹 개발에 대한 우리의 진전을 확실히 볼 수 있습니다. 이것은 Flash, NotePad / Dreamweaver, PHP 3 이전의 pre-jQuery, pre-npm, pre-bower 시절에 커다란 변화를 겪었습니다. 많은 팀에서 일했습니다. 우스꽝스럽지 않고 한두 명의 개발자가 Meteor에서 수주 만에 끝낼 수있는 작품을 제작하는 10 명의 직원이 있었습니다.
이러한 도구를 사용하여 기술적으로 염두에 둔 웹 기업가가 되는 데 더 좋은 시기는 없었습니다. 꿈의 앱을 직접 제작하는 것은 확실히 가능합니다.
예를 들어, 오늘은 데이터베이스 기반의 CMS와 Facebook 및 Google+ oAuth 로그인을 사용하는 완전한 사용자 시스템 및 관리자 백 오피스를 통합했습니다. 디버깅할 사람들과 공유할 새 서버에 이 서버를 배포했는데 실시간으로 변경되는 데이터를 볼 수 있었습니다.
Meteor는 실제로 그렇게 빨리 작동합니다. 양식 검증이 완료되고 단 8 시간의 개발 시간이 지나면 적절한 데이터 입력 작업이 내일부터 시작될 수 있습니다.
결론
Meteor는 강력하고 강력한 웹 애플리케이션 엔진으로 앱 개발에 앞장설 것입니다.
다행히도 여기에 언급된 패키지와 조언을 통해 곧바로 앱을 만들 수 있습니다. 나를 위해, 짧은 시간에 내 앱 아이디어를 실현하면 창의성이 번창하고 혁신이 쉬워질 수 있습니다.
Meteor에서 모든 것을 위한 패키지가 존재하기 때문에 개발을 쉽게 할 수 있습니다. 더 많은 초점은 구성에 있으며, 이는 개발 경험을 훨씬 더 멋지게 만듭니다.
특정 프로젝트의 문제에 대한 지원을 받으려면 GitHub에서 프로젝트를 검색하고 개발자가 처리할 저장소에 문제를 제기할 수 있습니다.
Meteor에 대한 더 많은 조언을 원할 경우, 공식 포럼은 항상 좋은 곳입니다.