2. React와 Express, MongoDB 연동하기 (1) Retrieve

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