로컬에서 React 프로젝트를 생성 이후, DB 에서 정보를 가져오거나 DB에 정보를 전송하는 로직을 구현해보고 싶습니다.
실제로 가동이 되는 웹 서버가 아니라 내 로컬에서만 어떻게 작동하는지 확인을 하고 싶은 것이기에,
내가 원하는 테이블 세팅을 마친 MySQL 에 접근하여 정보를 전송하거나 가져오는 연습을 해보겠습니다.
우선 전송하는 코드부터 구성해보겠습니다.
혹시 MySQL 세팅 방법이 먼저 필요하다면 아래를 클릭해주세요.
로컬 MySQL 데이터베이스와 통신하기 위한 백엔드 프로젝트가 필요합니다.
이를 위해서 터미널을 통해 아래와 같은 명령어를 시행하면 됩니다.
mkdir my-backend-project
cd my-backend-project
백엔드 프로젝트가 위치할 특정 프로젝트 폴더를 만들고, 그곳으로 이동을 해준다는 뜻입니다.
굳이 my-backend-project 가 아니라 원하는 프로젝트 이름을 기입하면 됩니다.
npm init
프로젝트 위치로 이동을 했다면, 위 명령어를 통해서 프로젝트 생성을 해줍시다.
위 명령어를 입력하면 여러 기본값 설정을 위해서 질문들이 막 생성되는데 그냥 Enter 눌러서 넘어가면 됩니다.
이 명령어가 제대로 시행이 됐다면, 프로젝트 위치에 package.json 파일이 생성되어 있어야 합니다.
npm install express
npm init 이 끝났다면, 다음으로 위 명령어를 시행하면 됩니다.
이것을 통해 package.json 파일 내부에 express 패키지가 설치되는 것을 확인 가능합니다.
이 단계를 완료하면 Node.js 및 Express 를 사용하는 백엔드 프로젝트의 기본 구조가 준비됩니다.
// server.js 또는 app.js
const express = require('express');
const app = express();
const port = 5000; // 사용할 포트 번호
app.get('/', (req, res) => {
res.send('Hello World!');
});
app.listen(port, () => {
console.log(`Server listening at http://localhost:${port}`);
});
자 이제 프로젝트 폴더 내부에 새로운 파일을 생성합시다.
파일의 이름은 server.js 라고 가정합시다.
위 코드에서 port 부분에 5000이 기입되어 있죠?
프론트엔드 서버를 굴리는 포트번호가 보통 3000 이니까, 이와 겹치지 않게 하기 위해서 5000을 입력했습니다.
node server.js
제작한 파일의 이름이 server.js 였기 때문에 위와 같이 명령어를 작성하면 됩니다.
그럼 이제 해당 파일을 실행할 수 있게 됩니다.
만약 해당 파일의 가동을 멈추고 싶다면 ctrl + C 를 입력 후, y 를 눌러 파일 가동을 멈춰주세요.
만약 제대로 가동이 되고 있다면, localhost:5000 으로 접속했을 때 “Hello World!” 라는 메시지가 나타날 겁니다.
본격적으로 내 DB 에 접근하기 위해서 위 코드를 조금 변경하겠습니다.
const express = require("express");
const app = express();
const port = 5000; // 사용할 포트 번호
const mysql = require("mysql2"); // 'mysql2' 모듈 사용
// MySQL 데이터베이스 연결 설정
const connection = mysql.createConnection({
host: "localhost", // 데이터베이스 호스트 주소
user: "root", // 데이터베이스 사용자 이름
password: "password", // 사용자 비밀번호
database: "mydb", // 접속하려는 데이터베이스 이름
port: 3306, // MySQL 포트 번호
});
// 데이터베이스 연결
connection.connect((error) => {
if (error) {
return console.error("데이터베이스 연결 실패:", error);
}
console.log("데이터베이스에 성공적으로 연결됨");
});
// 데이터베이스 쿼리 실행 예제
app.get("/hello", (req, res) => {
connection.query("SELECT VERSION()", (error, results, fields) => {
if (error) {
return res.send("쿼리 실행 실패: " + error.message);
}
res.send("데이터베이스 서버 버전: " + results[0]["VERSION()"]);
});
});
// 서버 실행
app.listen(port, () => {
console.log(`Server listening at http://localhost:${port}`);
});
위 코드에서 중요한 부분은 7번째 줄부터 시작됩니다.
host 는 그대로 localhost 를 유지하면 됩니다.
기본 설정대로 DB를 구성했다면, User 부분은 “root” Port 부분은 “3306” 그대로 유지하면 됩니다.
여기서 따로 확인이 필요한 부분은 MySQL 을 처음 설치할 때 설정했던 비밀번호를 Pssword 에 넣어주는 작업이 필요합니다.
또한 MySQL 구성을 할 때 필요한 테이블을 생성했던 DB 의 이름을 database 란에 입력을 해주면 됩니다.
위 코드를 실행하기 이전에, 아래 명령어를 통해 mysql2 모듈의 설치가 필요합니다.
npm install mysql2
node server.js
이후 다시 server.js 파일을 실행해줍시다.
제대로 데이터베이스에 접근이 가능하다면 “데이터베이스에 성공적으로 연결됨” 이라는 메시지가 터미널 창에 나타날 겁니다.
또한 localhost:5000/hello 로 접속하면 아래와 같은 화면이 나타날 겁니다.
이 모든 것이 잘 작동한다면 성공적으로 내 MySQL DB 에 접근이 된다는 뜻입니다.
그럼 다음으로 내 DB에 생성해뒀던 테이블에 정보를 보내보는 로직을 구현해봅시다.
우선 내 DB 와 통신을 하기 위한 프론트엔드 파일을 제작할 것입니다.
프론트엔드 프로젝트 쪽으로 이동하고, src 내부에 “SendTest.js” 라는 파일을 제작하고 다음과 같이 코드를 제작했습니다.
import React, { useState } from "react";
const SendTest = () => {
const [data, setData] = useState({
id: "",
password: "",
code: "",
email: "",
});
const { id, password, code, email } = data;
const onChange = (e) => {
const nextData = {
...data,
[e.target.name]: e.target.value,
};
setData(nextData);
};
const onSubmit = async () => {
try {
const response = await fetch("http://localhost:5000/send", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(data),
});
if (response.ok) {
alert("데이터가 성공적으로 전송되었습니다.");
// 성공적으로 데이터를 보냈다면, 필요한 후속 조치를 여기에 추가할 수 있습니다.
setData({
id: "",
password: "",
code: "",
email: "",
});
} else {
alert("데이터 전송에 실패했습니다.");
}
} catch (error) {
alert("라우터 접근에 문제가 있습니다.");
}
};
return (
<>
<h1> 데이터 전송하기 </h1>
<label> ID 입력 :</label> <br />
<input type="text" name="id" onChange={onChange} value={id} />
<br />
<br />
<label> password 입력 :</label>
<br />
<input
type="password"
name="password"
onChange={onChange}
value={password}
/>
<br />
<br />
<label> code 입력 :</label>
<br />
<input type="text" name="code" onChange={onChange} value={code} />
<br />
<br />
<label> email 입력 :</label>
<br />
<input type="email" name="email" onChange={onChange} value={email} />
<br />
<br />
<br />
<button onClick={onSubmit}> 전송하기 </button>
</>
);
};
export default SendTest;
각종 input 창이 줄지어 있고, 마지막 전송하기 버튼을 누르면 해당하는 데이터가 DB 에 전송되는 것을 목적으로 하였습니다.
해당 파일을 브라우저에서 확인하고, input 창에 대충 값을 입력하고 전송하기 버튼을 누르면?
위와 같이 라우터 접근에 문제가 있다는 오류가 발생합니다.
당연한 일입니다. 아직 백엔드 쪽에 라우터를 생성하지 않았으니까요.
프론트엔드는 끝났으니 이제 백엔드 쪽 코드로 이동합시다.
가장 처음에 MySQL DB 에 접근하기 위해 만들었던 server.js 기억하시죠?
이 server.js 를 수정해볼 차례입니다.
전체 수정본은 아래와 같습니다.
const express = require("express");
const cors = require("cors");
const port = 5000; // 사용할 포트 번호
const mysql = require("mysql2"); // 'mysql2' 모듈 사용
const bodyParser = require("body-parser");
const app = express();
app.use(cors()); // 모든 요청에 대해 CORS를 허용
// MySQL 데이터베이스 연결 설정
const connection = mysql.createConnection({
host: "localhost", // 데이터베이스 호스트 주소
user: "root", // 데이터베이스 사용자 이름
password: "password", // 사용자 비밀번호
database: "database", // 접속하려는 데이터베이스 이름
port: 3306, // MySQL 포트 번호
});
// 데이터베이스 연결
connection.connect((error) => {
if (error) {
return console.error("데이터베이스 연결 실패:", error);
}
console.log("데이터베이스에 성공적으로 연결됨");
});
// JSON 형식의 본문을 파싱할 수 있도록 설정
app.use(bodyParser.json());
// '/send' 경로에 대한 POST 요청 처리
app.post("/send", (req, res) => {
const { id, password, code, email } = req.body;
const query = `
INSERT INTO user_info (id, password, code, email)
VALUES (?, ?, ?, ?);
`;
// 데이터베이스에 데이터를 삽입
connection.execute(
query,
[id, password, code, email],
(error, results, fields) => {
if (error) {
console.error("데이터 삽입 실패:", error);
res.status(500).send("데이터 삽입에 실패했습니다.");
} else {
console.log("데이터 삽입 성공:", results);
res.status(200).send("데이터가 성공적으로 삽입되었습니다.");
}
}
);
});
// 데이터베이스 쿼리 실행 예제
app.get("/hello", (req, res) => {
connection.query("SELECT VERSION()", (error, results, fields) => {
if (error) {
return res.send("쿼리 실행 실패: " + error.message);
}
res.send("데이터베이스 서버 버전: " + results[0]["VERSION()"]);
});
});
// 서버 실행
app.listen(port, () => {
console.log(`Server listening at http://localhost:${port}`);
});
/send 라고 하는 라우터를 추가한 것을 확인 가능하죠?
query 를 작동시키는 라우터라고 보면 될 것 같습니다.
위 라우터가 정상적으로 작동하기 위해서는 몇 가지 모듈을 추가로 다운로드 할 필요가 있습니다.
npm install cors
npm install body-parser
위와 같은 명령어를 통해서 각각의 모듈을 다운로드 하면 됩니다.
이후 다시 node server.js 를 사용하여 파일을 실행해줍시다.
이제 대망의 테스트입니다.
프론트엔드로 이동을 해서 input 창에 대충 값을 입력 후, 전송하기 버튼을 눌러봅시다.
이전과 다르게 데이터가 성공적으로 전송이 된 것 같군요.
혹시 모르니, 직접 MySQL 로 이동하여 내가 원하는 테이블에 데이터가 들어갔는지 보겠습니다.
사각형으로 표시된 부분이 제가 전송을 원했던 테이블입니다.
알맞게 데이터들이 들어간 것을 볼 수 있네요.^^