공부/Next (19) 썸네일형 리스트형 Next.js 알아보기 3 (React Server Component, Client Component) React Server Component & Client Component 📖✨ 기본적으로 `app`폴더 하위의 모든 컴포넌트는 `서버 컴포넌트`입니다! 서버 컴포넌트말 그대로 서버에서 실행되는 컴포넌트입니다.// src>app>page.tsxexport default function Home() { console.log("여기는 어디일까요?"); return ( 안녕하세요! Next.js 입니다! );} 밑에 사진을 캡처 화면을 보면 브라우저가 아닌 `terminal`에 로그가 출력된 것을 확인할 수 있습니다. 이처럼 컴포넌트의 실행 환경이 브라우저인지 서버인지에 따라서 `서버 컴포넌트``클라이언트 컴포넌트`가 결정됩니다. 클라이언트 컴포넌트브라우저 상에서 실행되는 컴포넌.. Next.js 알아보기 2 (Link, useRouter, 예약 파일) Link 📖prefetching 지원next.js의 `` 컴포넌트는 뷰포트에 링크가 나타나는 순간 해당 페이지의 코드와 데이터를 미리 가져오는 `prefetching`기능을 지원합니다. 사용자가 클릭했을 때 즉시 페이지를 볼 수 있게 합니다. client-side navigation 지원`` 컴포넌트는 새 페이지를 로드하기 위해 클라이언트 측에서 페이지를 바꿔주기 때문에 페이지 전환 시 빠른 사용자 경험을 제공합니다.import type { Metadata } from "next";import { Inter } from "next/font/google";import "./globals.css";import Link from "next/link";const inter = Inter({ subsets: [.. Next.js 알아보기 1 (App Router, Pages Router) React 프레임워크 Next.js 📖라이브러리와 프레임워크 차이프레임워크개발자가 기능 구현에만 집중할 수 있게 구조와 틀을 제공하는 기술의 조합 라이브러리공통 기능의 모듈화가 이루어진 프로그램의 집합 ❗비슷해 보이지만, 중요한 차이점은 애플리케이션의 제어 흐름의 권한을 누가 가지고 있는지가 핵심입니다.React에서 Routing } /> } /> } /> } /> 위 코드처럼 라우팅 설정을 위해 개발자가 직접 제어를 하고 있습니다. Next.js에서 Routingnext.js에서 미리 정해놨기 때문에 아무것도 안 해도 됩니다! App Router와 Pages Router 차이 📖File System Base 라우팅Next.js는 폴더구조를 기반으로 라우팅을 자동 생성하.. 이전 1 2 3 다음
