리액트 node 서버 연결(3)

안녕하세요·2023년 11월 9일

react x node 

목록 보기
3/18

MySQL에 있는 테이블 데이터 node를 통해 리액트로 보내기

MVC 패턴으로 폴더 생성

import mysql from 'mysql2';

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

export const db = pool.promise();

database.js 작성

import express from 'express';
import cors from 'cors';
import empRouter from './router/empRouter.js'

const server = express();
const PORT = 8000;

server.use(express.json()); // json형태 파일을 주고받기 위해
server.use(cors());

server.use('/',empRouter)



server.listen(PORT,()=>console.log(`server running! ---> ${PORT}`));

server.js에서 empRouter import 후 empRouter로 연결

import express from 'express';
import * as empController  from '../controller/empController.js'

const router = express.Router();



router.get('/',empController.getList);


export default router

1. empRouter 작성

empController import 후 getList 함수 호출

import * as empRepository  from '../repository/empRepository.js'

export async function getList(req,res){
  //DB연동
  const rows = await empRepository.getList();
  //결과전송
  res.json(rows)
}

3. empController 작성

empRepository import 후 getList 함수에서 비동기로 empRepository에 있는 getList를 호출해 rows에 저장하고 json형태로 보냄

import {db} from '../db/database.js'

export async function getList() {
  const sql = `select row_number() over(order by emp_id) rno,emp_id,emp_name,hire_date,phone,email,dept_id from employee;`
  return db
    .execute(sql)
    .then((row)=>row[0]);

}

../db/database.js 에 있는 db import후

비동기로 getList 작성

원하는 데이터를 뽑는 sql구문 작성후 row[0]을 보냄

리액트에서 http://127.0.0.1:8000/ 로 fetch 한 결과

0개의 댓글