잡다하다

개요Next.JS에서 없는 페이지로 이동할 때, 모든 경로에 대해 동시 처리하는 방법에 대한 내용입니다. [...not_found]동적 경로(Dynamic Route)로 설정된 페이지 파일로, URL의 일치하지 않는 모든 경로를 처리하는 데 사용됩니다.[...not_found]는 "Catch-All Route"라고 불리는 동적 경로 패턴을 의미합니다.  폴더 구조, 코드src app [...not_found] page.js not-found.tsx not-found.tsxexport default function NotFound() { return ( 페이지 없음 ..

개요SWR(Stale-While-Revalidate)은 React Hooks를 사용하여 데이터 가져오기와 캐싱을 간단하게 만들어주는 라이브러리입니다. Next.js와 함께 사용하면 매우 효율적인 데이터 페칭을 구현할 수 있습니다. SWR은 Vercel에서 개발한 라이브러리로, 최신 데이터 페칭 전략을 제공합니다.  특징자동 캐싱 및 재검증 (Stale-While-Revalidate)SWR의 이름에서 알 수 있듯이, 데이터가 오래되었는지 여부에 따라 자동으로 데이터를 캐싱하고, 백그라운드에서 재검증합니다.이는 데이터의 신선도를 유지하면서 빠른 응답을 제공합니다.import useSWR from 'swr';import axios from 'axios';const fetcher = url => axios.ge..

소개Next.js는 환경 변수를 사용하여 애플리케이션의 설정값을 관리할 수 있습니다. 이 가이드는 Next.js에서 환경 변수를 설정하고 사용하는 방법을 설명합니다.  파일 생성프로젝트 루트 디렉토리에 .env.local 파일을 생성하고 환경 변수를 추가합니다.NEXT_PUBLIC_API_URL=https://api.example.comNEXT_PUBLIC_API_KEY=your_api_key NEXT_PUBLIC_로 시작하는 환경 변수는 클라이언트 사이드에서 사용할 수 있습니다.  환경변수 사용pages/index.js 파일을 수정하여 환경 변수를 사용합니다.import { useEffect, useState } from 'react';export default function Home() { con..

소개Next.js와 TypeScript를 함께 사용하면 코드의 안정성과 유지보수성을 크게 향상시킬 수 있습니다.Next.js 프로젝트에 TypeScript를 설정하고 사용하는 방법을 설명합니다.  프로젝트 설정Typescript 관련 패키지를 설치합니다.npm install --save-dev typescript @types/react @types/node TypeScript 설정 파일을 생성합니다.touch tsconfig.json 프로젝트 내의 파일 확장자를 .js에서 .tsx로 변경합니다. 예를 들어, pages/index.js 파일을 pages/index.tsx로 변경합니다.   타입 정의컴포넌트의 타입을 정의하여 코드의 안정성을 높일 수 있습니다. 예를 들어, props의 타입을 정의할 수 있습..

소개Next.js의 정적 사이트 생성(SSG)은 빌드 타임에 HTML 페이지를 미리 생성하여 빠른 로딩 속도와 SEO 최적화를 제공합니다. 이 가이드는 SSG 기능을 자세히 설명합니다.  SSG의 장점 빠른 로딩 속도: 미리 생성된 HTML 페이지는 서버 요청 없이 즉시 로드됩니다.SEO 최적화: 정적 페이지는 검색 엔진이 쉽게 인덱싱할 수 있습니다.안정성: 서버 부하를 줄이고, CDN을 통해 전 세계에 빠르게 배포할 수 있습니다.   GetStaticProps pages/index.jsexport async function getStaticProps() { const res = await fetch('https://api.example.com/data'); const data = await res...

소개서버사이드 렌더링(Server-Side Rendering, SSR)은 서버에서 HTML을 생성하여 클라이언트에 전달하는 방식입니다. Next.js는 이 기능을 통해 초기 로딩 속도와 SEO를 향상시킬 수 있습니다.  SSR의 장점 초기 로딩 속도 향상: 서버에서 미리 렌더링된 HTML을 제공하여 초기 로딩 시간을 단축합니다.SEO 최적화: 검색 엔진이 미리 렌더링된 HTML을 인덱싱할 수 있어 SEO 성능이 개선됩니다.유저 경험 개선: 초기 콘텐츠가 빠르게 표시되어 사용자 경험이 향상됩니다.   getServerSideProps 사용법Next.js에서 SSR을 구현하기 위해 getServerSideProps 함수를 사용합니다. 이 함수는 각 요청 시 서버에서 실행되며, 페이지 컴포넌트에 데이터를 전달..

소개Next.js는 웹 성능 향상을 위해 이미지 최적화 기능을 제공합니다. 이 기능을 통해 이미지를 자동으로 최적화하고, 적절한 크기로 리사이즈하여 사용자에게 최상의 경험을 제공합니다. 다음은 Next.js의 이미지 최적화 기능에 대한 자세한 설명입니다.  이미지 컴포넌트 사용Next.js의 Image 컴포넌트는 최적화된 이미지를 렌더링합니다. 기본적으로 이미지의 너비와 높이를 지정해야 하며, 이를 통해 이미지의 비율이 유지됩니다.import Image from 'next/image';const MyImage = () => ( );export default MyImage;  레이즈와 레이아웃 설정이미지의 레이아웃을 설정하여 반응형 디자인을 구현할 수 있습니다. intrinsic, responsive, ..

소개Next.js는 React 애플리케이션을 위한 프레임워크로, 서버사이드 렌더링(SSR)과 정적 사이트 생성(SSG)을 지원하여 성능과 SEO 최적화를 돕는다.  주요 기능서버사이드 렌더링 (SSR): 페이지 로딩 속도와 SEO를 개선합니다.정적 사이트 생성 (SSG): 빌드 시 HTML 파일을 생성해 빠른 로딩 속도를 제공합니다.API 라우팅: API 엔드포인트를 쉽게 생성할 수 있습니다.자동 코드 분할: 필요할 때만 자바스크립트를 로드하여 성능을 향상시킵니다. 설치 및 기본 사용법npx create-next-app@latest my-next-app cd my-next-app npm run dev페이지 생성: pages 폴더에 파일을 추가하면 자동으로 라우팅됩니다. // pages/index.js e..

패키지 매니저(Package Manager)개발에 필요한 다양한 패키지를 설치하고 수정하는 작업을 도와주는 도구이다.패키지 간의 의존관계를 고려하여 설치 및 수정을 도와주기 때문에 필수로 사용해야할 도구이다.  NPMNODE JS 에 내장되어 있는 패키지 매니저로 NODE만 설치되어 있다면 별도의 설치없이 사용이 가능하다.NPM에서 직접 개발한 모듈뿐만 아니라 일반 사용자들이 개발한 모듈도 있고, 가장 역사가 길기 때문에 다양한 모듈을 사용할 수 있다.단점으로는 의존관계에 대해서 모듈 하나가 문제가 발생할 경우 의존된 다른 모듈에도 문제가 발생할 수 있다. 첫째줄 명령어를 통해 package.json을 생성하고, 둘째줄 명령어를 통해 필요한 모듈들을 설치할 수 있다.npm initnpm install  ..

개요URL을 잘못 입력하여 발생하는 404(NOT FOUND ERROR)를 전역으로 처리하는 방법에 대해 작성해보았다.NEXT JS 13의 app router 기준으로 작성된 글이다.만약 페이지에서 다른 페이지로 이동이 필요하지 않은 경우에는 /src/app/not-found.tsx 만 작성해주면 된다. /src/app/not-found.tsximport style from './error/404/_module/css/not.found.module.css'export default function NotFound() { return ( 페이지 없음 페이지를 찾을..