전체 글129 [Next.js] Server Component 와 Client Component Next.js 에서 리액트 서버 컴포넌트와 클라이언트 컴포넌트를 사용할 수 있다. app 경로에서 사용하는 모든 컴포넌트는 기본적으로 서버 컴포넌트이다. 이 게시글에서 서버 컴포넌트와 클라이언트 컴포넌트를 알아보자. Serialization 이란? Serialization(직렬화) 는 서버 컴포넌트와 클라이언트 컴포넌트를 사용한다면 알고 있어야 할 중요한 주제이다. Serialization은 객체가 파일 시스템, DB 또는 메모리에 저장될 수 있도록 하기 위해 객체를 바이트스트림으로 변환하는 과정이다. 메모리나 DB, 파일시스템에 어떤 것을 저장하기 위해서는 그것을 바이트 스트림으로 유지해 놓아야 한다. 제로 번들 컴포넌트 기존에 모든 리액트 컴포넌트는 브라우저에서 다운로드 된다. 그러나 만약 해당 컴포.. 2023. 12. 7. [CS] 브라우저 동작원리, 브라우저는 어떻게 작동하는가? 브라우저란? 웹 브라우저는 동기(Synchronous)적으로 (html+css), js언어를 해석하여 내용을 화면에 보여주는 응용소프트웨어이다. 동기적으로 작동하는 이유: script 태그를 body 태그 하단에 위치시키는 아이디어에서 찾을 수 있다. html요소들이 script 로딩 지연으로 인해 렌더링에 지장을 받는 일이 발생하지 않아 페이지 로딩 시간이 단축된다. 자바스크립트는 렌더링 엔진이 아닌 자바스크립트 엔진이 처리한다. 웹 브라우저가 웹 서버에 필요한 자원을 요청하면 서버는 응답하고 웹 브라우저는 이를 해석한 후 사용자에게 보여준다. 브라우저의 구조 크롬 브라우저를 기반으로 구조를 설명하자면 다음과 같다. 사용자 인터페이스 사용자가 접근할 수 있는 영역이다. URI를 입력할 수 있는 주소 표.. 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. [Next.js] Route System - 2) next/link - Link Link Next.js 에서도 react-router-dom 처럼 next/link 의 link 를 사용할 수 있다. import Link from 'next/link' function Home() { return ( Home About Us Blog Post ) } export default Home Props Prop Example Type Required href href="/dashboard" String or Object Yes replace replace={false} Boolean - scroll scroll={false} Boolean - prefetch prefetch={false} Boolean - 태그의 속성인 className 이나 target="_blank" 와 같은 것들이 속성으.. 2023. 12. 5. 이전 1 2 3 4 5 6 ··· 22 다음
