nextjs 썸네일형 리스트형 웹사이트 사이트맵 자동 생성기 구현 트러블슈팅 최근 Next.js 환경에서 PHP 클라이언트로부터 데이터를 받아 사이트맵을 자동 생성하는 시스템을 구현하면서 겪었던 문제와 그 해결 과정을 공유하고자 합니다. 이 글이 비슷한 문제를 겪고 있는 개발자들에게 도움이 되길 바랍니다.도전 과제PHP 클라이언트에서 URL 데이터를 Next.js API로 전송합니다.구글 권장사항에 따라 이 데이터를 200개씩 묶어 XML 사이트맵 파일로 생성합니다.생성된 모든 사이트맵 파일을 가리키는 인덱스 파일을 생성합니다.대규모 사이트에서는 URL이 수천 개에 달할 수 있어, 하나의 사이트맵 파일에 모든 URL을 포함시키는 것보다 200개씩 분할하여 여러 개의 사이트맵 파일을 생성하는 방식이 권장됩니다. 하지만 구현 과정에서 예상치 못한 여러 문제가 발생했습니다. 문제 상황.. 더보기 프론트엔드 개발자가 백엔드를 고민하게 된 이유: MERN 스택과 Node.js, Nest.js의 차이점 개발자 지인과의 커피챗 이후, "프론트엔드만으로는 충분하지 않은 시대가 왔구나"라는 사실을 깨닫게 되었습니다. 처음에는 나 자신이 프론트엔드에만 집중하려는 욕심을 가지고 있다는 생각이 들었고, 이제는 백엔드도 공부해야 할 때가 되었음을 느꼈습니다. 그러면, 어디서부터 시작해야 할까? 제가 최종적으로 입사하고 싶은 회사들을 살펴보니 MERN 스택을 많이 사용한다는 사실을 알게 되었습니다. React는 이미 익숙하게 사용 중이었기 때문에, 백엔드에서 더 쉽게 접근할 수 있는 기술로 Node.js를 선택하게 되었습니다. 그러나 여기서 끝이 아니었습니다. 단순히 Node.js만으로는 충분하지 않았습니다. 특히 요즘 많은 개발자들이 사용하는 Nest.js라는 프레임워크에 대해 궁금증이 생겼습니다. "왜 사람들이 .. 더보기 [NextJs] Next.js 13 도입으로 인한 이미지 최적화 경험: Next/Image 컴포넌트의 강력한 기능들 프로젝트에서 next.js 13버전을 도입하여 이미지 최적화 한 경험을 토대로 작성해봅니다. Next/Image 컴포넌트의 기능Next/Image 컴포넌트에서 제공하는 대표적인 기능은 다음의 3가지입니다. 각 기능에 대해 어떤 이점이 있는지 정리해 보겠습니다.lazy loadinglazy loading는 이미지 로드하는 시점을 필요할 때까지 지연시키는 기술을 의미합니다.예를 들면 스크린 밖에 있는 이미지들은 로딩을 지연시키고 스크린 안에 있는 이미지만을 로드해서, 불필요한 대역폭 사용을 줄이고 필요한 이미지만 빠르게 로드할 수 있도록 하는 것입니다. 모든 브라우저에서 잘 동작하는 lazy loading 을 구현하기 위해서는 Intersection Observer 혹은 scroll 이벤트를 통해 스크린에 .. 더보기 [NextJs] 서버 vs 클라이언트 컴포넌트: 최적의 선택을 위한 가이드 Next.js에서 App Router를 자주 사용하다 보면, 때때로 라이브러리 지원 문제나 프로젝트 마감 기한 때문에 서버 사이드 렌더링(Server-Side Rendering, SSR)을 고려하지 않고 'use client'를 무작정 사용하는 경우가 있습니다. 이러한 경험은 많은 개발자들이 공감할 수 있는 부분일 것입니다. 이번 글에서는 제가 서버 컴포넌트와 클라이언트 컴포넌트를 선택할 때 어떤 기준을 두고 사용하는지, 그리고 왜 서버 사이드를 우선적으로 고려해야 하는지에 대해 정리해 보려고 합니다. 각 컴포넌트의 특성과 장단점을 명확히 이해함으로써, 보다 효과적으로 Next.js의 기능을 활용할 수 있는 방법을 함께 살펴보겠습니다. 서버 사이드란 무엇일까요?서버 사이드는 웹 애플리케이션의 비즈니스 로.. 더보기 [Next.js] API 만들어 사용하기(API routes) Next.js 13에서는 API 서버를 쉽게 구현할 수 있는 기능이 추가되어 백엔드 개발이 한층 간편해졌습니다. 이 기능을 활용하면 Express와 같은 외부 라이브러리 없이도 API를 바로 추가할 수 있습니다. 이번 글에서는 Next.js의 API routes를 활용하여 프론트엔드와 백엔드 간의 소통을 어떻게 구현했는지에 대해 소개하겠습니다. Next.js API Routes란?Next.js에서는 API를 추가할 수 있는 기능을 API routes라고 부릅니다. 이 기능을 통해 pages/api 디렉토리 안에 파일을 생성하면, 해당 파일이 REST API 경로로 자동으로 매핑됩니다. 예를 들어, api/stores라는 디렉토리 안에 파일을 만들면 /api/stores 경로로 접근할 수 있습니다. 예시로.. 더보기 React-hook-form value 값 설정 문제상황React-Hook-Form을 사용하면서 api로 조회해온 값을 value에 세팅을 해주고 싶었다.그래서 Input 안에 field.value(직접 값을 control함) 과 내가 조회해온 값을 value로 써주었다.조회는 잘되었으나, 조회된 값이 'apple'일 경우, 모든 문자를 삭제하여 'a'만 남았을 때 한 번 더 삭제하면 'apple'로 되돌아가는 문제가 있었습니다. input-text.tsx (공통 Input)interface Props { name: string; title: string; type?: string; value?: any; maxLength?: number; loading?: boolean value: string;}export const InputText.. 더보기 이전 1 다음
