28. 동부산CC React + PHP + MySQL 실무 프로젝트
1. 프로젝트 목표
동부산CC 웹사이트를 React + PHP + MySQL 기반의 실제 서비스 형태로 구축합니다.
최종 목표
React SPA 구축
PHP API 개발
MySQL 연동
관리자 페이지 구현
GitHub 버전 관리
카페24 배포
2. 기술 스택
Front-End
React
Vite
Axios
React Router
CSS Module
Back-End
PHP 8.x
PDO
Database
MySQL
개발도구
VS Code
Git
GitHub
배포
카페24
3. 프로젝트 구조
dongbusan-react
frontend
│
├── src
│ ├── assets
│ ├── components
│ ├── pages
│ ├── layouts
│ ├── context
│ ├── services
│ ├── hooks
│ ├── utils
│ └── App.jsx
│
backend
│
├── api
├── config
├── upload
└── vendor
4. React 화면 구성
Home
↓
Course
↓
Gallery
↓
Reservation
↓
Notice
↓
Contact
↓
Login
↓
MyPage
↓
Admin
5. Header
기능
로고
메뉴
로그인
예약
햄버거 메뉴
사용 기술
React Router
Context
조건부 렌더링
6. Hero
기능
메인 이미지
자동 슬라이드
예약 버튼
사용 기술
useEffect
CSS Animation
7. 코스 안내
기능
EAST
WEST
VALLEY
사용 기술
Axios
map()
Props
8. 코스 상세
기능
모달
홀 정보
거리
PAR
사용 기술
useState
조건부 렌더링
9. 갤러리
기능
이미지 목록
확대
카테고리 필터
사용 기술
Axios
Grid
map()
10. 예약
기능
예약 등록
예약 조회
예약 수정
예약 취소
사용 기술
Form
Axios
CRUD
11. 공지사항
기능
목록
상세
검색
관리자
등록
수정
삭제
12. 문의하기
기능
문의 등록
이메일
전화번호
관리자
답변 상태 관리
13. 로그인
기능
JWT 로그인
로그아웃
로그인 유지
사용 기술
Axios
JWT
Context
14. 마이페이지
기능
회원정보
예약 내역
비밀번호 변경
프로필 수정
15. 관리자
기능
회원관리
예약관리
공지관리
갤러리관리
문의관리
모든 기능은 CRUD입니다.
16. MySQL 테이블
member
reservation
course
notice
gallery
inquiry
admin_log
17. API 구조
login.php
logout.php
member.php
reservation.php
course.php
notice.php
gallery.php
inquiry.php
18. React 데이터 흐름
React
↓
Axios
↓
PHP
↓
MySQL
↓
JSON
↓
React
19. 개발 순서
기획
↓
Figma
↓
Component Tree
↓
React 개발
↓
PHP API
↓
MySQL
↓
테스트
↓
GitHub
↓
Build
↓
카페24 배포
20. GitHub
git add .
↓
git commit
↓
git push
기능이 완성될 때마다 Commit을 수행합니다.
21. Build
npm run build
React 프로젝트를 배포용으로 변환합니다.
22. 카페24 배포
dist
↓
FTP
↓
www
↓
서비스 시작
23. 테스트 체크리스트
회원가입
✅
로그인
✅
예약
✅
공지
✅
갤러리
✅
관리자
✅
반응형
✅
모바일
✅
24. 프로젝트 일정 예시
단계 작업
1주차 기획 + Figma
2주차 React 화면 개발
3주차 PHP API 개발
4주차 MySQL 연동
5주차 관리자 페이지
6주차 테스트 + 배포
25. 완성 후 확장 기능
실시간 예약 현황
결제 연동
카카오 로그인
이메일 인증
문자 알림
관리자 통계 대시보드
날씨 API
지도 연동
26. 실무 개발 흐름
요구사항 분석
↓
기획
↓
UI 디자인
↓
컴포넌트 설계
↓
React 개발
↓
API 개발
↓
DB 설계
↓
테스트
↓
배포
↓
운영
↓
유지보수
27. 동부산CC 프로젝트에서 사용한 React 기술
기능 React 기술
화면 구성 Component
데이터 전달 Props
상태 관리 useState
사용자 입력 Event
화면 제어 조건부 렌더링
목록 출력 map()
데이터 로딩 useEffect
입력 처리 Form
브라우저 저장 localStorage
페이지 이동 React Router
서버 통신 Axios
로그인 JWT
공통 데이터 Context
CRUD Axios + PHP
데이터 저장 MySQL
28. 최종 정리
동부산CC 프로젝트는 React, PHP, MySQL을 이용한 실무형 웹 애플리케이션입니다.
React는 사용자 화면(UI)을 담당하고, PHP는 API와 비즈니스 로직을 처리하며, MySQL은 데이터를 저장합니다.
프로젝트는 기획부터 디자인, 컴포넌트 설계, React 개발, API 구현, 데이터베이스 설계, 테스트, GitHub 버전 관리, 카페24 배포까지 실무에서 사용하는 전체 개발 과정을 경험하도록 구성되어 있습니다.
이 프로젝트를 완성하면 React 기초부터 실무 개발 흐름까지 하나의 서비스 안에서 종합적으로 익힐 수 있으며, 포트폴리오로 활용하기에도 적합한 수준의 결과물을 만들 수 있습니다.
1. 프로젝트 목표
동부산CC 웹사이트를 React + PHP + MySQL 기반의 실제 서비스 형태로 구축합니다.
최종 목표
React SPA 구축
PHP API 개발
MySQL 연동
관리자 페이지 구현
GitHub 버전 관리
카페24 배포
2. 기술 스택
Front-End
React
Vite
Axios
React Router
CSS Module
Back-End
PHP 8.x
PDO
Database
MySQL
개발도구
VS Code
Git
GitHub
배포
카페24
3. 프로젝트 구조
dongbusan-react
frontend
│
├── src
│ ├── assets
│ ├── components
│ ├── pages
│ ├── layouts
│ ├── context
│ ├── services
│ ├── hooks
│ ├── utils
│ └── App.jsx
│
backend
│
├── api
├── config
├── upload
└── vendor
4. React 화면 구성
Home
↓
Course
↓
Gallery
↓
Reservation
↓
Notice
↓
Contact
↓
Login
↓
MyPage
↓
Admin
5. Header
기능
로고
메뉴
로그인
예약
햄버거 메뉴
사용 기술
React Router
Context
조건부 렌더링
6. Hero
기능
메인 이미지
자동 슬라이드
예약 버튼
사용 기술
useEffect
CSS Animation
7. 코스 안내
기능
EAST
WEST
VALLEY
사용 기술
Axios
map()
Props
8. 코스 상세
기능
모달
홀 정보
거리
PAR
사용 기술
useState
조건부 렌더링
9. 갤러리
기능
이미지 목록
확대
카테고리 필터
사용 기술
Axios
Grid
map()
10. 예약
기능
예약 등록
예약 조회
예약 수정
예약 취소
사용 기술
Form
Axios
CRUD
11. 공지사항
기능
목록
상세
검색
관리자
등록
수정
삭제
12. 문의하기
기능
문의 등록
이메일
전화번호
관리자
답변 상태 관리
13. 로그인
기능
JWT 로그인
로그아웃
로그인 유지
사용 기술
Axios
JWT
Context
14. 마이페이지
기능
회원정보
예약 내역
비밀번호 변경
프로필 수정
15. 관리자
기능
회원관리
예약관리
공지관리
갤러리관리
문의관리
모든 기능은 CRUD입니다.
16. MySQL 테이블
member
reservation
course
notice
gallery
inquiry
admin_log
17. API 구조
login.php
logout.php
member.php
reservation.php
course.php
notice.php
gallery.php
inquiry.php
18. React 데이터 흐름
React
↓
Axios
↓
PHP
↓
MySQL
↓
JSON
↓
React
19. 개발 순서
기획
↓
Figma
↓
Component Tree
↓
React 개발
↓
PHP API
↓
MySQL
↓
테스트
↓
GitHub
↓
Build
↓
카페24 배포
20. GitHub
git add .
↓
git commit
↓
git push
기능이 완성될 때마다 Commit을 수행합니다.
21. Build
npm run build
React 프로젝트를 배포용으로 변환합니다.
22. 카페24 배포
dist
↓
FTP
↓
www
↓
서비스 시작
23. 테스트 체크리스트
회원가입
✅
로그인
✅
예약
✅
공지
✅
갤러리
✅
관리자
✅
반응형
✅
모바일
✅
24. 프로젝트 일정 예시
단계 작업
1주차 기획 + Figma
2주차 React 화면 개발
3주차 PHP API 개발
4주차 MySQL 연동
5주차 관리자 페이지
6주차 테스트 + 배포
25. 완성 후 확장 기능
실시간 예약 현황
결제 연동
카카오 로그인
이메일 인증
문자 알림
관리자 통계 대시보드
날씨 API
지도 연동
26. 실무 개발 흐름
요구사항 분석
↓
기획
↓
UI 디자인
↓
컴포넌트 설계
↓
React 개발
↓
API 개발
↓
DB 설계
↓
테스트
↓
배포
↓
운영
↓
유지보수
27. 동부산CC 프로젝트에서 사용한 React 기술
기능 React 기술
화면 구성 Component
데이터 전달 Props
상태 관리 useState
사용자 입력 Event
화면 제어 조건부 렌더링
목록 출력 map()
데이터 로딩 useEffect
입력 처리 Form
브라우저 저장 localStorage
페이지 이동 React Router
서버 통신 Axios
로그인 JWT
공통 데이터 Context
CRUD Axios + PHP
데이터 저장 MySQL
28. 최종 정리
동부산CC 프로젝트는 React, PHP, MySQL을 이용한 실무형 웹 애플리케이션입니다.
React는 사용자 화면(UI)을 담당하고, PHP는 API와 비즈니스 로직을 처리하며, MySQL은 데이터를 저장합니다.
프로젝트는 기획부터 디자인, 컴포넌트 설계, React 개발, API 구현, 데이터베이스 설계, 테스트, GitHub 버전 관리, 카페24 배포까지 실무에서 사용하는 전체 개발 과정을 경험하도록 구성되어 있습니다.
이 프로젝트를 완성하면 React 기초부터 실무 개발 흐름까지 하나의 서비스 안에서 종합적으로 익힐 수 있으며, 포트폴리오로 활용하기에도 적합한 수준의 결과물을 만들 수 있습니다.
#28. 동부산CC React + PHP + MySQL 실무 프로젝트