peter 님의 블로그

목차1. Sitemap이란?2. sitemap.xml 파일 생성하는 방법3. fetch 동적으로 호출하기  웹사이트의 SEO 최적화와 사이트 구조 이해를 돕기 위해 sitemap.xml 파일을 생성하는 것은 매우 중요한 작업입니다.Next.js 15에서는 sitemap.xml 파일을 동적으로 생성하는 방법을 제공하며, 이를 통해 사이트의 최신 상태를 검색 엔진에 자동으로 전달할 수 있습니다.이 글에서는 동적 sitemap.xml 파일 생성과 관련된 문제 해결 방법을 설명합니다.1. Sitemap이란?Sitemap.xml은 웹사이트의 각 페이지 URL을 포함하는 XML 파일로, 검색 엔진이 웹사이트의 구조를 더 잘 이해하고 효율적으로 색인화할 수 있도록 돕습니다. 이 파일은 주로 검색 엔진 크롤러가 페이지..

export default function Custom404() { return 404 - Page Not Found;}목차1. 에러 페이지 위치 및 소스 코드 작성2. 확인  404 에러 페이지는 사용자가 요청한 웹 페이지나 리소스를 서버가 찾을 수 없을 때 표시 되는 오류입니다.상태코드는 404 이며, 사용자가 잘못된 URL로 접근을 하였거나, 리소스가 삭제 되었을 경우 발생합니다. 기본적으로 Next.js에서는 자체적으로 404 페이지를 보여줍니다. 위와 같이 기본 페이지이만으로 충분히 의미가 전달이 되지만, 프로젝트 진행시 커스텀이 필요한 경우도 있으므로, Next.js 15에서 404 페이지 커스텀 하는 방법을 알아보도록 하겠습니다. Next.js 15App router 방식 1. 에러 페이지..

목차1. 파비콘이란?2. 파비콘 변경 방법  1 파비콘이란?파비콘(Favicon)은 "Favorites Icon"의 줄임말로, 브라우저의 탭, 즐겨찾기 목록, 그리고 검색 엔진 결과에서 웹사이트를 대표하는 작은 아이콘을 의미합니다. 주로 웹사이트의 브랜드나 로고를 활용하며, 사용자가 사이트를 쉽게 식별할 수 있도록 돕습니다. 2. 파비콘 변경 방법- Next.js에서 파비콘을 변경하기 이전에 파비콘은 다음과 같습니다. - 파비콘의 위치는 /src/app/ 의 폴더에 있습니다. - 일반적으로 32x32 또는 16x16 크기의 .ico 파일을 사용하지만, PNG 형식도 지원됩니다. 파비콘 생성기를 사용해 다양한 크기의 파비콘을 만들 수 있습니다. - 구글에서 설명하는 파비콘의 크기는 다음과 같습니다  - 파..

