react 로컬 DB에서 데이터 가져오기

저는 react-native 프로젝트를 이미 진행해 보았기 때문에 react로 웹 만드는걸 해보진 않았지만 적응이 쉽겠다 싶어서 이번에 한번 공부할 겸 만들어 보았습니다. 

 

chatGPT에 물어보았더니 axios, express 를 사용하면 된다고 해서 사용했습니다. 

프로젝트 폴더 내에서 cmd를 키고

npm install axios
npm install express
npm install mongoose

 

입력해 설치합니다. 

 

이상하게 갑자기 audit 관련 메시지가 나오더라구요.

 

패키지 보안 취약점이 있으니 audit fix로 해결하라는 메시지인데 

메시지대로 

npm audit fix --force 로 입력하면 

취약점이 8개에서 160개 언저리로 변합니다.

이후 다시 npm audit fix --force 를 입력하면 8개로 돌아오더라구요.. 

 

node module 에 있는 패키지 버전이나 설치하려는 패키지 버전을 건드리는거 같은데 그냥 8개로 두고 무시하기로 결정내렸습니다.. 우선은 문제가 없는데 해결 방법을 찾는게 귀찮더라구요. 

 

해당 패키지들을 설치하고 

node js 로 실행시킬 server.js file 을 만듭니다. 

 

이제 연동시킬 데이터베이스를 고를 건데 저는 mongoDB를 사용하겠습니다. 

mongoDB는 mongoose 사용하면 연동시키기가 수월합니다. 

 

//server.js
const express = require('express');
const mongoose = require('mongoose');
const cors = require('cors');

const app = express();
const PORT = process.env.PORT || 5000;

 

node js에서 사용할 express, mongoose, cors 모듈을 불러옵니다.  

CORS는 웹 애플리케이션이 다른 도메인에서 리소스를 요청할 수 있도록 허용하는 메커니즘입니다. 기본적으로, 브라우저는 보안상의 이유로 동일 출처 정책(Same-Origin Policy)을 따르기 때문에, 동일 출처가 아닌 리소스 요청을 제한하는데 이를 우회해준다고 하네요. 

 

포트는 5000포트에서 실행합니다.

mongoose.connect('mongodb://root:localhost:27017/DB?authSource=admin', {
  useNewUrlParser: true,
  useUnifiedTopology: true
});

 

로컬 27017 포트에서 돌아가는 로컬 mongodb의 DB라는 이름에 데이터베이스에 접속하는데 root로 접속합니다. 

해당 DB에 read, write 권한이 있는 user를 만들어서 접속할 수도 있어요.

보통은 authSource=admin 을 안써도 로컬DB는 접속되는데 전 공유 서버 DB를 접근하느라고 작성했었어요. 사용자(root)가 admin 데이터베이스에서 인증된다는 것을 의미한다네요. 

 

const db = mongoose.connection;
db.on('error', console.error.bind(console, 'connection error:'));
db.once('open', function() {
  console.log('Connected to MongoDB');
});

 

연결되면 connected to MongoDB 출력,

error 이벤트 생기면 콘솔에 입력한 문자열과 함께 error 메시지를 함께 출력합니다. 

 

생성한 DB에 맞는 스키마 작성하고 연결할 컬렉션 정보를 model로 만듭니다. 

 

app.get('/api/ex', async (req, res) => {
    try {
      const fname = req.query.name
      const data = await Model1.find({'name':fname}).sort();
      res.json(data);
    } catch (err) {
      res.status(500).send(err);
    }
  });

 

postman으로 쿼리 보낼 때, http://localhost:5000/api/ex?name="hi"

이런식으로 보내면 name이 "hi"인 데이터들을 DB에서 쿼리해서 찾아줍니다.

 

이런식으로 서버를 작성하고 실제 react 프로젝트에서 axios를 사용해서

//react 파일

axios.get('http://localhost:5000/api/ex?name='+"hi")
          .then(response => {
            console.log('응답이 오면 출력하는 문장')
            setdata(response.data)
          })
          .catch(error => {
            console.error('There was an error fetching the data!', error);
          });

 

이제 "hi" 자리에 변수를 써서 해당 쿼리를 할 수 있습니다. 

state로 응답온 데이터를 저장합니다. 

 

참고

chatGPT