인사말이 프로젝트를 진행하며 정말 많은 자료들을 검색해보았다. 절반 이상을 아는 상태에서 GPT는 유능한 비서이지만, 절반 이상을 모르는 상태에서 GPT는 바보가 된다. 나의 요구사항이 틀린 방향임에도 자의적으로 해석하여 더 틀린방향의 솔루션을 제시하기에....적어도 내가 프로젝트 때 사용한 기능들에 대해서는 공식문서나 GPT StackOverFlow 등을 넘나들며 버전을 확인하는 등의 고생을 하지 않도록 최대한 상세하게 포스팅해보려고한다. 요약: ZRM에 있어서는 GPT 보다 더 빠른 솔루션을 제공하는 포스팅이 될거임추가로 언제든지 블로그 및 깃헙 등에 댓글로 질문 혹은 더 나은 의견 제시를 해주시면 매우 감사한 마음으로 답변드리도록 하겠습니다. 오가는 답변속에 인연이 자라나 함께 일하는 동료가 될수도..

개요: 'form'을 쉽게 만드는데 유용한 라이브러리 사용 라이브러리 설치 npm install react-hook-form zod와 결합하여 shema에 저장해둔 유효성 검사를 불러와 Form을 만들어 랜더링부에 도입 import { useForm } from 'react-hook-form'; import { zodResolver } from '@hookform/resolvers/zod'; import * as z from 'zod'; const schema = z.object({ name: z.string().min(1, { message: 'Required' }), age: z.number().min(10), }); const ..

개요 TS를 위한 data schema 및 유효성 검사 라이브러리 BE와 FE 사이에서 데이터를 검증하고 정의하는데 사용되기도 함 TS 타입을 사용하여 데이터 구조를 정의하고, Zod schema를 통해 데이터 유효성 검사 입력값의 유효성을 확인하고 에러 메시지 제공 사용 src/validator 디렉토리에 .ts 파일생성 라이브러리 import 후에, 에러메시지 밑 데이터 유효 형식 작성import { z } from "zod"; const passwordRegex = /^(?=.[a-zA-Z])(?=.*\d)(?=.[@$!%?&])[A-Za-z\d@$!%?&]{8,}$/; const phoneRegex = /^010\d{8}$/; export const registerSchema = z.object(..

답안코드: https://github.com/DevCamp-TeamSparta/frontend-material?tab=readme-ov-file 폴더 구성 📦src ┣ 📂components ┃ ┣ 📂ui ┃ ┃ ┣ 📜button.tsx ┃ ┃ ┣ 📜card.tsx ┃ ┃ ┣ 📜dropdown-menu.tsx ┃ ┃ ┣ 📜form.tsx ┃ ┃ ┣ 📜input.tsx ┃ ┃ ┣ 📜label.tsx ┃ ┃ ┣ 📜select.tsx ┃ ┃ ┣ 📜switch.tsx ┃ ┃ ┣ 📜toast.tsx ┃ ┃ ┣ 📜toaster.tsx ┃ ┃ ┗ 📜use-toast.ts ┃ ┣ 📜mode-toggle.tsx ┃ ┗ 📜theme-provider.tsx ┣ 📂lib ┃ ┗ 📜utils.ts ┣ 📂pages ┃ ┣ 📂api..

회원가입 서비스를 구현하며 몇몇 라이브러리 적용해보기 구현 해볼 회원가입 서비스 링크: https://example.sparta-devcamp.com/ 적용해 볼 라이브러리 shadcn/ui Zod React Hook Form 주요기능 정보입력(이름, 메일, 연락처) 역할선택(드롭다운) 다음 단계/이전 단계 이동 PW,PW확인 계정 등록하기 누를 시 입력한 정보 나타내기 유효성확인 다크모드 개발 정보 기간: 24.03.04 ~ 24.03.04 스택: next.js, vercel repository: https://github.com/TerryEHLee/signin Link: https://signin-practice-v0-lbu33ijlx-savers-iceclimbers.vercel.app/