References: Creating your first app
미티어 프레임워크에서 리액트를 사용해 봅시다.
1. 프로젝트 만들기
콘솔창에 다음과 같이 입력합니다: meteor create --react react-todoes
이후 cd react-todoes입력 후 meteor를 입력하면 알아서 필요한 작업을 진행 한 후 실행됩니다.
2. To-Do 리스트 만들기
본격적으로 소스를 수정해 보도록 하겠습니다.
/client/main.html
1 2 3 4 5 6 7 | <head> <title>Todo List</title> </head> <body> <div id="render-target"></div> </body> | cs |
/client/main.jsx
1 2 3 4 5 6 7 8 9 10 | import React from 'react'; import { Meteor } from 'meteor/meteor'; import { render } from 'react-dom'; import App from '../imports/ui/App'; Meteor.startup(() => { render(<App />, document.getElementById('render-target')); }); | cs |
/imports/ui/app.jsx
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | import React, { Component } from 'react'; import Task from './Task'; // App component - represents the whole app export default class App extends Component { getTasks() { return [ { _id: 1, text: 'This is task 1' }, { _id: 2, text: 'This is task 2' }, { _id: 3, text: 'This is task 3' }, ]; } renderTasks() { return this.getTasks().map((task) => ( <Task key={task._id} task={task} /> )); } render() { return ( <div className="container"> <header> <h1>Todo List</h1> </header> <ul> {this.renderTasks()} </ul> </div> ); } } | cs |
/imports/ui/Task.jsx
1 2 3 4 5 6 7 8 9 10 | import React, { Component } from 'react'; // Task component - represents a single todo item export default class Task extends Component { render() { return ( <li>{this.props.task.text}</li> ); } } | cs |
/client/main.css
/* CSS declarations go here */
body {
font-family: sans-serif;
background-color: #315481;
background-image: linear-gradient(to bottom, #315481, #918e82 100%);
background-attachment: fixed;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
padding: 0;
margin: 0;
font-size: 14px;
}
.container {
max-width: 600px;
margin: 0 auto;
min-height: 100%;
background: white;
}
header {
background: #d2edf4;
background-image: linear-gradient(to bottom, #d0edf5, #e1e5f0 100%);
padding: 20px 15px 15px 15px;
position: relative;
}
#login-buttons {
display: block;
}
h1 {
font-size: 1.5em;
margin: 0;
margin-bottom: 10px;
display: inline-block;
margin-right: 1em;
}
form {
margin-top: 10px;
margin-bottom: -10px;
position: relative;
}
.new-task input {
box-sizing: border-box;
padding: 10px 0;
background: transparent;
border: none;
width: 100%;
padding-right: 80px;
font-size: 1em;
}
.new-task input:focus{
outline: 0;
}
ul {
margin: 0;
padding: 0;
background: white;
}
.delete {
float: right;
font-weight: bold;
background: none;
font-size: 1em;
border: none;
position: relative;
}
li {
position: relative;
list-style: none;
padding: 15px;
border-bottom: #eee solid 1px;
}
li .text {
margin-left: 10px;
}
li.checked {
color: #888;
}
li.checked .text {
text-decoration: line-through;
}
li.private {
background: #eee;
border-color: #ddd;
}
header .hide-completed {
float: right;
}
.toggle-private {
margin-left: 5px;
}
@media (max-width: 600px) {
li {
padding: 12px 15px;
}
.search {
width: 150px;
clear: both;
}
.new-task input {
padding-bottom: 5px;
}
}
위와 같이 코드를 수정하면 다음과 같은 화면을 확인할 수 있습니다.
3. 몽고DB에 데이터 저장하기.
할일 정보를 몽고디비에 저장합니다.
리액트 컴포넌트에서 미티어의 컬렉션 데이터를 사용하려면 react-meteor-data 패키지를 설치해야 합니다.
콘솔에 다음을 입력합니다: meteor add react-meteor-data
** 확인해보니 제 프로젝트에는 자동으로 깔려 있더군요
이후 소스코드를 아래와 같이 수정합니다.
/imports/ui/app.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | import React, { Component } from 'react'; import { withTracker } from 'meteor/react-meteor-data'; import { Tasks } from '../api/tasks.js'; import Task from './Task'; // App component - represents the whole app class App extends Component { renderTasks() { return this.props.tasks.map((task) => ( <Task key={task._id} task={task} /> )); } render() { return ( <div className="container"> <header> <h1>Todo List</h1> </header> <ul> {this.renderTasks()} </ul> </div> ); } } export default withTracker(() => { return { tasks: Tasks.find({}).fetch(), }; })(App); | cs |
/imports/api/tasks.js
1 2 3 | import { Mongo } from 'meteor/mongo'; export const Tasks = new Mongo.Collection('tasks'); | cs |
/server/main.js
1 2 3 4 5 6 | import { Meteor } from 'meteor/meteor'; import '../imports/api/tasks.js'; Meteor.startup(() => { }); | cs |
여기까지 수정하셨으면 화면이 다음과 같이 바뀔 것 입니다.
이제 몽고디비에 데이터를 넣은 후 어떻게 보이는지 확인하겠습니다.
콘솔을 열고 다음을 입력해 주세요.
meteor mongo
db.tasks.insert({ text: "Hello world!", createdAt: new Date() });
그리고 화면을 확인해 봅시다.
반응형
'Programming > JavaScript' 카테고리의 다른 글
| NodeJS - Meteor with React Tutorial (3) (0) | 2019.02.18 |
|---|---|
| NodeJS - Meteor with React Tutorial (2) (0) | 2019.02.18 |
| NodeJS - Meteor 프레임워크 Blaze? React? (0) | 2019.02.15 |
| NodeJS - Meteor Autopublish (0) | 2019.02.15 |
| NodeJS - Meteor 프레임워크 사용해보기 (0) | 2019.02.15 |
