[React] React에 MySQL 연동하기

진행중인 중고차 홈페이지 제작 프로젝트에서 커뮤니티 기능을 추가하려고 한다.

사실 처음엔 여기까지 진행할 생각 없이, 검색과 찜하기 기능만 구현되면 새로운 프로젝트를 시작하려 했었다.

하지만 미완성 프로젝트의 개수를 늘리기보단 하나의 홈페이지를 만들어도 제대로 만들어야겠다는 생각이 들었고, 어차피 하나의 특정 브랜드 제품만을 취급하기는 사이트이기 때문에 커뮤니티 기능을 도입하는것도 나쁘지 않다고 판단했다.

 

그럼 구현은 어떻게...?

커뮤니티 사이트를 구현하려면 당연히 회원가입, 로그인, 게시물 작성, 수정, 삭제 등 여러가지를 고려해야 한다.

기능을 구현하는 것에 대해선 큰 문제가 없지만, 데이터를 어떻게 저장하고 사용해야 하는지에 대해 고민이 많았다.

백엔드에 대해서는 아주 무지한 상태라 db를 사용해서 구현하는게 맞는지 확신이 없었기 때문에 여러 방법을 고려했다.

 

▶ 더미 데이터 활용

프로젝트 초기에 구현한 매물 목록처럼 클라이언트단에서 회원 목록을 더미 데이터로 만들어 사용할까 생각해봤다.

하지만 이 방식은 이미 구현해둔 검색, 찜하기 기능과 차별화해서 역량을 보여주기 어렵기 때문에 최후의 수단으로 생각하고 있었다.

 

▶ 구글의 Firebase 활용

실제 DB와 연동이 가능하고 프론트단에서 비교적 쉽게 구현이 가능해 잠깐 혹하긴 했지만 실무에서 많이 사용되는 방식이 아닌듯 해서 포트폴리오에 담을 이유가 없다고 판단해 포기했다.

 

▶ node.js, express, axios를 활용 ✔

리액트에 DB를 연동하기 위해 가장 많이 소개되는 방식이기도 하고 그만큼 확장성도 좋을 것이라는 생각이 들어 사용한 방법이다.

다만 언급했듯이 본격적으로 백엔드를 다룬 적이 없는 취준생이라 시행착오가 많긴 했다.

참고로 db는 MySQL을 활용했다.

 

DB 생성 및 권한 부여

DB에 대한 내용을 다루는 부분이라 리액트 포스팅에 쓰기엔 적합하지 않아보여 따로 포스팅했다.

아래 링크를 참고해 DB를 생성하면 된다.

 

https://duski96.tistory.com/13

[MySQL] React에 연동할 DB 생성 및 권한 부여

 

Server 생성

서버 생성 부분은 내용이 길어져 별도의 포스팅으로 분리했으므로 아래 포스팅을 참고하면 된다.

 

https://duski96.tistory.com/15

[Node.js] React에 MySQL 연동을 위한 Server 생성

 

주의사항

리액트와 DB를 연동하기 위해선 각각의 서버가 동시에 실행되고 있어야 한다.

필자의 프로젝트 기준으로 DB의 데이터를 불러오는 localhost:4000 경로와 리액트 앱이 실행되는 localhost:5173 경로의 서버가 동시에 돌아가야 하는 것이다.

package.json 파일을 일부 수정하면 vite와 server.js를 동시에 실행하는게 가능할 것 같은데 정확한 방법을 찾지 못해 우선 두 개의 터미널을 열어 각각 실행시켜주었다.

 

# esbuild

PS C:\Users\J\Desktop\PORTFOLIO\project02> npm run dev

# node server

PS C:\Users\J\Desktop\PORTFOLIO\project02\server> node server.js

 

데이터를 React로 가져오려면?

이제 4000번 포트에서 불러오고 있는 데이터를 React App에서 불러와야 한다.

AXIOS 라는 비동기 통신 라이브러리를 활용해 경로를 정하고 데이터를 불러오면 된다.

npm i axios

import { useEffect } from 'react';
import axios from 'axios';

function App(){
  useEffect(()=>{
    axios.get('/api/users').then((res)=>console.log(res));
  });
  
  return <div></div>
}

export default App;

 

이제 서버와 클라이언트 사이에서 둘을 연결해줄 proxy 설정을 해줘야 하는데 vite.config.js에 다음과 같이 server 관련 설정을 추가하면 된다.

//vite.config.js

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vite.dev/config/
export default defineConfig({
  plugins: [react()],
  server:{
    proxy:{
      '/api': { // axios라이브러리 등으로 http 요청인데 api로 시작하면
        target: 'http://localhost:4000/', // 이쪽 주소로 맵핑하여 백그라운드로 보냄.
        changeOrigin: true, // cors 에러 방지
      }
    }
  }
})

 

http://localhost:5173 접속 결과

http://localhost:5173 경로에서 console을 확인했을 때 DB의 데이터가 출력되는 모습

 

localhost:4000 경로에 나타났던 데이터들이 console에 찍히는 것을 확인할 수 있다.

한 가지 걸리는 점은 env 파일에 저장해둔 포트 번호를 활용하고 싶은데 생각처럼 잘 안되고 있다.

DB 연동만 끝나면 바로 로그인 기능을 구현하려 했는데 조금 더 고민해봐야 할 것 같다.

 

추가 - vite.config.js에서 환경변수 사용하기

vite.config.js 파일에서 .env 환경변수 사용법은 아래 포스팅을 참고하면 된다.

 

https://duski96.tistory.com/14

[Vite] proxy 설정하기