20강. React + Node.js + MySQL 연동
이번 강의에서는 React(프론트엔드) + Node.js(백엔드) + MySQL(데이터베이스)를 연결하여 풀스택 웹 애플리케이션을 만드는 방법을 배웁니다.
목표: React에서 Node.js API를 호출하고, MySQL의 데이터를 화면에 출력할 수 있습니다.
1. 전체 구조 이해
실무에서 가장 많이 사용하는 구조입니다.
React
(화면)
↓
Axios / Fetch
↓
Node.js + Express
(API)
↓
MySQL
(Database)
2. 프로젝트 구조
FullStack
│
├── frontend
│ React
│
└── backend
Node.js
3. React 프로젝트 생성
npx create-react-app frontend
또는 Vite 사용
npm create vite@latest frontend
설치
cd frontend
npm install
실행
npm run dev
4. Backend 생성
mkdir backend
cd backend
npm init -y
설치
npm install express mysql2 cors
5. Express 서버
server.js
const express = require("express");
const cors = require("cors");
const app = express();
app.use(cors());
app.use(express.json());
app.listen(3000,()=>{
console.log("Server Running");
});
6. MySQL 연결
const mysql = require("mysql2");
const db = mysql.createConnection({
host:"localhost",
user:"root",
password:"1234",
database:"node_db"
});
7. 회원 조회 API
app.get("/member",(req,res)=>{
const sql=
"SELECT * FROM member";
db.query(sql,(err,result)=>{
res.json(result);
});
});
8. React에서 Fetch
import {useEffect,useState} from "react";
function App(){
const[data,setData]=useState([]);
useEffect(()=>{
fetch("http://localhost:3000/member")
.then(res=>res.json())
.then(result=>{
setData(result);
});
},[]);
return(
<div>
{
data.map((item)=>(
<p key={item.id}>
{item.name}
</p>
))
}
</div>
);
}
export default App;
9. Axios 설치
npm install axios
10. Axios 사용
import axios from "axios";
useEffect(()=>{
axios
.get("http://localhost:3000/member")
.then((res)=>{
setData(res.data);
});
},[]);
11. 회원 등록
Node.js
app.post("/member",(req,res)=>{
const{
name,
age
}=req.body;
const sql=
"INSERT INTO member(name,age)
VALUES(?,?)";
db.query(
sql,
[name,age],
()=>{
res.send("등록");
});
});
12. React 등록
axios.post(
"http://localhost:3000/member",
{
name:"커사맨",
age:50
}
);
13. CORS란?
브라우저는
React
localhost:5173
↓
Node
localhost:3000
처럼 다른 주소에 접근하면 막습니다.
그래서
app.use(cors());
를 사용합니다.
14. CRUD 연결
React
↓
회원목록
↓
GET
/member
--------------------
회원등록
↓
POST
/member
--------------------
회원수정
↓
PUT
/member/1
--------------------
회원삭제
↓
DELETE
/member/1
15. 로그인
Node
↓
JWT 발급
↓
React
↓
LocalStorage 저장
↓
API 호출
↓
Authorization
↓
JWT
↓
로그인 유지
16. 실무 프로젝트 구조
project
│
├── frontend
│ src
│ components
│ pages
│
└── backend
routes
controllers
middleware
config
uploads
17. React 게시판
Board
↓
목록
↓
상세
↓
등록
↓
수정
↓
삭제
Node API
GET
/board
POST
/board
PUT
DELETE
18. React 로그인
localStorage.setItem(
"token",
token
);
API 호출
axios.get(
"/mypage",
{
headers:{
Authorization:
localStorage.getItem(
"token"
)
}
}
);
19. 실무 서비스 구조
사용자
↓
React
↓
Axios
↓
Express
↓
Controller
↓
Model
↓
MySQL
↓
JSON
↓
React 출력
20. 이번 강의 핵심 정리
React
화면(UI)
사용자 입력 처리
API 호출
데이터 출력
Node.js
API 서버
로그인
게시판
업로드
MySQL
회원
게시판
댓글
상품
Axios
axios.get()
axios.post()
axios.put()
axios.delete()
Fetch
fetch()
.then()
.catch()
CORS
app.use(cors());
실무 프로젝트 예시
회원가입
↓
로그인
↓
JWT
↓
게시판
↓
댓글
↓
파일업로드
↓
관리자
↓
React
↓
Node
↓
MySQL
실무 팁
이제부터는 단순한 문법보다 프로젝트 구조가 더 중요합니다. 실무에서는 보통 다음과 같은 순서로 개발합니다.
MySQL 테이블 설계
Node.js + Express에서 REST API 구현
React에서 API 호출
JWT 인증 적용
파일 업로드 및 이미지 관리
배포(프론트엔드와 백엔드)
이 순서에 익숙해지면 대부분의 CRUD 기반 웹 서비스를 만들 수 있습니다.
최종 프로젝트
지금까지 배운 내용을 종합하여 다음 프로젝트를 만들어 보세요.
✅ 회원가입
✅ 로그인(JWT)
✅ 게시판 CRUD
✅ 댓글 기능
✅ 파일 업로드
✅ 관리자 페이지
✅ React 프론트엔드
✅ Node.js 백엔드
✅ MySQL 데이터베이스
Node.js 과정 최종 로드맵
Node.js
↓
Express
↓
MySQL
↓
CRUD
↓
회원가입
↓
Session
↓
JWT
↓
파일 업로드
↓
React 연동
↓
풀스택 프로젝트
↓
배포
다음 단계(추천 심화 과정)
Node.js 기초를 마쳤다면 다음 순서로 심화 학습을 진행하는 것을 추천합니다.
Express 실무 구조(MVC 패턴)
JWT + Refresh Token
React 인증 및 권한 관리
WebSocket을 이용한 실시간 채팅
Docker를 활용한 개발 환경 구성
GitHub Actions를 이용한 자동 배포(CI/CD)
AWS 또는 VPS를 이용한 실제 서비스 배포
이 과정을 마치면 React, Node.js, MySQL을 활용한 실무형 풀스택 프로젝트를 직접 구축하고 운영할 수 있는 기반을 갖추게 됩니다.
이번 강의에서는 React(프론트엔드) + Node.js(백엔드) + MySQL(데이터베이스)를 연결하여 풀스택 웹 애플리케이션을 만드는 방법을 배웁니다.
목표: React에서 Node.js API를 호출하고, MySQL의 데이터를 화면에 출력할 수 있습니다.
1. 전체 구조 이해
실무에서 가장 많이 사용하는 구조입니다.
React
(화면)
↓
Axios / Fetch
↓
Node.js + Express
(API)
↓
MySQL
(Database)
2. 프로젝트 구조
FullStack
│
├── frontend
│ React
│
└── backend
Node.js
3. React 프로젝트 생성
npx create-react-app frontend
또는 Vite 사용
npm create vite@latest frontend
설치
cd frontend
npm install
실행
npm run dev
4. Backend 생성
mkdir backend
cd backend
npm init -y
설치
npm install express mysql2 cors
5. Express 서버
server.js
const express = require("express");
const cors = require("cors");
const app = express();
app.use(cors());
app.use(express.json());
app.listen(3000,()=>{
console.log("Server Running");
});
6. MySQL 연결
const mysql = require("mysql2");
const db = mysql.createConnection({
host:"localhost",
user:"root",
password:"1234",
database:"node_db"
});
7. 회원 조회 API
app.get("/member",(req,res)=>{
const sql=
"SELECT * FROM member";
db.query(sql,(err,result)=>{
res.json(result);
});
});
8. React에서 Fetch
import {useEffect,useState} from "react";
function App(){
const[data,setData]=useState([]);
useEffect(()=>{
fetch("http://localhost:3000/member")
.then(res=>res.json())
.then(result=>{
setData(result);
});
},[]);
return(
<div>
{
data.map((item)=>(
<p key={item.id}>
{item.name}
</p>
))
}
</div>
);
}
export default App;
9. Axios 설치
npm install axios
10. Axios 사용
import axios from "axios";
useEffect(()=>{
axios
.get("http://localhost:3000/member")
.then((res)=>{
setData(res.data);
});
},[]);
11. 회원 등록
Node.js
app.post("/member",(req,res)=>{
const{
name,
age
}=req.body;
const sql=
"INSERT INTO member(name,age)
VALUES(?,?)";
db.query(
sql,
[name,age],
()=>{
res.send("등록");
});
});
12. React 등록
axios.post(
"http://localhost:3000/member",
{
name:"커사맨",
age:50
}
);
13. CORS란?
브라우저는
React
localhost:5173
↓
Node
localhost:3000
처럼 다른 주소에 접근하면 막습니다.
그래서
app.use(cors());
를 사용합니다.
14. CRUD 연결
React
↓
회원목록
↓
GET
/member
--------------------
회원등록
↓
POST
/member
--------------------
회원수정
↓
PUT
/member/1
--------------------
회원삭제
↓
DELETE
/member/1
15. 로그인
Node
↓
JWT 발급
↓
React
↓
LocalStorage 저장
↓
API 호출
↓
Authorization
↓
JWT
↓
로그인 유지
16. 실무 프로젝트 구조
project
│
├── frontend
│ src
│ components
│ pages
│
└── backend
routes
controllers
middleware
config
uploads
17. React 게시판
Board
↓
목록
↓
상세
↓
등록
↓
수정
↓
삭제
Node API
GET
/board
POST
/board
PUT
DELETE
18. React 로그인
localStorage.setItem(
"token",
token
);
API 호출
axios.get(
"/mypage",
{
headers:{
Authorization:
localStorage.getItem(
"token"
)
}
}
);
19. 실무 서비스 구조
사용자
↓
React
↓
Axios
↓
Express
↓
Controller
↓
Model
↓
MySQL
↓
JSON
↓
React 출력
20. 이번 강의 핵심 정리
React
화면(UI)
사용자 입력 처리
API 호출
데이터 출력
Node.js
API 서버
로그인
게시판
업로드
MySQL
회원
게시판
댓글
상품
Axios
axios.get()
axios.post()
axios.put()
axios.delete()
Fetch
fetch()
.then()
.catch()
CORS
app.use(cors());
실무 프로젝트 예시
회원가입
↓
로그인
↓
JWT
↓
게시판
↓
댓글
↓
파일업로드
↓
관리자
↓
React
↓
Node
↓
MySQL
실무 팁
이제부터는 단순한 문법보다 프로젝트 구조가 더 중요합니다. 실무에서는 보통 다음과 같은 순서로 개발합니다.
MySQL 테이블 설계
Node.js + Express에서 REST API 구현
React에서 API 호출
JWT 인증 적용
파일 업로드 및 이미지 관리
배포(프론트엔드와 백엔드)
이 순서에 익숙해지면 대부분의 CRUD 기반 웹 서비스를 만들 수 있습니다.
최종 프로젝트
지금까지 배운 내용을 종합하여 다음 프로젝트를 만들어 보세요.
✅ 회원가입
✅ 로그인(JWT)
✅ 게시판 CRUD
✅ 댓글 기능
✅ 파일 업로드
✅ 관리자 페이지
✅ React 프론트엔드
✅ Node.js 백엔드
✅ MySQL 데이터베이스
Node.js 과정 최종 로드맵
Node.js
↓
Express
↓
MySQL
↓
CRUD
↓
회원가입
↓
Session
↓
JWT
↓
파일 업로드
↓
React 연동
↓
풀스택 프로젝트
↓
배포
다음 단계(추천 심화 과정)
Node.js 기초를 마쳤다면 다음 순서로 심화 학습을 진행하는 것을 추천합니다.
Express 실무 구조(MVC 패턴)
JWT + Refresh Token
React 인증 및 권한 관리
WebSocket을 이용한 실시간 채팅
Docker를 활용한 개발 환경 구성
GitHub Actions를 이용한 자동 배포(CI/CD)
AWS 또는 VPS를 이용한 실제 서비스 배포
이 과정을 마치면 React, Node.js, MySQL을 활용한 실무형 풀스택 프로젝트를 직접 구축하고 운영할 수 있는 기반을 갖추게 됩니다.
#20강. React + Node.js + MySQL 연동