nextJS7 [Next.js] Server Component 와 Client Component Next.js 에서 리액트 서버 컴포넌트와 클라이언트 컴포넌트를 사용할 수 있다. app 경로에서 사용하는 모든 컴포넌트는 기본적으로 서버 컴포넌트이다. 이 게시글에서 서버 컴포넌트와 클라이언트 컴포넌트를 알아보자. Serialization 이란? Serialization(직렬화) 는 서버 컴포넌트와 클라이언트 컴포넌트를 사용한다면 알고 있어야 할 중요한 주제이다. Serialization은 객체가 파일 시스템, DB 또는 메모리에 저장될 수 있도록 하기 위해 객체를 바이트스트림으로 변환하는 과정이다. 메모리나 DB, 파일시스템에 어떤 것을 저장하기 위해서는 그것을 바이트 스트림으로 유지해 놓아야 한다. 제로 번들 컴포넌트 기존에 모든 리액트 컴포넌트는 브라우저에서 다운로드 된다. 그러나 만약 해당 컴포.. 2023. 12. 7. [Next.js] Next.js 에서의 localStorage Next.js는 SSG, ISG 로 인해 client-side-rendering 하기 전 server-side-rendering 을 한다. 따라서 window, document 같은 브라우저 전역 객체를 사용할 수 없다. window 객체는 client-side 에만 존재하기 때문에 페이지가 client에 로드되고 window 객체가 정의될 때까지 localStorage에 접근할 수 없다. 해결방법 1. typeof window !== 'undefined' if (typeof window !== 'undefined') { const item = localStorage.getItem('key') } 페이지가 client 에 마운드될 때까지 기다렸다가 localStorage 에 접근한다. window 객체가.. 2023. 12. 7. [Next.js] Route System - 4) Route Groups Routes Groups 앱 폴더의 계층은 URL 경로에 직접 매핑된다. 그러나 Routes Groups를 만들어 이러한 패턴을 벗어날 수 있다. Routes Groups는 다음과 같은 용도로 사용할 수 있다. URL 구조에 영향을 주지 않고 경로를 구성한다. 레이아웃에 특정한 라우트 세그먼트를 삽입한다. 앱을 분할하여 여러개의 루트 레이아웃을 만든다. Convention 폴더 이름을 (괄호)로 묶어서 Route group을 만들 수 있다. Organize routes without affecting the URL path URL에 영향을 주지 않고 라우트를 구성하고 연관있는 라우트들을 함께 유지하기 위해서 그룹을 만듭니다. 괄호안의 폴더는 URL에서 생략됩니다. 각 그룹 내에 layout.js 파일을 .. 2023. 12. 6. [Next.js] Route System - 3) next/route useRouter useRouter() react-router-dom dml useNavigation 기능을 Next.js 에서 next/route useRouter()로 구현할 수 있다. import { useRouter } from 'next/router'; export default function Home() { const router = useRouter(); console.log(router); // ... } pathname: string: 현재 경로로 페이지 경로 이면, basePath 또는 locale 은 포함되지 않는다. query: object: 동적 라우트 매개변수를 포함하는 객체로 구문 분석된 쿼리 문자열 asPath: string: basePath또는 locale 없이 브라우저에 표시되는 경우(q.. 2023. 12. 5. 이전 1 2 다음