27. MySQL 데이터베이스 설계 및 연동
1. MySQL이란?
MySQL은 데이터를 저장하는 데이터베이스(Database) 입니다.
React는 화면(UI)을 만들고,
PHP는 데이터를 처리하며,
MySQL은 데이터를 저장합니다.
전체 구조는 다음과 같습니다.
React
↓
Axios
↓
PHP(API)
↓
MySQL
↓
JSON
↓
React
React는 DB에 직접 접근하지 않고 반드시 PHP(API)를 통해 데이터를 주고받습니다.
2. 동부산CC 데이터베이스 설계
프로젝트명
dongbusan_cc
테이블
member
reservation
course
notice
gallery
inquiry
admin_log
3. member 테이블
회원 정보를 저장합니다.
컬럼 타입 설명
id INT 회원번호(PK)
userid VARCHAR(50) 로그인 ID
password VARCHAR(255) 암호화된 비밀번호
name VARCHAR(100) 이름
phone VARCHAR(20) 연락처
email VARCHAR(100) 이메일
role VARCHAR(20) user / admin
created_at DATETIME 가입일
4. reservation 테이블
예약 정보를 저장합니다.
컬럼 타입
id INT
member_id INT
course VARCHAR(30)
play_date DATE
tee_time TIME
players INT
memo TEXT
status VARCHAR(20)
5. course 테이블
코스 정보를 저장합니다.
컬럼 타입
id INT
name VARCHAR(50)
description TEXT
image VARCHAR(255)
par INT
distance INT
6. notice 테이블
공지사항입니다.
컬럼 타입
id INT
title VARCHAR(200)
content TEXT
writer VARCHAR(50)
created_at DATETIME
7. gallery 테이블
갤러리 이미지입니다.
컬럼 타입
id INT
title VARCHAR(200)
image VARCHAR(255)
description TEXT
created_at DATETIME
8. inquiry 테이블
문의하기입니다.
컬럼 타입
id INT
member_id INT
subject VARCHAR(200)
content TEXT
created_at DATETIME
9. 테이블 관계(ERD)
member
│
├──── reservation
│
└──── inquiry
course
│
└──── reservation
예약은 회원과 코스를 연결합니다.
10. React → PHP → MySQL
예약 등록
Reservation.jsx
↓
axios.post()
↓
reservation.php
↓
INSERT
↓
reservation 테이블
11. MySQL → React
예약 조회
SELECT
↓
PHP
↓
JSON
↓
Axios
↓
useState
↓
map()
↓
화면 출력
12. CRUD와 MySQL
등록
INSERT
조회
SELECT
수정
UPDATE
삭제
DELETE
모든 React 프로젝트는 결국 이 네 가지 SQL을 사용합니다.
13. React 연결 예제
조회
const [list,setList]=useState([]);
useEffect(()=>{
loadReservation();
},[]);
API
const loadReservation=async()=>{
const res=
await axios.get(
"/api/reservation.php"
);
setList(res.data);
}
출력
{
list.map(item=>(
<ReservationCard
key={item.id}
item={item}
/>
))
}
14. PHP 예제
$sql="SELECT * FROM reservation";
$result=$pdo->query($sql);
echo json_encode(
$result->fetchAll()
);
React는 JSON만 받으면 됩니다.
15. 실무 폴더 구조
frontend
src
components
pages
services
backend
api
config
login.php
reservation.php
notice.php
gallery.php
db.php
DB 연결은 db.php 하나에서 관리하는 것이 좋습니다.
16. 보안
비밀번호
password_hash()
password_verify()
를 사용합니다.
절대로 평문으로 저장하지 않습니다.
17. 인덱스(Index)
검색이 많은 컬럼은 인덱스를 추가합니다.
예)
userid
play_date
created_at
조회 속도가 향상됩니다.
18. React + MySQL 실행 흐름
React
↓
Axios
↓
PHP
↓
MySQL
↓
JSON
↓
State
↓
React 렌더링
19. 동부산CC 최종 구조
React
├── 로그인
├── 예약
├── 공지사항
├── 갤러리
├── 문의하기
├── 관리자
↓
Axios
↓
PHP API
↓
MySQL
├── member
├── reservation
├── course
├── notice
├── gallery
└── inquiry
20. 정리
MySQL은 React 프로젝트에서 데이터를 저장하는 핵심 데이터베이스입니다.
React는 Axios를 통해 PHP API와 통신하고, PHP는 MySQL에서 데이터를 조회하거나 저장한 뒤 JSON 형태로 React에 반환합니다.
동부산CC 프로젝트에서는 회원, 예약, 코스, 공지사항, 갤러리, 문의하기를 각각 테이블로 분리하여 설계하면 유지보수가 쉽고 확장성이 높은 구조를 만들 수 있습니다.
데이터베이스를 먼저 설계한 후 API를 만들고, 마지막으로 React와 연결하는 순서가 실무에서 가장 많이 사용하는 개발 방식입니다.
1. MySQL이란?
MySQL은 데이터를 저장하는 데이터베이스(Database) 입니다.
React는 화면(UI)을 만들고,
PHP는 데이터를 처리하며,
MySQL은 데이터를 저장합니다.
전체 구조는 다음과 같습니다.
React
↓
Axios
↓
PHP(API)
↓
MySQL
↓
JSON
↓
React
React는 DB에 직접 접근하지 않고 반드시 PHP(API)를 통해 데이터를 주고받습니다.
2. 동부산CC 데이터베이스 설계
프로젝트명
dongbusan_cc
테이블
member
reservation
course
notice
gallery
inquiry
admin_log
3. member 테이블
회원 정보를 저장합니다.
컬럼 타입 설명
id INT 회원번호(PK)
userid VARCHAR(50) 로그인 ID
password VARCHAR(255) 암호화된 비밀번호
name VARCHAR(100) 이름
phone VARCHAR(20) 연락처
email VARCHAR(100) 이메일
role VARCHAR(20) user / admin
created_at DATETIME 가입일
4. reservation 테이블
예약 정보를 저장합니다.
컬럼 타입
id INT
member_id INT
course VARCHAR(30)
play_date DATE
tee_time TIME
players INT
memo TEXT
status VARCHAR(20)
5. course 테이블
코스 정보를 저장합니다.
컬럼 타입
id INT
name VARCHAR(50)
description TEXT
image VARCHAR(255)
par INT
distance INT
6. notice 테이블
공지사항입니다.
컬럼 타입
id INT
title VARCHAR(200)
content TEXT
writer VARCHAR(50)
created_at DATETIME
7. gallery 테이블
갤러리 이미지입니다.
컬럼 타입
id INT
title VARCHAR(200)
image VARCHAR(255)
description TEXT
created_at DATETIME
8. inquiry 테이블
문의하기입니다.
컬럼 타입
id INT
member_id INT
subject VARCHAR(200)
content TEXT
created_at DATETIME
9. 테이블 관계(ERD)
member
│
├──── reservation
│
└──── inquiry
course
│
└──── reservation
예약은 회원과 코스를 연결합니다.
10. React → PHP → MySQL
예약 등록
Reservation.jsx
↓
axios.post()
↓
reservation.php
↓
INSERT
↓
reservation 테이블
11. MySQL → React
예약 조회
SELECT
↓
PHP
↓
JSON
↓
Axios
↓
useState
↓
map()
↓
화면 출력
12. CRUD와 MySQL
등록
INSERT
조회
SELECT
수정
UPDATE
삭제
DELETE
모든 React 프로젝트는 결국 이 네 가지 SQL을 사용합니다.
13. React 연결 예제
조회
const [list,setList]=useState([]);
useEffect(()=>{
loadReservation();
},[]);
API
const loadReservation=async()=>{
const res=
await axios.get(
"/api/reservation.php"
);
setList(res.data);
}
출력
{
list.map(item=>(
<ReservationCard
key={item.id}
item={item}
/>
))
}
14. PHP 예제
$sql="SELECT * FROM reservation";
$result=$pdo->query($sql);
echo json_encode(
$result->fetchAll()
);
React는 JSON만 받으면 됩니다.
15. 실무 폴더 구조
frontend
src
components
pages
services
backend
api
config
login.php
reservation.php
notice.php
gallery.php
db.php
DB 연결은 db.php 하나에서 관리하는 것이 좋습니다.
16. 보안
비밀번호
password_hash()
password_verify()
를 사용합니다.
절대로 평문으로 저장하지 않습니다.
17. 인덱스(Index)
검색이 많은 컬럼은 인덱스를 추가합니다.
예)
userid
play_date
created_at
조회 속도가 향상됩니다.
18. React + MySQL 실행 흐름
React
↓
Axios
↓
PHP
↓
MySQL
↓
JSON
↓
State
↓
React 렌더링
19. 동부산CC 최종 구조
React
├── 로그인
├── 예약
├── 공지사항
├── 갤러리
├── 문의하기
├── 관리자
↓
Axios
↓
PHP API
↓
MySQL
├── member
├── reservation
├── course
├── notice
├── gallery
└── inquiry
20. 정리
MySQL은 React 프로젝트에서 데이터를 저장하는 핵심 데이터베이스입니다.
React는 Axios를 통해 PHP API와 통신하고, PHP는 MySQL에서 데이터를 조회하거나 저장한 뒤 JSON 형태로 React에 반환합니다.
동부산CC 프로젝트에서는 회원, 예약, 코스, 공지사항, 갤러리, 문의하기를 각각 테이블로 분리하여 설계하면 유지보수가 쉽고 확장성이 높은 구조를 만들 수 있습니다.
데이터베이스를 먼저 설계한 후 API를 만들고, 마지막으로 React와 연결하는 순서가 실무에서 가장 많이 사용하는 개발 방식입니다.
#27. MySQL 데이터베이스 설계 및 연동