TrendRoom

React

React-Hook-Form와 Zod를 활용한 스키마 유효성 검사

1. React Hook Form폼 관리와 데이터 수집을 용이하게 해주는 라이브러리복잡한 상태 관리 없이 폼 상태(필드값, 에러, 제출 상태 등)를 쉽게 추적하고 제어할 수 있다.기본적으로 비제어 컴포넌트 방식으로 불필요한 리렌더링을 최소화하고, 필요한 경우에만 업데이트를 수행하여 애플리케이션 성능을 유지한다.설치npm install react-hook-form2. ZodTypeScript-first 스키마 선언 및 유효성 검사 라이브러리TypeScript와 함께 사용할 수 있도록 설계되어 데이터 구조의 정적 타입스크립트 타입을 자동으로 추론할 수 있다.타입과 유효성 규칙을 하나의 객체로 통합하여 유지보수성을 높이고 코드의 가독성을 향상시킨다.npm install zodornpm install zod@c..

기타

JSON Server와 LowDB, JSON Server Auth로 가상의 백엔드 서버 구현

1. JSON Server 가짜 REST API를 생성하는 데 사용되는 도구로 이를 통해 간단한 JSON 파일을 사용하여 가상의 백엔드 서버를 구현할 수 있다. 설치 최신 버전에서 지원하지 않는 기능이 있어 아래의 버전으로 설치했다. npm install json-server@^0.17.3 2. LowDB Node.js 기반의 간단한 JSON 데이터베이스로, JSON 파일에 데이터를 저장하고 쿼리를 수행할 수 있다. 즉, 파일 기반의 데이터베이스를 생성하고 관리하는 도구이다. 설치 버전 1를 제외하고 모두 ESM 모듈 시스템을 사용하고 있어 CommonJS 모듈 시스템에서 사용할 수 있는 버전 1을 설치했다. (추후 sqlite로 마이그레이션 할 예정이다.) npm install lowdb@1 3. 가상..

Next.js

Next.js 14 프로젝트 초기 설정

1. Next.jsNext.js는 Node 버전 18.17 이상을 요구한다.자동 설치 시 설치 방법이 굉장히 간단하다.npx create-next-app@latest // 설치npm run dev // 개발 서버 실행2. ESLint일관성 있는 방식으로 구현할 수 있도록 해준다.코딩 컨벤션에 위배되는 코드나 안티 패턴을 자동 검출하는 도구에디터에 적용해서 사용하는 것으로 eslint Extension과 eslint 라이브러리를 모두 설치해줘야 된다.프로젝트에 적용Next.js는 바로 사용할 수 있는 통합 ESLint 환경을 제공, 현재로서는 딱히 건들게 없어보인다.3. Prettier줄 바꿈, 공백, 들여 쓰기 등 텍스트를 일관되게 작성할 수 있게 해준다.개발자가 작성한 코드를 정해진 코딩 스타일에 맞게..

산본개발자
'TrendRoom' 태그의 글 목록