local icons checkbox에 사용할 icon을 src/assets/icons/ 폴더에 저장 (폴더 이름은 자유) config tailwind.config.js에 다음 코드를 추가 theme: { extend: { backgroundImage: { 'icon-checkbox': "url('~/src/assets/icons/ico_checkbox.svg')", 'icon-checkbox-on': "url('~/src/assets/icons/ico_checkbox_on.svg')", 'icon-checkbox-dis': "url('~/src/assets/icons/ico_checkbox_dis.svg')", }, 이제 아이콘 이미지를 custom utility class로 사용할 수 있다. css ..

설치 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..

Data fetching 이란? Data fetching이란 API등을 이용하여 데이터를 가져오는 과정을 의미하며, 대표적으로 자바스크립트에서 네이티브로 제공해주는XMLHttpRequest, Fetch API 그리고 jQuery의 AJAX, Axios 통신 라이브러리를 이용하여 처리 합니다. Next JS 13 이전 버전에서는 getStaticProps이나 getServerSideProps라는 메소드 또는 Component 로직내에서 사용자 행위로 일어나는 이벤트 동작 내에서 data fetching을 사용하였습니다. 하지만 Next 13 부터는 Server Component 및 Client Component라는 구분이 생겨났고, 이로 인하여 data fetching에도 영향을 주었는데 기존에는 Axio..

Local font files src/app/assets/fonts 폴더를 생성하고 local font 파일을 복사한다. ( public/assets/fonts 폴더를 생성하여도 무관 ) font.ts src/app/assets/ 폴더에 font.ts 파일 생성 다음 코드 입력 import localFont from 'next/font/local'; export const familyMont = localFont({ src: [ { path: './fonts/Montserrat-Bold.woff2', weight: '700', style: 'bold', }, { path: './fonts/Montserrat-Medium.woff2', weight: '500', style: 'medium', }, { pa..