과제 제출 새벽에 끝-!
오늘은 일찍 자기위해서 TIL 빠르게 정리해따 히히 ^0^
바아로 시작해보도록 하죠. 레고.
챌린지반 강의정리 - Next.js 심화: 기능 구현과 문제 해결
으아아 어지러워요오 @.@....
React vs Next.js
(= 단순한 UI 설계 도구 vs 전체 애플리케이션 개발 환경을 제공하는 프레임워크)
- React
UI 구성 요소를 작성하기 위한 라이브러리
컴포넌트 기반 설계를 통해 재사용 가능한 UI를 쉽게 구현 가능
상태 관리, 라우팅, 빌드 최적화 등의 기능은 별도의 라이브러리나 설정이 필요함 (한계점)
- Next.js
React를 기반으로 하는 프레임워크
[Next.js의 특징]
- 파일 기반 라우팅: 폴더 구조에 따라 자동으로 라우트를 생성
- SSR/SSG/ISR 지원: 다양한 렌더링 방식을 제공 → SEO 최적화 및 UX 개선
- 빌트인 성능 최적화: 이미지 최적화, 코드 스플리팅, 빠른 초기 로딩 지원
Next.js를 사용하기 좋은 경우
- SEO가 중요한 프로젝트 : SSR과 SSG 렌더링 → 검색 엔진 크롤러가 HTML 콘텐츠를 쉽게 접근 가능
- 복잡한 라우팅이 필요한 경우 : Next.js 파일 기반 라우팅 = 라우팅 설정을 단순화 및 동적 라우팅도 쉽게 지원
- 서버-클라이언트 간 데이터 효율적으로 다뤄야 할 때 : API 라우트 핸들러와 함께 서버리스 함수로 간단하게 데이터 로직 구현 가능
- 정적 파일 및 이미지 최적화: 내장된 이미지 최적화 → 기능 웹사이트 로딩 속도를 크게 개선 가능
서버 컴포넌트와 클라이언트 컴포넌트의 혼합
- 문제 상황
Next.js의 layout.tsx는 서버 컴포넌트로 작동
∴ 클라이언트 측에서만 실행 가능한 브라우저 API or 클라이언트 전용 라이브러리를 사용 X!
ex) Tanstack Query의 QueryClientProvider는 브라우저 환경에서 동작해야 하기 때문에 layout.tsx에 직접 사용할 수 없다!
- 해결 방법
1. 클라이언트 전용 Provider 파일 생성
providers.tsx라는 별도 파일 생성 → use client 선언 후, 클라이언트 로직을 작성
// app/providers.tsx
'use client';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import React, { useState } from 'react';
export default function Providers({ children }: { children: React.ReactNode }) {
const [queryClient] = useState(() => new QueryClient());
return <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>;
}
2. layout.tsx에서 Providers 사용
클라이언트 컴포넌트인 Providers, 서버 컴포넌트인 layout.tsx에서 호출
// app/layout.tsx
import Providers from './providers';
import './globals.css';
export const metadata = { title: 'My App' };
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<body>
<Providers>{children}</Providers>
</body>
</html>
);
}
∴ 라이언트와 서버의 책임을 분리하여 문제를 해결이 가능하다 ^-^)b
Hydration
서버에서 렌더링된 HTML에 React 상태 및 이벤트를 추가 → 클라이언트 측에서 완전히 활성화하는 과정
- 작동 원리
- 서버에서 생성된 HTML을 클라이언트로 전송
- 브라우저가 HTML을 렌더링하고, React는 HTML DOM에 연결
- 연결 후 React 상태와 이벤트가 활성화됨
Provider & 클라이언트 컴포넌트
클라이언트 상태 관리를 전제로 하는 Provider 컴포넌트 = use client 선언 필요
서버 컴포넌트와 혼합하여 사용할 때,
- layout.tsx는 서버 컴포넌트로 유지.
- 클라이언트 상태 관리를 위해 Provider 컴포넌트를 별도 파일로 작성.
위의 접근 방식 → 클라이언트와 서버를 분리하고, Next.js의 번들링 최적화를 활용하는 데 효과적
Next.js의 렌더링 방식
- Static Site Generation (SSG)
- 빌드 시 정적 HTML 생성 ex) 정적 블로그, 회사 소개 페이지
- SEO와 빠른 로딩 속도 : 사용자가 즉시 콘텐츠를 볼 수 있음
- Incremental Static Regeneration (ISR)
- 주기적으로 콘텐츠 업데이트 ex) 뉴스 섹션, 주간 베스트
- SSR과 SSG의 장점 결합 → 콘텐츠가 최신 상태로 유지, 빌드 비용을 절약
- Server-Side Rendering (SSR)
- 요청 시 HTML 생성 ex) 사용자 맞춤 대시보드
- 최신 데이터 제공 → 실시간 데이터를 활용할 수 있음
- Client-Side Rendering (CSR)
- 클라이언트에서 렌더링 및 데이터 패칭 ex) SPA.
- 빠른 사용자 인터랙션 지원
- 페이지 이동 방식: Link와 useRouter
- Link 컴포넌트 : 정적 라우팅에 사용, prefetch로 성능 최적화
- useRouter 훅 : 동적 페이지 이동이나 조건부 라우팅에 적합
import Link from 'next/link';
import { useRouter } from 'next/navigation';
export default function NavigationExample() {
const router = useRouter();
const handleLogin = () => {
// 로그인 성공 후 대시보드로 이동
router.push('/dashboard');
};
return (
<div>
<Link href="/about">About</Link>
<button onClick={handleLogin}>Login</button>
</div>
);
}
API 라우트 핸들러와 서버리스 함수
app/api, 서버리스 함수처럼 작동
// app/api/hello/route.ts
import { NextResponse } from 'next/server';
export function GET() {
return NextResponse.json({ message: 'Hello from API!' });
}
SEO를 고려한 Metadata
SEO와 소셜 미디어 공유를 위한 메타데이터 설정을 지원
// app/layout.tsx
export const metadata = {
title: 'My Awesome Website',
description: 'Built with Next.js',
openGraph: {
title: 'My Awesome Website',
description: 'Learn how to build with Next.js',
images: [{ url: 'https://example.com/og-image.png' }],
},
};
환경변수 설정
환경변수는 .env.local 파일에 정의, 민감한 정보는 서버에서만 접근 가능!
SUPABASE_URL=https://your-supabase-url.supabase.co
SUPABASE_ANON_KEY=your-anon-key// 서버 코드
export async function GET() {
const supabaseUrl = process.env.SUPABASE_URL;
return NextResponse.json({ url: supabaseUrl });
}
마무리 - 내일부터 이제 팀플이다!
머리가 너무 아픈 나머지
오늘은 일찍 가볼거고..
내일.. 팀프로젝트 시작해야겠쥐?
아하하 그럼 20000!
(이젠 몰라 대충할래~)
오늘의 KPT 회고
Keep: 과제 끝!
Problem: 비상! 비상! 상태이상!
Try: 일찍 자긔 들으렁..
'React TIL' 카테고리의 다른 글
| [React] Day_68 데일리 정리 (1) | 2024.12.24 |
|---|---|
| [React] Day_67 데일리 정리 (0) | 2024.12.23 |
| [React] Day_64 개인 프로젝트 후기 (0) | 2024.12.18 |
| [React] Day_63 개인 프로젝트 작업 뜨라블슈띵 (2) (0) | 2024.12.17 |
| [React] Day_62 개인 프로젝트 작업 뜨라블슈띵 (1) (1) | 2024.12.16 |
