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..

git stash 사용 방법 알아보기    stash란?작업중에 갑작스럽게 다른 작업을 진행해야 할 때, 작업중인 사항을 잠시 치워두는 방법입니다!stash를 사용해서 잠시 코드를 다른곳에 보관한 후에, 내가 원하는 branch에 적용할 수 있습니다! git stash로 변화 다른곳에 담기git stashgit stash를 통해서 현재 적용된 commit이후로 변경된 모든 사항들이 stash 공간으로 이동됩니다! 사용 방법1. git add .2. git commit -m "커밋 메세지"3. git stash stash한 변경사항 다시 적용하기git stash pop 메시지와 함께 스태시 적용하기git stash -m "스태시 메세지"어떤 이유로 스태시 했는지 남기고 싶을 때 스태시 목록 보기git st..

git push시 발생하는 Git: RPC failed; HTTP 400 curl 22 The requested   상황프로젝트 중 여느때와 같이 git push를 했는데 이러한 오류가 나왔다 원인git은 전송 가능한 버터 최대 사이즈를 1MiB로 두고 있는데 내가 크기가 큰 gif 사진을 push하려고 해서 발생한 것 같다 해결방법git config http.postbuffer 524288000 이런 식으로 HTTP로 전송 가능한 바이트를 500MB로 늘리는 방법이있다. 하지만, 해결이 안되는 경우도 있다 필자는 위 방법으로 성공왜냐하면 git은 파일의 최대 전송 크기를 100MB을 기본값으로 하기 때문에, git LFS(Large File System) 설정이 필요하다. 참고https://stacko..

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..