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들과 함께 호스팅한다. 이것은 사용자가 애플리케이션에 방문할 때 성능에 영향을 미치는 추가적인 네..
만약 백엔드에서 데이터를 가져오려면 일반적으로 useEffect 훅을 사용해 컴포넌트가 처음 렌더링될 때 데이터를 가져온다. const [loadedMeetups, setLoadedMeetups] = useState([]); useEffect(() => { // http요청 보내는 작업... setLoadedMeetups(받아온 데이터); }, []); return ; 중요한 것은 useEffect는 컴포넌트 함수가 실행된 후에 실행된다. 즉, 컴포넌트가 렌더링 된 이후에 실행된다. 처음 컴포넌트가 렌더링 될 때 loadedMeetups는 비어있는 배열이고, useEffect가 실행된 후에 컴포넌트가 재평가되어 실제 데이터로 다시 렌더링한다. 페이지 소스를 보면 태그 안에 백엔드에서 가져온 데이터의 목록..
Nextjs는 코드 내 라우트 정의를 없애고 파일과 폴더를 이용해서 페이지와 라우트를 정의한다고 했다. 그것을 바로 Nextjs 프로젝트의 pages 폴더안에서 할 수 있다. pages 폴더안에 index.js 파일은 루트 페이지이다. domain.com/ 처럼 /까치만 있는 요청이 들어오면 index.js를 읽어 들인다. index말고 다른 파일 이름은 경로 이름으로 사용된다. 바로 파일명.js 파일은 domain.com/파일명 의 경로를 설정할 수 있는 것이다. 중첩 라우팅과 동적 라우팅 중첩 라우팅을 위해서는 pages폴더 안에 하위 폴더를 만들면 된다. 하위 폴더 내에서 index.js를 사용하면 도메인.com/폴더명 에서 index.js 파일을 불러올 수 있다. 즉, pages 폴더 안에 만든 ..
getStaticProps - Static Generation으로 빌드할 때 데이터를 불러온다. getStaticPaths - Static Generation으로 데이터에 기반하여 pre-render 시 특정한 동적 라우팅 구현 (pages/post/[id].js) getServerSideProps - Server Side Rendering으로 요청이 있을 때 데이터를 불러온다. getStaticProps getStaticProps 함수를 async로 export하면 getStaticProps에서 리턴되는 props를 가지고 페이지를 pre-render한다. (빌드 타임에 페이지 렌더링) function Blog({posts}) { return ( {posts.map((post) => ( {post.ti..
Next.js란? 리액트의 풀스택 프레임워크 프레임워크라고 하는 이유는 규모가 있는 리액트 앱을 구축할 때 흔히 발생하는 문제를 해결하기 위해 여러 외부 라이브러리를 추가할 필요가 없기 때문이고, 리액트 프레임워크라는 것은 Nextjs는 리액트를 기반으로 하고 리액트 기능을 강화하기 때문이다. Server Side Rendering(SSR) - 클라이언트 대신 서버에서 페이지를 준비하는 원리 - 리액트에서는 CSR을 하기 때문에 서버에 영향을 미치지 않고, 서버에서 클라이언트로 응답해서 보낸 html도 거의 비어있다. - 이 방식은 서버에서 데이터를 가져올 때 지연 시간 발생으로 UX 측면에서 좋지 않다. - 검색 엔진에 검색 시 웹크롤링이 동작할 때 내용을 제대로 가져와 읽을 수 없기에 검색엔진 최적화..