목차1. 오류 내용2. 해결 방법 Next.js 14.2.3app router 1. 오류 내용sitemap.xml 을 수정하면서 page.js(main) 관련된 부분을 redux사용 코드를 제거 하고 fetch 함수를 집어넣었다. 로컬의 테스트를 마치고 운영으로 docker를 올리던 중 다음과 같은 에러가 발생하였다. - 오류 내용16.75 TypeError: fetch failed16.75 at node:internal/deps/undici/undici:12618:1116.75 at process.processTicksAndRejections (node:internal/process/task_queues:95:5)16.75 at async d (/app/.next/server/ap..

목차1. 구분하는 방법2. 함수 작성3. 사용 및 결과 개발/운영하는 홈페이지를 접속하였 때 모바일인지 PC인지에 따라서 보여주는 화면을 다르게 설정 할 때도 있다.PC에서 접근하였는 경우 사이드 바를 보여주고, 모바일로 접속하였을 경우 사이드 바를 접고 햄버거 아이콘을 노출 시키고자 한다. 1. 구분하는 방법JS의 navigator의 객체의 userAgent 함수를 사용을 할 것이다.navigator.userAgent를 확인해보면 아래와 같이 응답 값을 얻을 수 있다.'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36' 2. 함수 작성공통으로 사용하기 위..

목차1. 설치 방법2. 오류 내용3. 해결 방법 Next.js 15 프로젝트에서 @toast-ui/react-editor 설치 시 ERESOLVE unable to resolve dependency tree 오류가 발생할 수 있습니다. 이 오류는 프로젝트의 React 버전이 18인 반면, @toast-ui/react-editor는 React 17을 요구하여 종속성 충돌이 발생하기 때문입니다. 아래는 이를 해결하는 방법과 서버 측 렌더링 환경에서의 설정 방법을 다룹니다.1. 설치 방법- 라이브러리 설치npm install --save @toast-ui/react-editor - 코드 샘플import '@toast-ui/editor/dist/toastui-editor.css';import { Editor }..

목차1. 라이브러리 설치2. 설정파일 수정3. 코드 작성 1. 라이브러리 설치- 다음과 같이 라이브러리를 설치합니다 npm install @svgr/webpack 2. 설정파일 수정- next.js의 설정파일인 next.config.mjs의를 수정합니다/** @type {import('next').NextConfig} */const nextConfig = { ... webpack: (config) => { config.module.rules.push({ test: /\.svg$/i, issuer: /\.[jt]sx?$/, use: ["@svgr/webpack"], }); return config; },};export default nextConfig;3. 코..

목차1. 이미지 경로2. 코드 수정 이번 포스트에서는 Next.js에서 이미지를 등록하고 활용하는 방법에 대해 소개합니다. next/image 컴포넌트를 사용하여 로컬 이미지 파일을 등록하고 웹 페이지에 최적화된 상태로 표시하는 법을 다룹니다.예제로 로고 이미지를 클릭 시 홈으로 이동하는 기능을 구현하며, 이미지 속성 설정 및 스타일링을 Tailwind CSS와 함께 사용하는 방법을 보여줍니다. 1. 이미지 경로- 이미지의 경로는 public 폴더에서 img라는 폴더를 사용하며, 사용할 이미지를 복사해서 붙여넣습니다. 2. 코드 수정- next/image컴포넌트를 사용하여 예제코드를 작성하겠습니다.- css는 tailwind css이며, 이벤트는 홈으로 가는 이벤트입니다.import Image from ..

Next.js 15 mui 프레임워크 적용시 에러 해결 방법목차1. 오류 원인2. 해결 방법  1. 오류 원인 npx create-next-app@latest {projectName} 이와 같이 프로젝트 생성시 아래와 같이 프로젝트가 생성이 됩니다.package.json을 확인해보면 버전이 다음과 같습니다.Next.js : 15.0.2react : 19.0.0-rc-02c0e824-20241028  2. 해결 방법1. 프로젝트를 설치하면서, 간과 했던 부분이 node version 이었고 nvm으로 node version을 올렸습니다peter@juyoung blog-user % npm installnpm WARN ERESOLVE overriding peer dependencynpm WARN While r..

MUI(Material-UI)는 React 기반의 프론트엔드 개발을 위한 오픈소스 UI 라이브러리입니다. MUI는 다양한 미리 설계된 컴포넌트들을 제공하여, React 개발자들이 빠르고 효율적으로 사용자 인터페이스(UI)를 구성할 수 있도록 돕습니다. 특히, 구글의 머티리얼 디자인(Material Design) 가이드라인을 바탕으로 디자인된 컴포넌트를 제공하여 일관된 사용자 경험을 유지하면서도 직관적인 디자인을 쉽게 구현할 수 있습니다.MUI의 주요 특징:컴포넌트 기반 구조: MUI는 버튼, 카드, 네비게이션 바 등과 같은 다양한 UI 컴포넌트를 제공하며, 이를 조합해 애플리케이션을 쉽게 구축할 수 있습니다.커스터마이징: 기본적으로 제공되는 디자인을 쉽게 변경하거나 커스터마이징할 수 있어, 자신만의 스타..