무엇에 쓰는 물건인고? 전역상태관리 Library 전역상태관리란 ? 리액트는 여러 component들을 조합하여 하나의 HTML을 구성하는데, 하나의 state를 다른 component와 공유하려면 props 과정을 거쳐야한다. 이 때 props는 상위 component에서 하위 component로 단방향성으로만 이동할 수 있고, 한 번에 하나의 component만 이동할 수 있다. state는 component에 할당 된 메모리; 즉 데이터라고 볼 수 있다. 최상위 component의 State를 3중중첩된 하위 component에 전달하려면 3번의 Props를 거쳐야 하고 이것이 더욱 복잡해지면 매우 비효율적인 문제가 발생하는데 이를 propsdrilling 이라고 한다. 전역상태관리는 이러한 현상을..

개요: 'form'을 쉽게 만드는데 유용한 라이브러리 사용 라이브러리 설치 npm install react-hook-form zod와 결합하여 shema에 저장해둔 유효성 검사를 불러와 Form을 만들어 랜더링부에 도입 import { useForm } from 'react-hook-form'; import { zodResolver } from '@hookform/resolvers/zod'; import * as z from 'zod'; const schema = z.object({ name: z.string().min(1, { message: 'Required' }), age: z.number().min(10), }); const ..

개요 TS를 위한 data schema 및 유효성 검사 라이브러리 BE와 FE 사이에서 데이터를 검증하고 정의하는데 사용되기도 함 TS 타입을 사용하여 데이터 구조를 정의하고, Zod schema를 통해 데이터 유효성 검사 입력값의 유효성을 확인하고 에러 메시지 제공 사용 src/validator 디렉토리에 .ts 파일생성 라이브러리 import 후에, 에러메시지 밑 데이터 유효 형식 작성import { z } from "zod"; const passwordRegex = /^(?=.[a-zA-Z])(?=.*\d)(?=.[@$!%?&])[A-Za-z\d@$!%?&]{8,}$/; const phoneRegex = /^010\d{8}$/; export const registerSchema = z.object(..

개요 링크: ui.shadcn.com 컴포넌트 라이브러로 다크모드, 캘린더, 카드, 버튼 등 다양한 UI들을 제공함 설치(Next.js 기준) 새로운 프로젝트 생성: CNA npx create next-app@latest my-app --typescript --tailwind --eslint CLI 입력 npx shadcn-ui@latest init components.json 구성을 위한 몇가지 질문들 Would you like to use TypeScript (recommended)? no / yes Which style would you like to use? › Default Which color would you like to use as base color? › Slate Where is yo..

정의 JS utility library. 코드를 간단하게 도와주는 여러 function 제공. 사용방법 https://lodash.com/ 접속 파일 다운로드 html 파일 head에 script src="loadash.js">

장점 : HTML 환경에서 JS 코드보다 더 간결하고 편리하게 프로그래밍이 가능 공식 사이트: https://jquery.com/ Library 삽입 사용방법 script tag에 $('#id').함수() body tag에 tag id="id" 내용 /tag 몇가지 예시 $(selector).text() : selector에 text 반환, 간단한 내용 출력에 유용 $(selector).append() : selector에 element 반환. 반복문과 결합하여 array, list 등 출력에 유용 $(selector).empty() : selector 내용 리셋 $(selector).click() : selector 클릭 이벤트 바인딩 $(selector).fadeIn() : selector fadeI..