2018~2019/React.js
2. React와 Express, MongoDB 연동하기 (1) Retrieve
전기도둑
2018. 10. 2. 15:47
1. mongodb 설치
1-1) https://www.mongodb.com/ 접속 후 mongodb 설치
1-2) mongoose 설치 : npm i -g mongoose
2. schemas 폴더 생성
2-1) index.js 파일 생성
const mongoose = require('mongoose');
const { MONGO_ID, MONGO_PASSWORD, NODE_ENV } = process.env;
const MONGO_URL = `mongodb://${MONGO_ID}:${MONGO_PASSWORD}@localhost:27017/admin`;
module.exports = () => {
const connect = () => {
if (NODE_ENV !== 'production') {
mongoose.set('debug', true);
}
mongoose.connect(MONGO_URL, {
dbName: 'reactdb',
}, (error) => {
if (error) {
console.log('몽고디비 연결 에러', error);
} else {
console.log('몽고디비 연결 성공');
}
});
};
connect();
mongoose.connection.on('error', (error) => {
console.error('몽고디비 연결 에러', error);
});
mongoose.connection.on('disconnected', () => {
console.error('몽고디비 연결이 끊겼습니다. 연결을 재시도합니다.');
connect();
});
require('./user');
};
2-2) user.js 파일 생성
const mongoose = require('mongoose');
const { Schema } = mongoose;
const userSchema = new Schema({
name: {
type: String,
required: true,
unique: true,
},
age: {
type: Number,
required: true,
},
});
module.exports = mongoose.model('User', userSchema);
3. 소스파일 수정
3-1) react-client/src/App.js
import React, { Component } from 'react';
import './App.css';
class App extends Component {
state = {users: []}
componentDidMount() {
fetch('/users')
.then(res => res.json())
.then(users => this.setState({ users }));
}
render() {
return (
<div className="App">
<h1>Users</h1>
{this.state.users.map(user =>
<div key={user._id}>{user.name} {user.age}</div>
)}
</div>
);
}
}
export default App;
3-2) react-server/app.js
const connect = require('./schemas');
const app = express();
connect();
3-3) react-server/routes/user.js
import express from 'express';
import User from '../schemas/user';
const router = express.Router();
router.get('/', async (req, res, next) => {
const users = await User.find({});
res.json(users);
});
module.exports = router;
4. 연동확인
- npm start
