전체 글54 Next.js로 만나는 렌더링의 모든 것 Next.js는 단순한 React 라이브러리를 넘어, 서버 사이드에서부터 정적 사이트 생성, 실시간 페이지 갱신까지 폭넓은 렌더링 방식을 제공합니다. 프로젝트 상황에 맞춰 적절한 방식을 골라 쓸 수 있다는 점이야말로 Next.js의 가장 큰 강점입니다.1. Next.js를 선택해야 하는 이유서버 환경 지원React는 오직 브라우저에서만 실행되지만, Next.js는 Node.js 환경에서도 자바스크립트를 실행할 수 있어 서버 측 로직을 자유롭게 구현할 수 있습니다.파일 기반 라우팅app/ 디렉터리 내에 폴더와 파일을 생성하기만 해도 URL이 자동 매핑됩니다.SEO 최적화서버에서 렌더링된 HTML을 제공하거나 정적으로 생성된 페이지를 서빙해 검색 엔진 크롤러가 온전히 인덱싱할 수 있습니다.이미지·폰트 최적화.. 2025. 4. 18. 캐러셀 이미지 전환 및 프로그레스 바 동기화 트러블 슈팅 문제 상황과 해결 과정캐러셀 구현 과정에서 다음과 같은 문제들이 발생했습니다:타이밍 불일치: 이미지가 전환되는 시점과 프로그레스 바 진행이 동기화되지 않았습니다.일관성 부재: 사용자 호버 시 자동 재생은 중단되지만 프로그레스 바는 계속 진행되었습니다.성능 이슈: setInterval 사용 시 브라우저 탭 비활성화 문제가 발생했습니다.메모리 누수: 이벤트 리스너와 타이머가 제대로 정리되지 않았습니다.코드 구현 순서와 상세 설명1. 캐러셀 컴포넌트 구조 설계프로젝트의 구조를 먼저 살펴보면 다음과 같습니다: src/├── components/features/home/│ ├── home-main-carousel.tsx # 메인 캐러셀 컴포넌트│ ├── home-main-carousel-co.. 2025. 4. 17. Next.js의 서버액션과 라우트 핸들러 비교 Next.js에서 서버 사이드 로직을 처리하는 방법으로 서버액션(Server Actions)과 라우트 핸들러(Route Handlers) 두 가지 주요 방식이 있습니다. 두 기능 모두 React 애플리케이션에서 서버 사이드 로직을 작성할 수 있게 해주지만, 목적과 사용 방식에 뚜렷한 차이가 있습니다. 이 포스트에서는 두 접근 방식의 특징,.차이점, 그리고 각각의 장단점을 자세히 살펴보겠습니다.서버액션(Server Actions)이란?서버액션은 Next.js 13.4부터 도입된 기능으로, React의 Server Components에 기반하여 서버에서 실행되는 비동기 함수를 정의할 수 있게 해줍니다. 특히 폼 제출과 같은 데이터 변경 작업을 클라이언트에서 서버로 직접 호출할 수 있도록 해주는 것이 핵심입니.. 2025. 4. 8. [트러블 슈팅] 소셜 로그인 리다이렉트 Next.js 프로젝트에서 Supabase 소셜 로그인(카카오) 리다이렉트 문제 해결 과정 1. 문제 상황 Supabase를 이용한 카카오 소셜 로그인 구현 중 리다이렉트 URL 설정에서 어려움을 겪었습니다. 개발 환경과 프로덕션 환경에서 동적으로 올바른 리다이렉트 URL을 설정해야 했습니다. 2. 코드 분석 const getURL = () => { let url = process?.env?.NEXT_PUBLIC_SITE_URL ?? // 직접 설정한 사이트 URL process?.env?.NE.. 2025. 3. 27. 트러블슈팅: Image 최적화 Next.js에서 next/image를 사용하면 자동으로 이미지 최적화가 되지만, 설정이 잘못되면 이미지가 보이지 않거나 스타일이 깨지는 문제가 발생할 수 있습니다. 이번 포스팅에서는 이미지 최적화 방법과 트러블슈팅에 대해 정리해보겠습니다.1. 기본적인 next/image 사용법Next.js 14.2.18에서 이미지를 최적화하려면 next/image를 사용해야 합니다. 예제 코드처럼 src, width, height를 지정하면 자동으로 최적화된 이미지가 제공됩니다.import Image from "next/image";export default function Home() { return ( Next.js 이미지 최적화 );} 2. 발생한 트러블슈팅✅ 이미지가 .. 2025. 3. 19. Next.js App Router의 주요 렌더링 패턴 4가지 TIL: Next.js의 SSG, ISR, SSR, CSR 렌더링 패턴작성일: 2025년 3월 18일오늘 내일배움캠프에서 Next.js의 주요 렌더링 패턴에 대해 배웠다. Next.js는 다양한 렌더링 방식을 제공하여 각 페이지나 컴포넌트의 특성에 맞게 최적화된 렌더링을 할 수 있다는 점이 인상적이었다. 특히 SSG, ISR, SSR, CSR 이 네 가지 패턴은 각각 다른 시나리오에 적합하며, 이를 이해하고 적절히 활용하는 것이 중요하다는 것을 배웠다.1. 정적 사이트 생성 (Static Site Generation, SSG)SSG는 빌드 시점에 HTML을 생성하는 방식으로, Next.js에서 가장 권장하는 렌더링 방식이다. 자주 변경되지 않는 페이지에 적합하다.SSG의 특징:빌드 시점에 HTML이 생성.. 2025. 3. 18. 이전 1 2 3 4 ··· 9 다음