NodeJS - Meteor with React Tutorial (1)

2019. 2. 18. 15:41

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'));
});
 
Colored by Color Scripter
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>
    );
  }
}
Colored by Color Scripter
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>
    );
  }
}
Colored by Color Scripter
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);
Colored by Color Scripter
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(() => { });
 
Colored by Color Scripter
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

Simple is Beautiful.

NodeJS - Meteor with React Tutorial (1)

'Programming > JavaScript' 카테고리의 다른 글

+ Recent posts

티스토리툴바