| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | ||||
| 4 | 5 | 6 | 7 | 8 | 9 | 10 |
| 11 | 12 | 13 | 14 | 15 | 16 | 17 |
| 18 | 19 | 20 | 21 | 22 | 23 | 24 |
| 25 | 26 | 27 | 28 | 29 | 30 | 31 |
- HTML 파일구조
- next.js
- tanstack-query
- canvas js
- 생활코딩
- CSS
- 웹 브라우저 렌더링
- 코딩독학
- tailwindcss
- queryprovider
- axios-mock-adapte
- javascript
- 바닐라 JS로 크롬 앱 만들기
- react
- 프론트엔드
- JAVA Script
- negative margin
- 코딩일기
- jest
- JS
- HTML
- canvas image
- 코코아톡 클론코딩
- 웹 브라우저 구조
- typescript
- canvas
- 노마드코더
- 바닐라 JS로 그림판 만들기
- clone coding
- 노마드 코더
- Today
- Total
목록react (2)
Coding Archive
[next.js & jest] Jest 설치 및 구성 가이드: Next.js + TypeScript 환경에서의 Jest 사용법
Jest 설치 및 구성 가이드: Next.js + TypeScript 환경에서의 Jest 사용법 이번에는 Next.js와 TypeScript 프로젝트에서 Jest를 설치하고 구성하는 방법을 단계별로 설명합니다. Jest는 자바스크립트 테스트 프레임워크로, 테스트 코드 작성과 테스트 실행을 빠르고 쉽게 할 수 있도록 도와줍니다. 1. Jest 설치Step 1: Jest 패키지 설치먼저, Jest와 TypeScript 환경에서 Jest를 사용할 수 있도록 필요한 패키지를 설치해야 합니다.yarn add jest ts-jest jest-environment-jsdom @types/jest @testing-library/react @testing-library/jest-dom @testing-library/do..
[React Hook Form] Next.js 프로젝트에 React Hook Form 적용기
1. React Hook Form이란?react-hook-form은 간단하고 효율적인 방식으로 폼 유효성 검사와 상태 관리를 처리할 수 있게 도와주는 React 기반의 폼 관리 라이브러리입니다.1.1 프로젝트에서 React Hook Form을 도입한 이유react-hook-form을 프로젝트에 도입한 가장 큰 이유는 '성능'과 '코드의 간결함' 때문입니다. React에서 폼을 처리하는 방식은 대부분 useState로 각 필드의 상태를 관리하는데, 이는 복잡한 폼일수록 코드가 길어지고 상태 변화마다 리렌더링이 발생하여 성능 저하로 이어질 수 있습니다. 이전 프로젝트에서 useState 기반으로 모든 필드 값을 상태로 관리하고, 각 필드가 변경될 때마다 폼 전체가 리렌더링되는 비효율적인 구조를 가지고 있어 ..