설치 Composable commerce를 실현하는 가장 핵심적인 패키지. 두 가지 패키지 설치 $ pnpm add tailwind-merge clsx 사용 src/lib/utils.ts 폴더와 파일을 생성 (이 경로를 추천 - Next.js 공식 github) 다음 코드를 입력 import { type ClassValue, clsx } from "clsx" import { twMerge } from "tailwind-merge" export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)) } 다른 component에서 사용시 import import { cn } from "@/lib/utils"; 더 자세한 사용법은 03. 퍼블 ..

REST API로 json을 받아 유효성 검사하는 필수 패키지. 설치 Zod는 runtime dependency로 사용하므로 --save-dev가 아닌 바로 install pnpm add zod 사용 import { z } from 'zod'; const productJson = { name: 'jeans', price: 100, }; const productSchema = z.object({ name: z.string(), price: z.number().positive(), // 양수 음수도 구별 가능 }); //type Product = z.infer; const Test1 = () => { const validateProduct = productSchema.safeParse(productJson)..

1. Componentization 가장 중요함: 코딩 후에 refactor도 필요하지만, 우선 처음부터 component화 시키는 것이 중요. 가독성과 코드 재사용을 위해서 반드시 component화 필요. Composable commerce의 필수 요건. 예시 : layout.tsx const Layout = ({ children }) => ( Header content ... ... {children} Footer content ... ... ); export default Layout; 이 파일 하나에 수 천 line 코딩하지 말고, Header와 Footer를 src/components/ 에 코딩 후 import import Header from '@/components/header'; impo..