Google Fonts 적용법   적용방법1. 사이트 접속https://fonts.google.com/ Browse Fonts - Google FontsMaking the web more beautiful, fast, and open through great typographyfonts.google.com 2. 원하는 폰트 검색 (저는 Jua 폰트로 하겠습니다!) 3. Get font 클릭 (오른쪽 위) 4. Get embed code 클릭 5. 코드 복사 후 붙여넣기1) 원래 index.html 코드처음 화면 2) 복붙! font-family에 "Jua" 추가!! 적용 완료!!

useResFetchCount - 스크린 사이즈에 맞춰서 데이터를 다르게 불러와야해서 작성한 코드입니다 프로젝트 하면서 작성한 코드 기록하는 게시물입니다.사용법const fetchSize = useResFetchCount({ mobileSize: 4, tabletSize: 9, desktopSize: 8 });import { useEffect, useState } from 'react';interface FetchSizeOptions { desktopSize: number; mobileSize: number; tabletSize: number;}const useResFetchCount = ({ mobileSize, tabletSize, desktopSize }: FetchSizeOptions) =>..

usePagination - 페이지네이션을 만들 때 작성한 코드 프로젝트 하면서 작성한 코드를 기록하는 게시물입니다! import type { Dispatch, SetStateAction } from 'react';import { useMemo } from 'react';interface UsePaginationReturn { currentPage: number; goToNextSet: () => void; goToPage: (page: number) => void; goToPreviousSet: () => void; pageNumbers: number[];}const usePagination = (totalPages: number, currentPage: number, setCurrentPag..

Modal 컴포넌트 - 간단하게 모달 컴포넌트 만들 때 작성한 코드 프로젝트 하면서 만든 코드를 기록하기 위한 게시글 입니다. 간편하게 커스텀 할 수 있도록 제작 하였습니다! 'use client';import { type ReactNode } from 'react';import ReactDOM from 'react-dom';import { useModal } from '@/_hooks/useModal';export type ModalProps = { children: ReactNode; isOpen: boolean; onClose: () => void; size?: string;};/** * 사용법 * ex) * const { isOpen, openModal, closeModal } = useM..

Client와 Server Component   Client Component- 클라이언트 컴포넌트 는, 버튼 또는 검색창과 같이 사용자와 상호작용하는 작은 UI 들을 클라이언트 단에서 렌더링되는 컴포넌트를 뜻합니다. (Client component는 어플리케이션에 client측 interactivity를 추가할 수 있게 합니다.)- Client component로 사용하고 싶다면 use client 선언문을 통해 변경할 수 있다.-  Next.js에선 이 컴포넌트들은 먼저 서버에서 pre-render 된 후 클라이언트에서 hydrate(JS가 실행되면서 interactive하게 됨)됩니다. 특징- interactivity, event listener(onClick 등)가 필요할때 - state 및 라이..

페이지네이션 방법론 차이(Offset vs Cursor) Offest Pagination보통 기본적으로 사용하는 페이지네이션이 Offset기반 페이지네이션 입니다. 사진 보니까 익순하시지 않나요? 각각의 request에 클라이언트는 page_size(offset)와 page_number(limit)를 payload에 실어서 전달합니다.- Page Size는 반환할 데이터의 개수를 나타냅니다.- Page Number는 현재 요청중인 페이지를 나타냅니다. 장점- 총 데이터개수와 Page크기를 알 수 있다.이는 사용자가 원하는 페이지를 선택하고 바로 그 페이지의 데이터를 볼 수 있다는 것을 의미합니다. 단점- 데이터가 불일치 할 수 있습니다.만약 사용자가 어떤 게시물의 1페이지부터 +1 씩 증가하면서 다음 페..

React Hook Form 공부 - 18 유효성 검증(Validation)의 심화 방식우리가 React-Hook-Form을 쓰는 이유는 클라이언트 상에서 유효성 검증을 쉽게 하기 위해서 인데요. 그래서 React-Hook-Form은 유효성 검증에서 다음과 같은 3가지의 심화된 방식도 제공합니다. 첫 번째, 비동기식 유효성 검증입니다. 간혹 커스텀 Validation할 때 외부 사이트에서 정보를 가져와서 비교할 때가 있는데요. 비동기식(async,await) 방식도 지원합니다. 이메일 부분에 지난 시간에 만든 커스텀 Validation이 2개가 있었는데요. 한 개를 추가해 보겠습니다. 이 Validation은 비동기식으로 통신해서 얻은 결과를 비교하게 됩니다. 코드의 간결성을 위해 username과 em..

React Hook Form 공부 - 17 폼 Submission 상태 값과 reset 함수React-Hook-Form의 formState에는 폼 Submission 상태 값이 4개가 있는데요.isSubmitting,isSubmitted,isSubmitSuccessful,submitCount isSubmitting 상태는 submit 버튼을 눌렀을 때고, isSubmitted 상태는 submit이 눌러져서 벌써 액션이 취해졌을 때입니다. isSubmitSuccessful은 submit이 성공적으로 작동했을 때를 나타내고,submitCount는 성공적인 submit의 갯수를 나타냅니다. 사용 방법은 formState에서 가져오면 됩니다.const { register, control, han..

React Hook Form 공부 - 16 폼 Submit disabled 시키기폼의 Submit 버튼을 조건에 따라 disabled 시키는 방법입니다. 필요한 함수는 isDirty 값과 isValid 값인데요. isDirty- isDirty는 폼이 한 번이라도 수정되었는지 여부를 나타내는 속성- 폼의 초기 상태와 비교하여 한 번이라도 변경이 발생하면 true를 반환하고, 변경이 없다면 false를 반환합니다.- 이 속성은 사용자가 입력을 시작했는지, 아니면 여전히 폼이 초기 상태인지 확인하는 데 유용합니다.isValid- isValid는 폼이 유효한지 여부를 나타내는 속성- 모든 필드가 유효성 검사를 통과하면 true를 반환하고, 그렇지 않으면 false를 반환합니다.- 예를 들어, 특정 필드가 필수라..