next/font 적용방법 1. @next/font Next.js 에서는 @next/font란 라이브러리를 설치하여 구글 폰트를 자유롭게 사용할 수 있습니다npm i @next/fontyarn add @next/font import { Jua } from "@next/font/google";const jua = Jua({ subsets: ["latin"], weight: ["400"] });export default function RootLayout({ children,}: { children: React.ReactNode;}) { return ( {children} );} 라이브러리에서 google font에 등록된 폰트를 가져와서 보여주는것이 ..

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

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 씩 증가하면서 다음 페..