filter VS backdrop-filter 블러 효과    1. filter https://developer.mozilla.org/ko/docs/Web/CSS/filter filter - CSS: Cascading Style Sheets | MDNCSS filter 속성은 흐림 효과나 색상 변형 등 그래픽 효과를 요소에 적용합니다. 보통 필터는 이미지, 배경, 테두리 렌더링을 조정하는 데 쓰입니다.developer.mozilla.org filter는 하위요소 전체에 블러 처리를 할 수 있습니다. EX_)  주의!filter- filter 사용시 하위요소까지 효과가 적용되어 헤맸던 적이 있는데 별개의 형제요소를 새로 만들어 백그라운드를 주고 효과를 적용해서 해결했었다.- filter를 사용하니 하얀색 ..

dvh, svh, lvh (모바일 주소 표시줄 영역) 이란?    프로젝트를 하면서 팀원 중 한분의 코드에서 dvh라는 속성을 처음보고 포스팅 하게 되었습니다! 모바일 주소 표시줄 영역에 의해서 100vh로 높이 값을 설정했다고 하더라도 화면이 짤리는 경우가 발생합니다. 해결방법으로div {height:100vh; height:-webkit-fill-available;}위와 같이 -webkit-fill-available 값을 height값에 적용하는 방법이 있는데 이 방법은 ios에서만 적용이 되고 안드로이드에서는 적용이 안되는 문제가 있기 때문에 권장하진 않습니다. 1. svh (short viewport height)svh는 사용자 화면 기준으로 가장 짧은 뷰포트 값을 가져옵니다. 주소 표시줄이 없어..

height VS min-height 1. heightheight: 500px을 적용한 경우 div 태그 내의 컨텐츠가 500px을 넘어가면 밖으로 삐져 나온다  2. min-heightmin-height: 500px을 하게되면 500px의 높이는 유지한채 컨텐츠가 늘어날수록 컨텐츠의 높이가 늘어납니다

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

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 및 라이..