프로그래밍
-
[React] react-hook-form (Basic)프로그래밍/React 2023. 12. 8. 11:17
개요 react-hook-form을 도입하계 된 계기 react-hook-form 마무리 제어 컴포넌트에서 벗어나 비제어 컴포넌트 방식으로 form을 관리한다? react-hook-form 도입 라이브러리 없이 제어 컴포넌트로 form을 다루자) React에서 제어컴포넌트란 React를 통해서 제어하게 되는 컴포넌트이다. 간단하게 이름과 아이디, 비밀번호, 전화번호, 이메일을 받는 form을 만들 때 state를 통해서 값을 관리할 것이다. 제어컴포넌트로 form을 다룰 시에 나올 수 있는 모습이다 더보기 import React, { useState } from "react"; import InputText from "../component/InputText"; import { Label, Row } f..
-
[Next.js] Jest + Typescript + Next.js프로그래밍/Next.js 2023. 12. 7. 11:37
개요 설치 및 적용 Get Started install) pnpm create next-app add dependencies) pnpm add -D @testing-library/jest-dom @testing-library/react @testing-library/user-event jest jest-environment-jsdom ts-jest script) // package.json "scripts": { ... "test": "jest", "test:watch": "jest --watchAll" }, jset config) // jest.config.js const nextJest = require('next/jest') const createJestConfig = nextJest({ dir: ..
-
[React] 새로운 리액트 문서에서 제시하는 9가지 권장 사항프로그래밍/React 2023. 12. 6. 11:26
출처: https://blog.testdouble.com/posts/2023-10-16-react-docs-recommendations/ 개요 9가지 권장사항 권장사항 반복문에 key에 index 넣지마라 컴포넌트 정의할 때 중첩으로 사용하지마라 state 남발하지마라 꼭 필요한 상황에서 최소한으로 사용해라 useMemo, useCallback, React.memo 남발하지마라 "use" 접두사 사용하는 것을 남발하지마라 useEffect 를 올바르게 사용하자 프로퍼티 변경에 따라 상태를 조정해야한다면 사용하지마라 데이터 페칭은 useEffect보다 라이브러리가 낫다 이벤트 발생에 대한 응답으로 어떠한 액션을 취한다면 useEffect를 사용하지말고 핸들러에 코드를 작성해라 useEffect 종속성을 생..
-
[Next.js] 패키지 가져오기 최적화프로그래밍/Next.js 2023. 12. 5. 08:40
개요 배럴(barrel) 파일의 활용 modularizeImports optimizePackageImport Next.js(3.5) 업데이트 내용 (원본) 22% 더 빠른 로컬 서버 시작: 앱 및 페이지 라우터로 더 빠르게 반복 29% 더 빠른 HMR(Fast Refresh): 변경 사항을 저장할 때 더 빠른 반복을 위해 40% 적은 메모리 사용량: 실행 시 측정next start 최적화된 패키지 가져오기: 인기 있는 아이콘 및 구성 요소 라이브러리를 사용할 때 더 빠른 업데이트 next/image개선 사항: , 아트 디렉션 및 다크 모드 지원 그리고 438개 이상의 버그가 패치 배럴(barrel) 파일의 활용 자바스크립트에서 배럴 파일이란 단일 파일에서 여러 모듈을 그룹화하여 내보내는 방법 예시) ui..