폼 만들고, DB에 저장하고, 이미지 업로드까지… 복잡해 보여도, 사실 꽤 간단해요. Laravel + Vue로 제대로 보여드릴게요.
안녕하세요! 지난 포스팅에서 PHP + MySQL의 강점을 강조하며 Laravel 기반 커머스 설계를 소개했는데요, 오늘은 그 연장선으로 “상품 등록 기능”을 Laravel + Vue.js로 어떻게 구현하는지 보여드릴게요. 사실 이 부분은 대부분의 쇼핑몰에서 ‘관리자 페이지’의 핵심 기능인데, 생각보다 구현이 어렵지 않답니다. Laravel의 RESTful API와 Vue의 양방향 데이터 바인딩을 잘만 조합하면, UX도 좋고 유지보수도 쉬운 구조가 나와요. 특히 이미지 업로드, 폼 유효성 검사, 카테고리 연결까지 다루니, 실무에 바로 적용하실 수 있을 거예요. 그럼, 실제 코드 흐름과 함께 찬찬히 따라가볼까요?
목차
기능 흐름 및 구조 개요
상품 등록 기능은 단순해 보이지만 실제로는 꽤 많은 컴포넌트들이 얽혀 있어요. 폼 → 유효성 검사 → 이미지 처리 → DB 저장 → 응답 처리 이 전체 흐름이 부드럽게 이어져야 하죠.
이번 구조는 Laravel API와 Vue 컴포넌트가 분리되어 동작하고, 파일 업로드는 Laravel의 Storage 시스템을 활용하며, 데이터는 Axios로 API 호출하여 등록 처리됩니다.
Laravel 쪽 API 설계 및 DB 모델
Laravel에서는 artisan 명령어로 모델과 마이그레이션, 컨트롤러를 쉽게 생성할 수 있어요.
| 항목 | 내용 |
|---|---|
| Model | php artisan make:model Product -m |
| Migration | name, price, description, image_path 등 필드 추가 |
| API Route | Route::post('/products', [ProductController::class, 'store']); |
| Validation | FormRequest 클래스로 유효성 검사 분리 |
Vue.js로 상품 등록 폼 만들기
프론트엔드에서는 Vue Composition API 또는 Options API를 사용해 폼 컴포넌트를 만들 수 있어요. <input type="file">로 이미지도 첨부 가능하고, Axios를 통해 Laravel API로 POST 요청을 보냅니다.
- v-model로 양방향 데이터 바인딩
- FormData로 텍스트 + 이미지 파일 한번에 전송
- 성공/실패 시 사용자에게 alert 또는 snackbar 출력
이 부분은 다음 STEP에서 이미지 업로드와 유효성 검사를 다루며 더 구체적으로 예시를 보여드릴게요!
이미지 업로드 처리 (멀티파일 대응)
상품 이미지 등록은 단일 또는 다중 파일 업로드 모두 대응하는 게 좋아요. Laravel은 Storage 시스템을 제공하므로, public 디렉토리에 저장하거나 S3 연동도 쉽게 가능합니다.
Vue에서는 <input type="file" multiple>로 사용자가 여러 장을 선택할 수 있게 하고, FormData에 images[] 형식으로 파일을 append해서 서버에 전송해요.
- Vue 컴포넌트에서
ref로 파일 접근 - FormData에 텍스트 필드와 이미지 파일 함께 append
- Axios POST 요청 (headers:
multipart/form-data) - Laravel 컨트롤러에서
$request->file('images')처리 - Storage::putFile() 또는 move()로 저장 후 경로 반환
프론트 & 백엔드 유효성 검사
폼의 안정성과 사용자 편의를 위해 양쪽에서 유효성 검사가 필수입니다. 프론트(Vue)에서 기본적인 길이, 공백 검사를 먼저 하고, 백엔드(Laravel)는 FormRequest를 만들어 보다 철저한 검사를 수행합니다.
| 검사 위치 | 역할 | 예시 |
|---|---|---|
| Vue | 즉시 피드백 | 상품명 공백, 가격 숫자만 입력 |
| Laravel | 보안 & 최종 검증 | 필수 필드, max:255, image 확장자 |
검사 결과는 v-if로 메시지를 보여주거나, Laravel의 경우 422 Unprocessable Entity 에러를 Axios catch로 받아서 처리하면 UX가 부드러워집니다.
실무 팁: 예외 처리, 유지보수 구조
- 이미지 저장 실패 시
Storage::delete()로 롤백 - Laravel에서
try-catch블록 활용, 사용자에게는 친절한 에러 메시지 - 프론트에선 loading 상태, error state 구분해서 UX 명확히
- 입력 값은 컴포넌트 분리 → 유지보수성 향상
꼭 그렇진 않지만, 두 기술은 아주 궁합이 좋아요. Blade만으로도 충분히 가능하지만, Vue를 쓰면 더 동적이고 빠른 사용자 경험을 줄 수 있어요.
특히 관리자 페이지에선 Vue의 반응성이 정말 유용하죠.
Laravel에서 파일 저장 시 store() 또는 storeAs()에 UUID, 시간 기반 파일명 등을 설정하면 충돌을 피할 수 있어요.
Carbon::now()나 uniqid()도 자주 사용돼요.
네, 가능합니다. Axios가 더 편리한 인터페이스와 에러 핸들링을 제공해서 많이 쓰일 뿐, Fetch로도 동일한 요청을 구현할 수 있어요.
특히 파일 업로드 시엔 Axios가 코드가 더 깔끔하죠.
네. Vue에서는 URL.createObjectURL()로 업로드 전 파일 미리보기를 쉽게 만들 수 있어요. UX가 훨씬 좋아지죠.
특히 쇼핑몰에선 필수 UX입니다.
Laravel에서는 validation 룰에서 'max:2048' (2MB 등)처럼 설정하고, 서버 php.ini의 upload_max_filesize도 조정해야 해요.
용량 초과로 인한 에러, 꼭 미리 막아야 해요.
Laravel Sanctum이나 Passport로 API 인증을 적용하세요. 관리자 전용 상품 등록이므로 인증은 반드시 필요합니다.
API 인증은 관리자 기능에선 선택이 아니라 필수예요.
상품 등록은 쇼핑몰 관리자 기능의 핵심 중 하나입니다.
이번 글을 통해 Laravel의 강력한 백엔드 구조와 Vue.js의 유연한 프론트가 어떻게 멋지게 맞물리는지, 그리고 실전 환경에서도 적용 가능한 구조로 구현할 수 있는지 체감하셨길 바라요. 여기서 소개한 방법은 기초이자 출발점이에요.
향후에는 옵션 등록, 카테고리 연동, 이미지 리사이징, AWS S3 연동 등 실무 수준의 고급 기능으로 확장할 수 있어요. 그 내용도 이후 시리즈에서 계속 다룰 예정입니다!
궁금하신 점은 언제든 댓글로 남겨주세요.
작은 기능 하나하나를 제대로 설계하고, 결국은 ‘잘 돌아가는 커머스 시스템’을 만드는 데 도움이 되었으면 좋겠습니다.
다음 편도 기대해주세요! 🙌
'💻 쇼핑몰 자동화 & 웹 개발 가이드' 카테고리의 다른 글
| [쇼핑몰 개발] 상품 옵션 기반 재고 및 가격 관리 시스템 구축 (2) | 2025.05.22 |
|---|---|
| [쇼핑몰 개발] 상품 옵션 & 카테고리 연동 시스템 완전 정복 (3) | 2025.05.21 |
| [쇼핑몰 개발] PHP + MySQL로 구축하는 실전 쇼핑몰 설계 전략 (4) | 2025.05.19 |
| [쇼핑몰 개발] 실전 시리즈 시작! Laravel + Vue + MySQL 기반 개발 안내 (2) | 2025.05.16 |
| [쇼핑몰 개발] Laravel 입문 실습: 3시간 기초 프로젝트 만들기 (2) | 2025.05.15 |