React Portal을 사용한 Modal 컴포넌트 생성React Portal을 사용해 모달을 띄워보자우선 루트 레이아웃에 모달을 넣을 div를 넣어놓았다. (id="modal-root")export default function RootLayout({ children,}: Readonly) { return ( {children} );} 그리고 Portal이라는 컴포넌트를 따로 만들어서 모달을 children으로 받고, 이 모달을 위에 넣어놓은 id modal-root의 div로 이동시킨다.'use client';import { PropsWithChildren, useEffect, useState } from 'react';import ..
Layout shift 현상 발생 프로젝트에서 BottomNavigation을 구현하고 확인하던 중 새로고침이 될 때마다 글씨가 조금씩 움직이는 걸 확인했다. 자세히보면 기본 폰트에서 커스텀(로컬) 폰트로 빠르게 바뀌는 것을 볼 수 있다. 지난 포스팅에서 설명했던 폰트 최적화가 필요했던 이유를 내 눈으로 직접 확인할 수 있었던 시간이다! 2024.04.19 - [Next.js] - [Next.js] Learn - Ch3. 폰트와 이미지 최적화 (next/font, next/image) 구글 폰트 적용만 설명했었지만 이번엔 로컬 폰트 적용하는 방법을 기록하고자 한다. 로컬 폰트 적용하기 next/font/local에서 localFont를 import해서 사용한다. import localFont from '..
이 글은 Next.js 공식문서 Learn Next.js를 읽고 정리한 글입니다. 폰트를 최적화하는 이유 프로젝트에서 폰트 파일을 가져와서 로드하는 과정이 필요한 경우 이러한 커스텀 폰트는 성능에 영향을 줄 수 있다. 폰트를 사용하면 브라우저가 처음으로 fallback이나 기본 시스템 폰트를 렌더링하는데, 커스텀 폰트가 로드된 후 폰트가 바뀔 때 레이아웃 변경이 일어난다. 이때 텍스트 크기, 간격, 또는 레이아웃이 변경되고 그 주변 요소들이 이동할 수 있다. 그래서 Next.js는 next/font 모듈을 제공해서 자동으로 폰트를 최적화한다. 이 모듈은 빌드할 때 폰트 파일을 다운로드하고 다른 정적 asset들과 함께 호스팅한다. 이것은 사용자가 애플리케이션에 방문할 때 성능에 영향을 미치는 추가적인 네..
