| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 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 |
- 코코아톡 클론코딩
- canvas image
- cookie 보안
- tailwindcss
- react
- 프록시 아키텍처
- 코딩일기
- 노마드코더
- 바닐라 JS로 그림판 만들기
- 노마드 코더
- typescript
- canvas js
- next.js
- CSS
- BFF아키텍처
- javascript
- 바닐라 JS로 크롬 앱 만들기
- JS
- BFF 아키텍처
- cookie 라이브러리
- 생활코딩
- HTML
- canvas
- clone coding
- JAVA Script
- jest
- 프론트엔드
- 코딩독학
- HttpOnly Cookie
- HttyOnly Cookie
- 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 기반으로 모든 필드 값을 상태로 관리하고, 각 필드가 변경될 때마다 폼 전체가 리렌더링되는 비효율적인 구조를 가지고 있어 ..