Pages Router페이지 라우터에서는 사전 렌더링 과정 중 Next.js 서버 사이드에서 다른 백엔드 서버나 데이터베이스로부터 데이터를 페칭한다.작동 원리페이지 역할을 하는 파일 안에 서버 측에서만 실행되는 특수 함수를 사용하여 데이터를 직접 페칭하며, 페칭한 데이터는 페이지 컴포넌트에 props로 전달한다.export async function getServerSideProps() { const res = await fetch('https://api.example.com/data'); const data = await res.json(); return { props: { data }, }}export default function Page({ data }) { return {data}..

Next.js의 App Router에서는 컴포넌트를 서버 컴포넌트와 클라이언트 컴포넌트로 구분한다.이 구분은 상호작용 유무와 렌더링 위치에 따라 이루어진다.Client Component클라이언트 컴포넌트는 브라우저에서 실행되며, 사용자와의 상호작용을 처리할 수 있다.'use client' // 파일 최상단에 지시어 선언import { useState } from 'react'export default function Counter() { const [count, setCount] = useState(0) return setCount(count + 1)}>{count}}사전 렌더링 시 한 번, 하이드레이션 시 한 번, 총 두 번 실행useState, useEffect 등의 React 훅 사용 가능브라..

Pages RouterHead페이지 별로 Head 컴포넌트 안에 작성하여 SEO 관련 메타 데이터를 설정할 수 있다.import Head from "next/head";export default Page() { return ( 타이틀 // ... );} Fallback 상태에서의 SEO 처리동적 라우팅을 사용하는 페이지(예: 아이템별 상세 페이지)에서 fallback:true를 설정했을 때, 지정하지 않은 경로에 대해 SSR과 유사하게 동작한다. 이때 초기 HTML에 SEO 관련 메타 데이터가 포함되지 않는 문제가 발생할 수 있는데, 이를 방지하기 위해 fallback 상태에서..

웹 애플리케이션의 렌더링 방식과 Next.js웹 애플리케이션을 개발할 때 가장 중요한 선택 중 하나는 렌더링 방식이다.각 방식은 고유한 장단점을 가지고 있으며, Next.js를 통해 이러한 방식들을 유연하게 활용할 수 있다.렌더링 방식CSR (Cdevmark.tistory.com서버 사이드 렌더링 (SSR)요청이 들어올 때마다 사전 렌더링을 진행하는 방식getServerSideProps커포넌트보다 먼저 실행되어서 컴포넌트에 필요한 데이터를 불러오는 함수export const getServerSideProps = () => { const data = "hello"; return { props: { data, }, };};export default function Page({ d..

Pre-fetching이란?Pre-fetching은 페이지를 사전에 미리 불러오는 기능이다. 현재 사용자가 보고 있는 페이지 내에서 이동할 가능성이 있는 모든 페이지들을 사전에 미리 불러놓는다. Next.js는 이 기능을 통해 이동을 위한 데이터를 미리 불러와 놓음으로써 페이지 이동을 매우 빠른 속도로 지체 없이 처리할 수 있게 해준다. Link 컴포넌트 사용기본적으로 Link컴포넌트로 명시된 경로는 프리페칭이 된다. index search book/1프리페칭 해제 방법search Programmatic NavigationProgrammatic Navigation이란?프리페칭 설정 방법import { useRouter } from "next/router";export default function ..

이 글에서는 SPA에서 페이지 새로고침 없이 URL을 변경하고 검색 기능을 구현하는 방법을 알아본다.History API를 활용한 클라이언트 사이드 라우팅은 프레임워크 없이도 효과적인 SPA를 구현할 수 있는 핵심 기술이다.클라이언트 사이드 라우팅 구현History API 활용history.pushState()를 사용하면 페이지 새로고침 없이 브라우저의 URL을 변경할 수 있다.// App.jshandleClick: async () => { // 브라우저 히스토리에 새 항목 추가 (URL을 홈으로 변경) history.pushState(null, null, "/"); // 포켓몬 목록 데이터 다시 불러오기 const pokemonList = await getPokemonList(); // 앱 전..

바닐라 자바스크립트로 SPA를 구현할 때 컴포넌트 패턴을 활용하면 코드의 재사용성과 유지보수성을 크게 향상시킬 수 있다.이 글에서는 React와 같은 프레임워크 없이 순수 자바스크립트만으로 컴포넌트 기반 아키텍처를 구현하는 방법을 알아본다.바닐라 JS 컴포넌트 설계 패턴애플리케이션 진입점 설정SPA의 시작점에서 애플리케이션을 초기화한다.import App from './App.js';const $app = document.querySelector('#app');new App($app);App 컴포넌트가 #app DOM 요소에 마운트되어 애플리케이션이 시작된다. $app 요소는 전체 애플리케이션의 최상위 컨테이너 역할을 한다. 부모 컴포넌트 구현부모 컴포넌트는 애플리케이션의 상태를 관리하고 자식 컴포넌트들..

페이지 라우터 (Pages Router)기존 방식에서는 _app.tsx를 통해 전역(Global) 레이아웃을 정의하고,특정 페이지에서만 별도의 레이아웃을 적용하고 싶을 때는 getLayout 패턴을 사용한다..├── src│ ├── components│ │ ├── global-layout.tsx│ │ └── searchable-layout.tsx│ ├── pages│ │ ├── _app.tsx│ │ ├── book│ │ │ └── [[...id]].tsx│ │ ├── search│ │ │ └── index.tsx글로벌 레이아웃// global-layout.tsxexport default function GlobalLayout({ childr..

페이지 이동Link index search book/1 Programmatic Navigation사용자가 링크를 직접 클릭했을 때 페이지를 이동시키는 방식이 아니라, 특정 버튼이 클릭되거나 특정 조건을 만족했을 경우에 어떤 함수 내부에서 페이지를 이동시키는 방법import { useRouter } from "next/router"; // 페이지 라우터 버전import { useRouter } from "next/navigation"; // 앱 라우터 버전export default function App() { const router = useRouter(); const onClickButton = () => { router.push("/test"); }; return ( ..

ES6에서 도입된 화살표 함수와 함수의 스코프, 객체 지향 프로그래밍의 기본이 되는 객체와 메서드 활용에 대해 알아보자.스코프와 호이스팅스코프는 변수의 유효 범위를 결정하는 규칙이다. 자바스크립트에서는 전역 스코프, 함수 스코프, 그리고 ES6부터 추가된 블록 스코프가 있다. 호이스팅은 변수와 함수 선언이 코드 실행 전에 메모리에 먼저 올라가는 현상을 말한다. 정확히 말하면, 실제로 올라가는 것이 아니라 끌어올린 것처럼 선언부를 먼저 인식한다는 개념이다.function sumNumbers(a, b) { const modifiedB = b + 5; return a + modifiedB;}console.log(sumNumbers(3, 7)); // 15 (3 + (7 + 5))함수 내에서 선언된 변수 (..