24강. 실무형 쇼핑몰 프로젝트 만들기
이번 강의에서는 React + Node.js + MySQL을 활용하여 실무형 쇼핑몰 프로젝트를 만들어 봅니다.
목표: 상품 관리, 장바구니, 주문, 관리자 기능까지 포함된 쇼핑몰의 핵심 구조를 구현할 수 있습니다.
1. 쇼핑몰 전체 구조
사용자
↓
React
↓
Axios
↓
Node.js API
↓
MySQL
↓
상품
회원
장바구니
주문
결제
2. 프로젝트 구조
shopping-mall
│
├── frontend
│
│ ├── pages
│ ├── components
│ ├── api
│ ├── hooks
│ └── assets
│
└── backend
│
├── routes
├── controllers
├── models
├── middleware
├── uploads
└── config
3. 데이터베이스 설계
member
product
category
cart
orders
order_items
review
4. 상품 테이블
CREATE TABLE product(
id INT AUTO_INCREMENT PRIMARY KEY,
name VARCHAR(200),
price INT,
image VARCHAR(255),
description TEXT,
stock INT DEFAULT 0,
category_id INT,
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);
5. 카테고리 테이블
CREATE TABLE category(
id INT AUTO_INCREMENT PRIMARY KEY,
name VARCHAR(100)
);
예시 데이터
골프용품
전자제품
의류
식품
6. 상품 목록 API
GET
/api/v1/products
SQL
SELECT *
FROM product
ORDER BY id DESC;
7. 상품 상세 API
GET
/api/v1/products/1
SQL
SELECT *
FROM product
WHERE id=?;
8. 상품 등록 API
POST
/api/v1/products
입력
{
"name":"골프공",
"price":30000,
"stock":100
}
9. 상품 수정
PUT
/api/v1/products/1
SQL
UPDATE product
SET
name=?,
price=?,
stock=?
WHERE id=?;
10. 상품 삭제
DELETE
/api/v1/products/1
11. 장바구니 테이블
CREATE TABLE cart(
id INT AUTO_INCREMENT PRIMARY KEY,
member_id INT,
product_id INT,
quantity INT
);
12. 장바구니 추가
POST
/api/v1/cart
SQL
INSERT INTO cart(
member_id,
product_id,
quantity
)
VALUES(
?,?,?
);
13. 주문 테이블
CREATE TABLE orders(
id INT AUTO_INCREMENT PRIMARY KEY,
member_id INT,
total_price INT,
status VARCHAR(30),
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);
14. 주문 상세
CREATE TABLE order_items(
id INT AUTO_INCREMENT PRIMARY KEY,
order_id INT,
product_id INT,
price INT,
quantity INT
);
15. 리뷰
CREATE TABLE review(
id INT AUTO_INCREMENT PRIMARY KEY,
member_id INT,
product_id INT,
rating INT,
content TEXT
);
16. React 화면
홈
↓
상품목록
↓
상품상세
↓
장바구니
↓
주문
↓
결제
↓
주문완료
17. 관리자 페이지
관리자
│
├── 상품관리
├── 주문관리
├── 회원관리
├── 리뷰관리
└── 통계
18. 관리자 API
GET
/admin/products
POST
/admin/products
PUT
/admin/products/1
DELETE
/admin/products/1
19. JWT 권한
회원
↓
상품조회
---------------
관리자
↓
상품등록
↓
상품삭제
↓
상품수정
관리자 권한을 확인하는 미들웨어를 추가합니다.
20. 이미지 업로드
상품등록
↓
이미지 선택
↓
multer
↓
uploads
↓
DB 저장
React
<img src="/uploads/golfball.jpg">
21. 검색
SELECT *
FROM product
WHERE name
LIKE ?;
예시
골프
↓
골프공
골프장갑
22. 페이지네이션
LIMIT ?,12;
React
1
2
3
4
5
23. 프로젝트 완성 구조
회원가입
↓
로그인(JWT)
↓
상품목록
↓
상품상세
↓
장바구니
↓
주문
↓
결제
↓
주문완료
↓
관리자
24. 이번 강의 핵심 정리
데이터베이스
Member
Product
Category
Cart
Orders
OrderItems
Review
API
상품 CRUD
장바구니
주문
리뷰
React
상품목록
상세
장바구니
주문
Node
JWT
multer
MySQL
실무 팁
실무 쇼핑몰에서는 다음과 같은 기능도 자주 구현합니다.
기능 설명
재고 관리 주문 시 재고 차감
주문 상태 결제 완료, 배송 중, 배송 완료
할인 쿠폰, 이벤트 할인
결제 연동 외부 결제 서비스와 연계
이미지 최적화 썸네일과 원본 이미지 분리
관리자 통계 매출, 인기 상품, 주문 현황
이런 기능은 기본 CRUD를 바탕으로 점차 확장해 나갑니다.
최종 프로젝트
다음 기능을 모두 구현해 보세요.
✅ 회원가입
✅ 로그인(JWT)
✅ 상품 CRUD
✅ 카테고리
✅ 장바구니
✅ 주문
✅ 리뷰
✅ 이미지 업로드
✅ 관리자 페이지
✅ React 연동
이번 강의에서는 React + Node.js + MySQL을 활용하여 실무형 쇼핑몰 프로젝트를 만들어 봅니다.
목표: 상품 관리, 장바구니, 주문, 관리자 기능까지 포함된 쇼핑몰의 핵심 구조를 구현할 수 있습니다.
1. 쇼핑몰 전체 구조
사용자
↓
React
↓
Axios
↓
Node.js API
↓
MySQL
↓
상품
회원
장바구니
주문
결제
2. 프로젝트 구조
shopping-mall
│
├── frontend
│
│ ├── pages
│ ├── components
│ ├── api
│ ├── hooks
│ └── assets
│
└── backend
│
├── routes
├── controllers
├── models
├── middleware
├── uploads
└── config
3. 데이터베이스 설계
member
product
category
cart
orders
order_items
review
4. 상품 테이블
CREATE TABLE product(
id INT AUTO_INCREMENT PRIMARY KEY,
name VARCHAR(200),
price INT,
image VARCHAR(255),
description TEXT,
stock INT DEFAULT 0,
category_id INT,
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);
5. 카테고리 테이블
CREATE TABLE category(
id INT AUTO_INCREMENT PRIMARY KEY,
name VARCHAR(100)
);
예시 데이터
골프용품
전자제품
의류
식품
6. 상품 목록 API
GET
/api/v1/products
SQL
SELECT *
FROM product
ORDER BY id DESC;
7. 상품 상세 API
GET
/api/v1/products/1
SQL
SELECT *
FROM product
WHERE id=?;
8. 상품 등록 API
POST
/api/v1/products
입력
{
"name":"골프공",
"price":30000,
"stock":100
}
9. 상품 수정
PUT
/api/v1/products/1
SQL
UPDATE product
SET
name=?,
price=?,
stock=?
WHERE id=?;
10. 상품 삭제
DELETE
/api/v1/products/1
11. 장바구니 테이블
CREATE TABLE cart(
id INT AUTO_INCREMENT PRIMARY KEY,
member_id INT,
product_id INT,
quantity INT
);
12. 장바구니 추가
POST
/api/v1/cart
SQL
INSERT INTO cart(
member_id,
product_id,
quantity
)
VALUES(
?,?,?
);
13. 주문 테이블
CREATE TABLE orders(
id INT AUTO_INCREMENT PRIMARY KEY,
member_id INT,
total_price INT,
status VARCHAR(30),
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);
14. 주문 상세
CREATE TABLE order_items(
id INT AUTO_INCREMENT PRIMARY KEY,
order_id INT,
product_id INT,
price INT,
quantity INT
);
15. 리뷰
CREATE TABLE review(
id INT AUTO_INCREMENT PRIMARY KEY,
member_id INT,
product_id INT,
rating INT,
content TEXT
);
16. React 화면
홈
↓
상품목록
↓
상품상세
↓
장바구니
↓
주문
↓
결제
↓
주문완료
17. 관리자 페이지
관리자
│
├── 상품관리
├── 주문관리
├── 회원관리
├── 리뷰관리
└── 통계
18. 관리자 API
GET
/admin/products
POST
/admin/products
PUT
/admin/products/1
DELETE
/admin/products/1
19. JWT 권한
회원
↓
상품조회
---------------
관리자
↓
상품등록
↓
상품삭제
↓
상품수정
관리자 권한을 확인하는 미들웨어를 추가합니다.
20. 이미지 업로드
상품등록
↓
이미지 선택
↓
multer
↓
uploads
↓
DB 저장
React
<img src="/uploads/golfball.jpg">
21. 검색
SELECT *
FROM product
WHERE name
LIKE ?;
예시
골프
↓
골프공
골프장갑
22. 페이지네이션
LIMIT ?,12;
React
1
2
3
4
5
23. 프로젝트 완성 구조
회원가입
↓
로그인(JWT)
↓
상품목록
↓
상품상세
↓
장바구니
↓
주문
↓
결제
↓
주문완료
↓
관리자
24. 이번 강의 핵심 정리
데이터베이스
Member
Product
Category
Cart
Orders
OrderItems
Review
API
상품 CRUD
장바구니
주문
리뷰
React
상품목록
상세
장바구니
주문
Node
JWT
multer
MySQL
실무 팁
실무 쇼핑몰에서는 다음과 같은 기능도 자주 구현합니다.
기능 설명
재고 관리 주문 시 재고 차감
주문 상태 결제 완료, 배송 중, 배송 완료
할인 쿠폰, 이벤트 할인
결제 연동 외부 결제 서비스와 연계
이미지 최적화 썸네일과 원본 이미지 분리
관리자 통계 매출, 인기 상품, 주문 현황
이런 기능은 기본 CRUD를 바탕으로 점차 확장해 나갑니다.
최종 프로젝트
다음 기능을 모두 구현해 보세요.
✅ 회원가입
✅ 로그인(JWT)
✅ 상품 CRUD
✅ 카테고리
✅ 장바구니
✅ 주문
✅ 리뷰
✅ 이미지 업로드
✅ 관리자 페이지
✅ React 연동
#24강. 실무형 쇼핑몰 프로젝트 만들기