React Node Mongo 연결 후 회원가입 하기까지!

초기 Set

npm i mongodb@5

중요 폴더 소개

app - react폴더

config - mongodb 경로가 들어가있다.

routes - route 관리 폴더

 

 

회원가입으로 예제 설명

 

* 설명 옆 소괄호는 경로를 뜻함

1. connectDB를 통해서 mongodb와 연결 (confing - database.js) 

const { MongoClient } = require('mongodb')

const url = ''
let connectDB = new MongoClient(url).connect()

module.exports = connectDB

2. server.js에 db 연결되면 port 연결되도록 설정 (server.js)

const connectDB = require('./config/database')

const { MongoClient } = require('mongodb')

let db
connectDB.then((client)=>{
  console.log('DB연결성공')
    db = client.db('leechi')
    app.set('port', process.env.PORT || 3001)
    app.listen(app.get('port'), () => {
    console.log('port waiting')
})
}).catch((err)=>{
  console.log(err)
})

3. user.js에 들어가서 또 연결해준다. (routes - user.js)

const express = require('express')
const router = express.Router();
const connectDB = require('../config/database')

connectDB.then((client)=>{
  console.log('User DB연결성공')
    db = client.db('leechi')
}).catch((err)=>{
  console.log(err)
})

module.exports = router

3-1. 사용법

router.post('/join', async (req, res) => {
  let { id, pw, name } = req.body
  result = await db.collection('user').insertOne({id:id, password:pw, name:name})
})

4. 프론트에서 데이터 보내기 (app - src - page - Join.jsx)

import axios from '../axios/axios'
// 생략

const joinInfo = {
  name: nameRef.current.value,
  pw: pwRef.current.value,
  id: idRef.current.value 
}

axios.post('user/join', joinInfo)


// 생략

유효성 검사는 자유롭게~!

여기서 user/join인 이유는 axios 폴더를 만들어서 관리해주고 있기 때문

import axios from 'axios'

const instance = axios.create({
    baseURL : "http://localhost:3001",  // 공통된 주소
	  headers: {
	    accept: 'application/json',
  }
})

export default instance

주의 : port 번호랑 같아야한다

 

여기서 3번 연결코드를 줄여보려고 했지만 어디서 오류가 나타나는지 알아야할 것 같아서 그대로 두었다.