Next.js
-
Next.js App Router(3) - 폴더 구조와 파일 역할Next.js 2025. 6. 27. 10:59
이번 편에서는 Next.js App Router의 page 파일 이외에 새롭게 추가된 파일들의 역할을 알아보고 효율적인 폴더 구조를 구성하는 방법에 대하여 알아보겠습니다. 1편에서 App Router에서 추가된 주요 파일들에 소개했는데요.다시 간단하게 작성해 보자면 다음과 같습니다.page.tsx: 각 경로의 메인 컴포넌트입니다. 서버 컴포넌트가 기본이며, 클라이언트 컴포넌트로 사용하려면 상단에 'use client'를 추가합니다.layout.tsx: 특정 경로 그룹에서 공통으로 사용되는 레이아웃을 정의합니다. 페이지 전환 시에도 상태가 유지됩니다.template.tsx: 페이지 전환마다 새 인스턴스로 생성됩니다. 상태를 초기화하고 싶을 때 사용됩니다.loading.tsx / error.tsx: 로딩 상..
-
Next.js App Router(2) - 서버 vs 클라이언트 컴포넌트Next.js 2025. 6. 25. 10:25
Next.js App Router에서 가장 큰 변화점은 기본적으로 모든 컴포넌트는 Server Component(서버 컴포넌트)라는 것입니다.이번 글에서는 Server Component와 Client Component에 대해 알아보겠습니다.1. Server Component의 장점과 역할서버 환경(Node.js)에서 렌더링DB 쿼리, 외부 API 호출, 비밀 키·토큰 활용 등 브라우저에서 노출되면 안 되는 모든 작업을 안전하게 처리할 수 있습니다.예시: 서버 컴포넌트 내에서 직접 DB에 접근하여 데이터를 가져오고, 이를 UI에 반영HTML 렌더링 및 전송서버에서 렌더링 된 HTML이 브라우저로 전달되어, JS 번들 없이도 빠르게 콘텐츠가 보임React의 클라이언트 훅, 브라우저 API 미사용useStat..
-
Next.js App Router(1) - Next.js의 새로운 패러다임 이해하기Next.js 2025. 6. 23. 14:13
Next.js가 App Router를 도입 한 13 버전 이후 벌써 15 버전이 되었습니다.기존에 Page Router를 사용하던 곳들도 이제는 App Router 도입을 고민하고 또 도입하고 있습니다.이번 글에서는 Next.js App Router가 등장한 배경, 철학, 그리고 Pages Router와의 차이점에 대해 알아보겠습니다.1. Next.js App Router의 등장 배경Next.js는 React를 기반으로 한 프레임워크로서 항상 React의 변화를 빠르게 도입하는 프레임워크입니다.React 18에서 도입된 Concurrent Rendering과 React Server Components(RSC) 지원은 기존 SPA 한계를 극복하기 위한 도전이었습니다.Next.js도 SPA의 한계를 깨고 더..
-
Next.js와 Node.js 기반 실시간 대용량 편집기 Part2. 구현 및 성능 최적화Tip 2025. 5. 3. 00:14
1편에서는 대용량 데이터를 처리하는 협업 편집기의 시스템 아키텍처와 프로토콜 선택 기준을 심층적으로 다뤘습니다. 이번 2편에서는 실제 Next.js 프론트엔드와 Node.js 백엔드를 사용하여 이러한 시스템을 구현하는 방법과, 성능을 최적화하는 다양한 기법을 살펴보겠습니다.1. Next.js 클라이언트에서의 데이터 스트리밍 처리Next.js 클라이언트에서는 실시간 편집 데이터를 주고받기 위해 주로 WebSocket API를 사용합니다. Next.js는 React 기반이므로, 보통 페이지가 로드되면 useEffect 훅 등을 통해 WebSocket 연결(new WebSocket("wss://..."))을 열고 이벤트 리스너를 설정합니다.useEffect(() => { const socket = new W..
-
Next.js와 Node.js 기반 실시간 대용량 편집기 Part1. 아키텍처 & 프로토콜Tip 2025. 4. 27. 22:39
대용량 문서와 이미지를 실시간으로 다수 사용자와 공유하기 위해서는 프론트엔드, 백엔드, 인프라 각 계층이 유기적으로 설계되어야 합니다.프론트엔드는 Next.js를 기반으로 하여 SSR(서버사이드 렌더링)도 가능하지만, 실시간 편집기에서는 주로 클라이언트 측 SPA 동작과 WebSocket 통신을 활용하게 됩니다.Next.js 앱은 사용자의 편집 UI를 제공하고 WebSocket 등의 실시간 채널을 통해 백엔드와 통신하며, 리액트 기반의 실시간 UI 업데이트를 처리합니다. 백엔드는 Node.js로 구현된 실시간 협업 서버로, TypeScript로 작성되며 실시간 동기화 로직(CRDT/OT 알고리즘 적용)과 스트림 데이터 처리를 담당합니다. 인프라는 AWS 클라우드 상에 Kubernetes(EKS 등)를 ..
-
Next.js App Router Server Components와 Server Actions 알아보기 Part.2Next.js 2025. 4. 7. 22:29
이번 편에서는 이전 편에 이어 서버 컴포넌트 및 서버 액션을 중심으로, 성능 향상 효과, 그리고 개발자 경험(DX)의 변화를 깊이 있게 살펴보겠습니다. Server Actions: 서버에서 직접 수행하는 액션 처리App Router의 또 하나의 혁신은 Server Actions(서버 액션) 기능입니다.서버 액션은 간단히 말해 서버에서 실행되는 함수를 클라이언트에서 호출할 수 있게 해주는 기능입니다.Next.js 13.4에서 알파로 도입되어 Next.js 15에 이르러 더욱 안정화된 기능으로, 폼 제출이나 데이터 변경(mutation) 로직을 보다 직관적이고 타입 안전한 방법으로 구현할 수 있게 합니다. Page Router 시절에는 사용자 입력을 처리하려면 보통 API Route를 만들고 (pages/a..
-
Next.js에서 On-Demand ISR 활용하기(Feat. API, Webhook, Serverless)Next.js 2025. 3. 2. 20:24
On-Demand ISR(Incremental Static Regeneration)은 Next.js에서 제공하는 정적 페이지 재생성 기능으로, 특정 시간 간격이 아니라 콘텐츠 변경 시점에 즉시 업데이트할 수 있도록 해줍니다.이를 활용하면 서버 부하를 줄이면서도 최신 데이터를 사용자에게 제공할 수 있습니다.1. 온디맨드 ISR 도입 배경과 기존 렌더링 방식 비교1.1 온디맨드 ISR 도입 배경Next.js는 초기부터 다양한 렌더링 방식을 지원하여 개발자들이 프로젝트의 특성에 맞게 선택할 수 있도록 했습니다.그러나 각 방식에는 고유한 장단점이 존재하며, 특히 정적 사이트 생성(SSG)의 경우 콘텐츠 업데이트 시 전체 사이트를 다시 빌드해야 하는 비효율성이 있었습니다. 이러한 문제를 해결하고자 ISR(Incr..
-
스키마 유효성 검사 라이브러리 비교(feat. Zod vs Yup vs Joi)Tip 2025. 1. 5. 18:38
클라이언트와 서버 간 데이터 교환이 빈번해지면서, 데이터의 일관성과 정확성을 보장하는 것이 중요한 과제가 되었습니다.이는 단순히 버그를 줄이는 것을 넘어, 개발 생산성과 시스템의 안정성에 직접적인 영향을 미치는 문제입니다.오늘은 기존에 자주 사용했던 Yup과 Joi 그리고 최근에 자주 사용되는 Zod에 대해 소개해 보겠습니다.1. 왜 스키마 유효성 검사가 필요한가?1.1 데이터 무결성과 유지보수서비스를 운영한다면 기능이 늘어나고 서비스 구조가 복잡해지기 쉽습니다.API 요청, 응답, DB 저장 구조가 점점 복잡해지면, 예상치 못한 형태의 데이터가 들어와 서비스 전체가 흔들릴 수 있습니다.스키마 유효성 검사를 통해 입력 데이터의 무결성을 보장하면, 추후 에러가 발생해도 디버깅 지점이 뚜렷해지고 유지보수가 ..