상품 업로드

Shop App을 위한 소스 코드 추가하기

페이지 생성 및  라우트 작성

백엔드 모델 추가

 

 

상위 Nabar에 다른 라우트들 추가

상품 업로드 페이지 UI 생성하기

상품 업로드 페이지 기능 생성하기

1. stae 생성

 

2. 핸들러 함수 생성

 

 

 

3. upload route 생성

 

 

 

 

업로드하니 데이터베이스에 잘 들어간다 !

 

 

 

파일 업로드 컴포넌트 생성하기

npm install react-dropzone  // 이미지 업로드 편하게 한다.

컴퓨터 파일을 업로드 할수 있고 드래그 앤 드롭기능 가능

 

fileuplad 컴포넌트를 upload 페이지에 추가

file 업로드 컴포넌트 UI

백엔드로 보내기 위한 handle 함수 

 

 

 

 

Multer를 이용해서 파일 업로드하기

npm install multer

백엔드 product upload 라우터 및 multer 설정작성

 

 

 

 

상품 등록하면 데이터베이스에도 잘 저장됨을 확인 !