[React] React생성부터 Node.js 연동까지 - 5) DB 연동

• Node.js 연동

[React] React생성부터 Node.js 연동까지 - 4) Node.js 연동

# 시작

• 더미데이터 Hi가 아닌 db에서 데이터 조회 후 그 정보 출력
• db는 postgreSQL 사용

# 모듈 설치

npm install pg

# 테이블 생성

• 필요한 text 테이블 생성
• test_seq_no 는 시퀀스 이용해서 값 넣을거라 sq_test 시퀀스 생성

CREATE TABLE public.test (
	test_seq_no int4 NOT NULL,
	test_nm varchar NOT NULL,
	CONSTRAINT test_unique UNIQUE (test_seq_no)
);

# 테스트 데이터 생성

• nextval은 해당 시퀀스의 현재값 +1

INSERT INTO public.test
(test_seq_no, test_nm)
values(nextval('sq_test'), 'test001');

# 코드

#dbConfig.js

• db 폴더에 dbConfig.js 생성

const { Pool } = require('pg');

const pool = new Pool({
  user: 'postgres',
  host: 'localhost',
  database: '데이터베이스명',	// 기본은 postgres
  password: '비밀번호',
  port: 5432, // PostgreSQL 기본 포트
});


pool.connect(err => {
    if(err) console.log(err);
    else console.log('성공');
});
module.exports = pool;

#queires.js

• db 폴더에 queries.js 생성

const pool = require('./dbConfig');

const getTests = async () => {

    try {
        const tests = await pool.query('SELECT * FROM test');
        console.log(tests);
        return tests.rows;
      } catch (error) {
        console.error('Error executing query:', error);
        throw error;
      }
};


module.exports = {
    getTest
};

# server.js 수정

const express = require('express');
const queries = require('./src/db/queries'); // queries.js 파일 전체를 가져옴

const path = require('path');
const app = express();

const port = process.env.PORT || 8088; // 포트 설정

// CORS 사용
const cors = require('cors');
const corsOption = {
    origin: "*",
    optionSuccessStatus: 200,
};
app.use(cors(corsOption));

// body-parser 미들웨어 등록
app.use(express.json());

app.get('/tests', async (req,res) => {
  try {
    const tests = await queries.getTests(); // queries 객체를 통해 getTests 함수를 호출하여 테스트 목록을 가져옴
    res.json(tests); // 목록을 JSON 형식으로 응답
  } catch (error) {
    console.error('Error handling request:', error);
    res.status(500).json({ error: 'Internal server error' }); // 오류 발생 시 500 에러 응답
  }
});

// 정적 파일 미들웨어 설정
app.use(express.static(path.join(__dirname, '/build')));

// 모든 요청에 대해 index.html 제공
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, '/build', 'index.html'));
});

// 서버 확인
app.listen(port, ()=>{
  console.log('server is running on ' + port);
});

# Test.js 수정

• 기본 출력값을 test000
• test000에 db에서 조회된 값 같이 보이게 함

import { useEffect, useState } from 'react';

export default function Test() {

    const path = "http://localhost:8088";

    const [tests, setTests] = useState(['test000']);

    useEffect(() => {

        fetch(path + "/tests")
            .then(res => res.json())
            .then(data => {
                const newItem = data.map(element => element.test_nm);
                setTests(prevTests => [...prevTests, ...newItem]);
            })
            
    }, []);

    return (
        <>
            {tests.map(data =>{
                return <h1 key={data}>{data}</h1>
                }
            )}
        </>
    )
}

# 결과

• 원래 tests에는 test000만 있었는데 db에서 조회한 test001, test002 추가되어 출력