ZRM(0): 프로젝트 개요

인사말

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

목적

약 30개의 항목을 포함하는 제출양식 기능구현

---

핵심 라이브러리 및 개발환경

• zod
• react-hook-form
• mui
• react-imask
• react-vite
• ts

---

선정이유

1. zod

• 역할: react-hook-form의 resolver로 사용됨
• 편의성
• 유효성 검사 규칙 및 에러메세지를 따로 관리 할 수 있어 해당 값들 유지/보수에 뛰어남(검사해야 할 항목이 30개 단위가 되면 정말 필수)
  • Schema를 만들어 resolver에 적용시켜 주는데, 이 때 type을 자동으로 추론하여 설정해주기에 편리함
  • major한 라이브러리라 정보를 찾기 수월함(yup, joi등의 라이브러리와 직접적인 비교는 못해봄;;)

2. react-hook-form

• 역할: useForm() hook으로 form을 만들어 해당 태그 안에 있는 항목들의 유효성을 검사하고, 유효성에 적합하지 않을 경우 에러메시지 등을 표시함
• 편의성
• useState, onChange 등의 함수를 사용하지 않아도됨 !!! (대박....)
  • 자동으로 최적화를 시켜주어 서비스 성능향상 !!!
  • mui, zod 등과 굉장히 찰떡 호환성 지원(이거 생각보다 중요하고 상상 이상으로 편해요)

3. mui: 내가 아는 선에서 UI 라이브러리 현존 최강 (최강이 아니더라도 부족함 없는 탑클래스)
4. vite: 혹시 아직 모르시는분 무조건 쓰세요, 실행속도 어마어마하게 빨라집니다

---

refe: https://zod.dev/
https://react-hook-form.com/
https://mui.com/
https://ko.vitejs.dev/guide/