Product Upload

Product Upload

변경파일

• app/(tabs)/products/page.tsx
• app/products/add/page.tsx
• components/product-list.tsx

Form Action

변경파일

• app/products/add/actions.ts
• app/products/add/page.tsx

URL.createObjectURL(file); : URL을 생성

Product Upload

변경파일

• app/products/add/actions.ts
• app/products/add/page.tsx

Images Setup

AWS S3 vs. Cloudflare

AWS S3 : 그냥 URL만 줌
Cloudflare : 이미지에 최적화. 이미지를 변형할 수 있음(ex: 이미지를 50% 품질로 요청하는 등)
Cloudflare Images 사용하는 경우

• token을 생성하고 복사해서 .env에 넣기
• 결제 후 Cloudflare Account ID, Account Hash복사해서 .env에 넣기

Upload URLs

변경파일

• app/products/add/actions.ts
• app/products/add/page.tsx
• .env

Image Upload

변경파일

• app/products/[id]/page.tsx
• app/products/add/page.tsx
• components/list-product.tsx
• next.config.mjs

Variants

변경파일

• app/products/[id]/page.tsx
• components/list-product.tsx

RHF Refactor

React Hook Form : 예전에는 모두가 기본으로 썼으나 Next.js 최신 버전으로 넘어가면서 필수가 아닌 선택지로 바뀜. 강의에서는 이미 사용하고 있고 함께 사용하는 방법을 알려주기 위해 사용
npm i react-hook-form
npm i @hookform/resolvers : Zod schema를 사용해서 form을 validation할 수 있게 해줌
변경파일

• app/products/add/actions.ts
• app/products/add/page.tsx
• app/products/add/schema.ts

Recap

변경파일

• app/products/add/page.tsx
• components/input.tsx
• react hook-form은 ref(reference)를 사용함 => forwardRef() 사용