[React, Express] 서버 구현 및 데이터베이스 연결하기(REST API)

[EZ_Scheduler] - [React] 로그인 페이지 스타일링

[React] 로그인 페이지 스타일링

이전 개발 일지 읽어보기!

📌서버 구현 및 데이터베이스 연결하기

안녕하세요, 대학생 개발자 주이어입니다!

오늘은 저번에 만든 로그인 페이지의 백엔드를 구현하기 위해 Express.js로 서버를 구현하고
MySQL 데이터베이스를 연결하여 로그인 테스트까지 진행해보도록 하겠습니다.

---

✅프로젝트 목표

1. Express.js로 백엔드 서버 구현
2. React에서 데이터 가져오기
3. 임시 데이터로 로그인이 되는지 확인

ℹ️기술 스택

• 프론트엔드 : Html, Css
• 백엔드 : Node.js
• 프레임워크 : React.js, Express.js
• 데이터베이스 : MySQL
• 빌드도구 : Vite

---

1. 서버 구현하기 - Express.js

import express from "express";
import mysql from "mysql2";
import cors from "cors";

기본적으로 express를 사용하고 추가로 mysql2와 cors를 사용하였다. mysql2는 MySQL과 연결하기 위한 라이브러리이고, cors는 프론트엔드와 백엔드가 서로 다른 도메인에서 실행될 때 발생되는 Cross-Origin Resource Sharing 문제를 해결하는 라이브러리이다. mysql2 라이브러리를 사용한 이유는 기존 mysql 라이브러리는 오래된 라이브러리라서 MySQL 8.0과 호환이 잘 안될 수 있기 때문이다. 

CREATE DATABASE EZS;
 
USE EZS;
 
CREATE TABLE userData (
    id INT AUTO_INCREMENT PRIMARY KEY,
    userId VARCHAR(50),
    userPw VARCHAR(50)
);
 
INSERT INTO userData (userId,userPw) VALUES ("juyear","1234");
 
SELECT * FROM userdata;

위는 MySQL 쿼리문이다. 서버에서 사용할 데이터베이스를 설계하고 임시 데이터를 넣어주었다.

데이터베이스 테이블

(테스트 용이기 때문에 비밀번호 보안 문제에 대해서는 추후 수정할 예정이다.)

const app = express();
app.use(cors());
app.use(express.json());
 
const db = mysql.createConnection({
  host: "localhost",
  user: "root",
  password: "비밀번호",
  database: "ezs",
});
 
db.connect((err) => {
  if (err) {
    console.log("MySQL 연결 실패: " + err);
    return;
  }
  console.log("MySQL 연결 성공!");
});

다시 js파일로 돌아와 Express서버를 생성하고, cors를 사용하여 React에서 API 요청이 가능하도록 설정해주었다. 그리고 위에서 만든 MySQL 데이터베이스를 연결해주었다. 

app.get("/userdata", (req, res) => {
  db.query("SELECT * FROM userdata", (err, results) => {
    if (err) {
      res.status(500).json({ error: "DB 조회 실패" });
    } else {
      res.json(results);
    }
  });
});

마지막으로 React에서 데이터를 가져올 수 있도록 GET 메서드를 사용해 데이터베이스의 데이터를 전달하도록 구현했다.

app.listen(5000, () => {
  console.log("서버 실행 중 : https://localhost:5000");
});

서버가 잘 실행되었는지 확인할 수 있는 코드도 추가로 넣어주었다.

server.js 실행 화면

사진처럼 서버가 잘 실행되는 것을 알 수 있다.

---

2. 서버에서 데이터 가져오기 - React.js

let userdata;
 
export const dataContext = createContext();
 
function App() {
 
  useEffect(() => {
    fetch("http://localhost:5000/userdata")
      .then((response) => response.json())
      .then((d) => (userdata = d))
      .then(() => console.log(userdata))
      .catch((error) => console.error("Error:", error));
  }, []);

간단하게 코드를 풀이하자면 서버에서 데이터를 가져온 후 그 데이터를 json형태로 바꿔 userdata에 저장해주었다.

 

하지만 한가지 문제가 생겼다. 동기 비동기와 관련된 문제였는데 데이터를 가져오기 전에 화면이 렌더링 되면서 로그인 했을 때 데이터를 인식하지 못하는 버그가 생겼다. 이 문제를 어떻게 해결할까 고민하다 데이터를 가져왔는지 확인한 후 렌더링이 되면 해결할 수 있겠다고 생각했다. 그래서 useState와 .then을 사용하여 데이터를 가져오면 state의 값을 바꿔 다시 렌더링 하도록 해주었다. 

let userdata;
 
export const dataContext = createContext();
 
function App() {
  const [isLoading, setIsLoading] = useState(true);
 
  useEffect(() => {
    fetch("http://localhost:5000/userdata")
      .then((response) => response.json())
      .then((d) => {
        userdata = d;
        setIsLoading(false);
      })
      .then(() => console.log(userdata))
      .catch((error) => console.error("Error:", error));
  }, []);
 
  if (isLoading) {
    return <div>데이터 로딩중입니다...</div>;
  }

위는 문제를 해결한 코드이다. isLoading이라는 state 변수를 만들어 데이터를 가져오면 다시 렌더링 하여 데이터를 반영할 수 있도록 해주었다.

---

3. 가져온 데이터로 로그인하기 - Login.jsx

const { userdata } = useContext(dataContext);
 
const onClickLogin = () => {
    const temp = userdata.filter(
      (item) => item.userId === userId.current && item.userPw === userPw.current
    );
    if (temp.length === 1) {
      nav("/Home", { replace: true });
    } else {
      window.alert("로그인에 실패했습니다.");
    }
  };

저번에 로그인 페이지를 만들 때 로직을 이미 구현했었기 때문에 데이터만 가져와 적용해주면 됐다.

useContext를 사용하여 App.jsx에서 데이터를 가져온 후 그대로 적용해주었다.

로그인 테스트 화면

로그인 페이지에서 데이터베이스에 넣었던 임시 데이터로 로그인을 하면 잘 로그인이 되는 것을 알 수 있다.
(오른쪽 사진은 홈 페이지 화면이다. 개발 일지를 적으려 했지만 단순한 스타일링 과정이라 스킵했다.)

데이터 확인

console.log로 확인해본 데이터를 보면 잘 적용되고 있는 것을 알 수 있다.

---

실습 마무리

오늘은 서버를 구축하고 React에 데이터베이스를 연결하는 것을 구현해보았습니다. REST API구현과 MySQL은 이미 알고 있던 내용이라 쉽게 만들 수 있었지만, React에 데이터베이스를 연결하는 과정에서 동기 비동기와 관련된 부분에서 살짝 막힘이 있었습니다. 하지만 이 부분도 옛날에 진행했던 프론트엔드 프로젝트에서 경험했던 부분이라 그나마 쉽게 해결할 수 있었던 것 같습니다. 다음에는 회원가입 페이지를 만들고 데이터가 추가되는 기능을 만들어보려고 합니다. 다음 글도 기대해주세요!

[EZ_Scheduler] - [React, Express] 회원가입 페이지 제작(POST 요청)

[React, Express] 회원가입 페이지 제작(POST 요청)

다음 개발 일지 읽어보기!