16. 프로젝트 제작 (동부산CC)
1. 프로젝트 목표
React에서 지금까지 배운 내용을 종합하여 동부산CC 웹사이트를 제작합니다.
프로젝트를 진행하면서 다음 기술을 모두 활용합니다.
JSX
Component
Props
useState
Event
조건부 렌더링
map()
useEffect
Form
localStorage
React Router
CSS
2. 프로젝트 기능
동부산CC 웹사이트에는 다음과 같은 기능을 구현합니다.
메인 페이지
코스 안내
코스 상세보기
갤러리
예약하기
공지사항
문의하기
3. 프로젝트 구조
src
│
├── assets
│
├── components
│ ├── Header.jsx
│ ├── Hero.jsx
│ ├── CourseSection.jsx
│ ├── CourseCard.jsx
│ ├── CourseModal.jsx
│ ├── Gallery.jsx
│ ├── Reservation.jsx
│ ├── Notice.jsx
│ └── Footer.jsx
│
├── pages
│ ├── Home.jsx
│ ├── Course.jsx
│ ├── Gallery.jsx
│ ├── Reservation.jsx
│ └── Contact.jsx
│
├── data
│
├── App.jsx
└── main.jsx
4. Header
기능
로고
메뉴
예약 버튼
사용 기술
Component
React Router
Link
Header
↓
Home
Course
Gallery
Reservation
Notice
5. Hero
메인 비주얼
사용 기술
JSX
CSS
useEffect
기능
자동 슬라이드
예약 버튼
6. CourseSection
코스 목록
사용 기술
map()
Props
filter()
기능
EAST COURSE
WEST COURSE
VALLEY COURSE
7. CourseCard
사용 기술
Props
useState
localStorage
기능
이미지
거리
PAR
좋아요
상세보기
8. CourseModal
사용 기술
useState
조건부 렌더링
기능
코스 설명
홀 정보
닫기
9. Gallery
사용 기술
map()
CSS Grid
기능
사진 출력
확대
이미지 보기
10. Reservation
사용 기술
Form
useState
Event
localStorage
기능
이름
전화번호
코스
날짜
인원
예약 후
localStorage 저장
11. Notice
사용 기술
map()
기능
공지 출력
날짜
제목
12. Footer
기능
주소
전화번호
Copyright
13. React 문법 연결
Header
↓
Component
↓
React Router
Course
↓
Props
↓
map()
↓
CourseCard
↓
useState
↓
localStorage
Reservation
↓
Form
↓
Event
↓
State
↓
localStorage
Hero
↓
useEffect
↓
자동 슬라이드
14. 프로젝트 실행 흐름
main.jsx
↓
App.jsx
↓
Header
↓
Hero
↓
CourseSection
↓
Gallery
↓
Reservation
↓
Notice
↓
Footer
15. 사용자 흐름
메인
↓
코스 안내
↓
상세보기
↓
예약
↓
예약 완료
↓
localStorage 저장
16. 프로젝트에서 사용한 React 문법
기능 사용한 기술
메뉴 React Router
코스 출력 map()
좋아요 useState
좋아요 유지 localStorage
예약 입력 Form
예약 저장 localStorage
자동 슬라이드 useEffect
상세보기 조건부 렌더링
카드 출력 Props
17. 프로젝트 완성 후 추가 기능
로그인
회원가입
게시판
댓글
관리자 페이지
API 연동
MySQL 저장
GitHub 배포
카페24 배포
18. 프로젝트 개발 순서
기획
↓
UI 디자인
↓
컴포넌트 분리
↓
React 개발
↓
테스트
↓
빌드
↓
배포
19. 프로젝트에서 가장 중요한 흐름
Component
↓
Props
↓
State
↓
Event
↓
useEffect
↓
localStorage
↓
React Router
모든 기능은 이 흐름 안에서 동작합니다.
정리
동부산CC 프로젝트는 React 기초 문법을 실제 웹사이트에 적용하는 종합 실습입니다.
프로젝트를 진행하면서 컴포넌트 분리, Props를 이용한 데이터 전달, useState를 이용한 상태 관리, Event 처리, 조건부 렌더링, map()을 이용한 목록 출력, useEffect를 이용한 자동 실행, Form 처리, localStorage 저장, React Router를 이용한 페이지 이동까지 React의 핵심 기능을 모두 경험할 수 있습니다.
하나의 프로젝트를 완성하는 과정에서 React의 전체 개발 흐름을 이해할 수 있으며, 이후 로그인, 게시판, API 연동, 데이터베이스 연결 등 더 큰 프로젝트로 확장하는 기반이 됩니다.
1. 프로젝트 목표
React에서 지금까지 배운 내용을 종합하여 동부산CC 웹사이트를 제작합니다.
프로젝트를 진행하면서 다음 기술을 모두 활용합니다.
JSX
Component
Props
useState
Event
조건부 렌더링
map()
useEffect
Form
localStorage
React Router
CSS
2. 프로젝트 기능
동부산CC 웹사이트에는 다음과 같은 기능을 구현합니다.
메인 페이지
코스 안내
코스 상세보기
갤러리
예약하기
공지사항
문의하기
3. 프로젝트 구조
src
│
├── assets
│
├── components
│ ├── Header.jsx
│ ├── Hero.jsx
│ ├── CourseSection.jsx
│ ├── CourseCard.jsx
│ ├── CourseModal.jsx
│ ├── Gallery.jsx
│ ├── Reservation.jsx
│ ├── Notice.jsx
│ └── Footer.jsx
│
├── pages
│ ├── Home.jsx
│ ├── Course.jsx
│ ├── Gallery.jsx
│ ├── Reservation.jsx
│ └── Contact.jsx
│
├── data
│
├── App.jsx
└── main.jsx
4. Header
기능
로고
메뉴
예약 버튼
사용 기술
Component
React Router
Link
Header
↓
Home
Course
Gallery
Reservation
Notice
5. Hero
메인 비주얼
사용 기술
JSX
CSS
useEffect
기능
자동 슬라이드
예약 버튼
6. CourseSection
코스 목록
사용 기술
map()
Props
filter()
기능
EAST COURSE
WEST COURSE
VALLEY COURSE
7. CourseCard
사용 기술
Props
useState
localStorage
기능
이미지
거리
PAR
좋아요
상세보기
8. CourseModal
사용 기술
useState
조건부 렌더링
기능
코스 설명
홀 정보
닫기
9. Gallery
사용 기술
map()
CSS Grid
기능
사진 출력
확대
이미지 보기
10. Reservation
사용 기술
Form
useState
Event
localStorage
기능
이름
전화번호
코스
날짜
인원
예약 후
localStorage 저장
11. Notice
사용 기술
map()
기능
공지 출력
날짜
제목
12. Footer
기능
주소
전화번호
Copyright
13. React 문법 연결
Header
↓
Component
↓
React Router
Course
↓
Props
↓
map()
↓
CourseCard
↓
useState
↓
localStorage
Reservation
↓
Form
↓
Event
↓
State
↓
localStorage
Hero
↓
useEffect
↓
자동 슬라이드
14. 프로젝트 실행 흐름
main.jsx
↓
App.jsx
↓
Header
↓
Hero
↓
CourseSection
↓
Gallery
↓
Reservation
↓
Notice
↓
Footer
15. 사용자 흐름
메인
↓
코스 안내
↓
상세보기
↓
예약
↓
예약 완료
↓
localStorage 저장
16. 프로젝트에서 사용한 React 문법
기능 사용한 기술
메뉴 React Router
코스 출력 map()
좋아요 useState
좋아요 유지 localStorage
예약 입력 Form
예약 저장 localStorage
자동 슬라이드 useEffect
상세보기 조건부 렌더링
카드 출력 Props
17. 프로젝트 완성 후 추가 기능
로그인
회원가입
게시판
댓글
관리자 페이지
API 연동
MySQL 저장
GitHub 배포
카페24 배포
18. 프로젝트 개발 순서
기획
↓
UI 디자인
↓
컴포넌트 분리
↓
React 개발
↓
테스트
↓
빌드
↓
배포
19. 프로젝트에서 가장 중요한 흐름
Component
↓
Props
↓
State
↓
Event
↓
useEffect
↓
localStorage
↓
React Router
모든 기능은 이 흐름 안에서 동작합니다.
정리
동부산CC 프로젝트는 React 기초 문법을 실제 웹사이트에 적용하는 종합 실습입니다.
프로젝트를 진행하면서 컴포넌트 분리, Props를 이용한 데이터 전달, useState를 이용한 상태 관리, Event 처리, 조건부 렌더링, map()을 이용한 목록 출력, useEffect를 이용한 자동 실행, Form 처리, localStorage 저장, React Router를 이용한 페이지 이동까지 React의 핵심 기능을 모두 경험할 수 있습니다.
하나의 프로젝트를 완성하는 과정에서 React의 전체 개발 흐름을 이해할 수 있으며, 이후 로그인, 게시판, API 연동, 데이터베이스 연결 등 더 큰 프로젝트로 확장하는 기반이 됩니다.
#16. 프로젝트 제작 (동부산CC)