[React] + express + mariadb 데이터베이스 화면 띄우기

todo list 

원래 App.js 상태값에 데이트베이스 대신 배열로 대신하여 화면에 띄웠었는데 

 

이제 express 와 mariadb 를 연결하여 데이터베이스 내용을 화면에 띄울거다. 

 

먼저 app.js 에 있던 배열을 지워준다.  

class App extends Component{
  constructor(props){
    super(props)
    this.state={
      todolist:[]
    }
  }

 

이제 서버와 db 세팅을 해야한다. 

src 폴더밑에 server폴더를 만들어주고 server.js 파일을 생성해준다. 

const express = require('express');
const db = require('./config/db');
const bodyParser = require('body-parser')
const cors = require('cors'); // cors 미들웨어 import


const app = express();
app.set('port', process.env.PORT || 4000);

app.use(bodyParser.json());
app.use(cors()); // 모든 도메인에서의 요청을 허용하도록 설정


app.get('/', (req, res) => {
    res.send('연결 성공')
    console.log('되나?')
})



app.listen(app.get('port'), () => {
    console.log(app.get('port'), '번 포트에서 대기 중..');
});

cors 오류가 나서 찾아보니 저렇게 설정해주면 오류가 나지 않는다. 

 

4000번 서버 포트 뚫어주고 터미널에 node server 확인하면 콘솔 찍힌다. 

 

 

 

 

이제 db 세팅하기 

server 폴더 밑에 config 폴더 생성하고 db.js 파일 만들어주기 

const mysql = require('mysql');

const pool = mysql.createPool({
    host: '[]',
    user: '[]',
    password: '[]',
    database: '[]',
    port: 3306
});

console.log('데이터베이스 연결 성공');

module.exports = pool;

mariadb 는 mysql 모듈 사용하면된다. 

 

 

 

 

App.js get요청하기  /todolist 로 요청함 

import './App.css';
import { Component } from 'react';
import Todo from './components/Todo.js'
import InputComp from './components/InputComp';
import axios from 'axios'; // axios 라이브러리 import


class App extends Component{
  constructor(props){
    super(props)
    this.state={
      todolist:[]
    }
  }
  componentDidMount() {
    this.fetchTodoList(); // 컴포넌트가 마운트되면 데이터베이스에서 할일 목록을 가져옴
  }

  fetchTodoList() {
    axios
        .get('http://localhost:4000/todolist') // 데이터베이스에서 데이터를 가져오는 GET 요청
        .then(response => {
          this.setState({todolist: response.data}); // 가져온 데이터로 상태를 업데이트
        })
        .catch(error => {
          console.error('데이터 가져오기 실패:', error);
        });
  }
  addTodoList=(id,todo)=>{
    alert('추가(App)')
    alert('넘어온 id : ' + (this.state.todolist.length + 1)  )
    //Todo에서 id 값을 설정할 수 없어서 App의 상태값에 +1 해줘야함
    alert('넘어온 할일 : ' + todo)
    // alert(this.state.todolist.length + 1)

    id=this.state.todolist.length + 1

    //넘어온 값 확인됐으면 JSON형태로 묶어주기
    const todoObj = {id:id, todo:todo}
    const concatedList = this.state.todolist.concat(todoObj)

    this.setState({
      todolist:concatedList
    })
  }

  deleteTodoListApp=(id)=>{
    alert('삭제 (App)')
    
    alert('삭제할 번호: ' + id)

    const filteredList = this.state.todolist.filter(
      (data) => (data.id !== id)
      )
      // this.setState({
      //   todolist:filteredList
      // })

      const updatedList = filteredList.map(
        (data,index) => {
    //첫 번째 매개변수는 현재 요소를 나타내고, 두 번째 매개변수는 해당 요소의 인덱스를 나타낸다
          data.id = index + 1
          return data; 
        }
      )
      this.setState({
        todolist:updatedList
      })
  } 
  updateTodoList=(id, todo)=>{
    alert('수정(App)')
    alert('넘어온 id: ' + id)
    alert('넘어온 할일:' + todo)

    let tempTodoList = this.state.todolist
     
    for(let i=0; i<tempTodoList.length; i++){
      if(tempTodoList[i].id === id){
        tempTodoList[i].todo = todo
      }
    }
    this.setState({
      todolist:tempTodoList
    })
  }

  render(){
    const result = this.state.todolist.map(
      (data) => (<Todo key = {data.id}
                        id={data.id}
                        todo = {data.todo}
                        deleteTodoListApp = {this.deleteTodoListApp}
                        updateTodoList={this.updateTodoList}/>)
    )
    return(
      <div id='App'>
        <InputComp addTodoList={this.addTodoList}/>
        {result}
      </div>
    )
  }
}

export default App;

 

server.js 에서도 get요청 받기 

const express = require('express');
const db = require('./config/db');
const bodyParser = require('body-parser')
const cors = require('cors'); // cors 미들웨어 import


const app = express();
app.set('port', process.env.PORT || 4000);

app.use(bodyParser.json());
app.use(cors()); // 모든 도메인에서의 요청을 허용하도록 설정




app.get('/', (req, res) => {
    res.send('연결 성공')
    console.log('되나?')
})
app.get('/todolist', (req, res) => {
    console.log('연결성공')
    db.query("select * from `YEO`.`todolist`", (err, data) =>{
        if(!err){
            console.log(data)
            res.json(data); // JSON 형식으로 응답
        }else{
            console.log(err)
            res.status(500).json({ error: '데이터 가져오기 실패' }); // 에러 응답

        }
    })
})



app.listen(app.get('port'), () => {
    console.log(app.get('port'), '번 포트에서 대기 중..');
});

 

 

 

 

이제 App.js 에서도 get요청으로 react + express + mariadb 연결 확인하기 

App.js 터미널에서는 npm start

server.js 터미널에서 node server 

하고 브라우저에서 요청하기 

 

데이터베이스에 있는 목록 화면에 띄우기 성공 

 

이제 post, put, delete 해야한다.