정훈's 프로그래밍

Next.js에서 "use server"와 "use client"는 서버 컴포넌트와 클라이언트 컴포넌트를 명시적으로 구분하기 위한 지시자(directive)입니다. 이들은 React의 서버 사이드 렌더링(SSR) 및 서버 컴포넌트 아키텍처를 활용하여 성능을 최적화하고 개발 경험을 개선하는 데 사용됩니다. 아래에서 간략히 설명합니다.1. "use server"의미: 해당 파일 또는 컴포넌트가 서버에서만 실행된다는 것을 나타냅니다.사용 위치: 파일의 최상단에 작성합니다 (예: 'use server';).특징:클라이언트로 전송되지 않으며, 서버에서 렌더링된 후 결과(HTML 등)만 클라이언트로 전달됩니다.데이터베이스 쿼리, 파일 시스템 접근, API 호출 등 서버 전용 작업에 적합합니다.클라이언트 측 Java..

// Animate On Scrollnpm install aos // type scriptnpm install --save-dev @types/aos // 예제: AOS를 초기화하는 React 컴포넌트import { useEffect } from "react";import AOS from "aos";import "aos/dist/aos.css";/** * AOS 예제 컴포넌트 * 스크롤 시 요소에 애니메이션 효과를 적용합니다. * * @returns {JSX.Element} 애니메이션이 적용된 컴포넌트 */export default function AOSExample(): JSX.Element { useEffect(() => { // AOS 초기화 (애니메이션 지속 시간 1000ms) AOS..

Next.js 15 버전 이상에서 선호되는 라우터 방식은 App Router입니다.App Router는 Next.js의 새로운 라우팅 시스템으로, 기존의 Pages Router를 대체하며 다음과 같은 특징을 가집니다:app/ 디렉토리를 사용하여 라우팅을 구성합니다.폴더 기반 라우팅을 채택하여 더 직관적인 구조를 제공합니다.React Server Components를 기본적으로 지원합니다.레이아웃 구성이 더 유연해졌으며, layout.js 파일을 통해 중첩 레이아웃을 쉽게 구현할 수 있습니다.서버 중심 라우팅을 채택하여 성능 최적화에 중점을 둡니다.App Router는 Pages Router에 비해 더 강력한 기능을 제공하며, Next.js의 미래 방향성을 대표합니다. 따라서 새로운 프로젝트를 시작할 때는..

아래는 Next.js 내부 API 라우트와 외부 API 호출 흐름을 시각적으로 표현한 다이어그램입니다.📌 클라이언트(사용자)에서 요청이 발생하면, 내부 API가 요청을 처리한 후 외부 API와 통신하는 방식[사용자 액션] ⬇️ 1️⃣ 페이지(TodoPage.tsx)에서 GET, POST, DELETE 요청 발생 ⬇️ 2️⃣ 내부 API (/api/todos)에서 요청을 처리하고 인증 및 캐싱 수행 ⬇️ 3️⃣ 내부 API에서 외부 API (https://newallsoft.shop/api/todos)로 실제 요청 전달 ⬇️ 4️⃣ 외부 API가 요청을 처리하고 응답 반환 ⬇️ 5️⃣ 내부 API에서 응답을 받아 클라이언트에 반환 ⬇️ 6️⃣ 클라이언트 UI에서..

1. App Router 구조Next.js 15의 App Router는 app/ 디렉토리 내의 파일과 폴더 구조를 통해 라우팅을 정의합니다. 주요 파일과 그 역할은 다음과 같습니다:page.tsx: 해당 경로의 페이지를 정의합니다. 예: app/page.tsx → / 경로.layout.tsx: 해당 경로와 하위 경로에 적용되는 레이아웃을 정의합니다. 예: app/layout.tsx → 전체 애플리케이션의 기본 레이아웃.error.tsx: 오류 발생 시 표시되는 오류 페이지를 정의합니다.loading.tsx: 로딩 중일 때 표시되는 UI를 정의합니다.route.tsx: API 엔드포인트를 정의합니다.폴더를 추가하면 경로가 자동으로 생성됩니다. 예를 들어, app/blog/page.tsx는 /blog 경로를..

1. 환경 설정Node.js 및 npm 설치:Node.js 공식 홈페이지에서 최신 LTS 버전을 다운로드 및 설치합니다.터미널에서 다음 명령어로 버전을 확인하여 올바르게 설치되었는지 확인합니다.node -vnpm -v2. 프로젝트 생성Next.js는 기본적으로 React를 포함하고 있으므로 별도로 React를 설치할 필요 없이 Next.js를 통해 프로젝트를 시작할 수 있습니다.create-next-app 사용:터미널에서 아래 명령어를 입력하여 새 프로젝트를 생성합니다.@latest 옵션은 최신 버전의 create-next-app을 사용함을 의미합니다.참고:"my-next-project"는 프로젝트 이름입니다. 원하는 이름으로 변경할 수 있습니다.옵션 선택:명령어 실행 후 CLI에서 TypeScript,..

React + Next.js특징 및 장점서버 사이드 렌더링(SSR) 및 정적 사이트 생성(SSG) 지원으로 SEO 최적화와 빠른 초기 로딩 성능 제공[1][7][19].파일 기반 라우팅 시스템으로 복잡한 설정 없이 페이지 관리 가능[1][18].API 라우트 기능을 통해 백엔드 로직을 프론트엔드 프로젝트 내에서 통합 가능[2][18].Vercel 플랫폼과의 통합으로 간편한 배포 및 서버리스 함수 지원[1][18].단점Node.js 환경 의존성으로 인해 정적 호스팅 외 추가 인프라 관리 필요[1].학습 곡선이 가파르며, 프레임워크의 의존성으로 커스터마이징 제약 발생[8][18].적합 사례블로그, 뉴스 사이트 등 SEO가 중요한 콘텐츠 플랫폼[7][19].대규모 애플리케이션에서의 성능 최적화 및 풀스택 개발..

아래는 React와 TypeScript를 사용하여 로그인 후 인증 정보를 관리하는 예시 코드입니다. 이 예제에서는 Context API와 커스텀 훅을 사용해 전역 인증 상태를 관리하며, localStorage에 토큰을 저장해 새로고침 시에도 인증 정보를 유지할 수 있도록 합니다.1. 인증 Context 및 Provider 생성먼저, 인증 정보를 담을 Context와 Provider를 만듭니다.파일: src/contexts/AuthContext.tsximport React, { createContext, useState, useEffect, ReactNode } from 'react';// 사용자 정보 타입 정의 (필요에 따라 확장 가능)interface User { id: number; name: s..

아래는 React Router와 앞서 만든 인증 로직(예: Context, useAuth 훅 등)을 활용하여, 페이지에 진입하기 전에 인증 여부를 확인하고 인증되지 않은 경우 경고창을 띄운 후 로그인 페이지로 리다이렉트하는 예시입니다.1. ProtectedRoute 컴포넌트 만들기설명:ProtectedRoute 컴포넌트는 자식 컴포넌트를 렌더링하기 전에 useAuth를 통해 로그인 여부를 체크합니다. 인증되지 않은 상태라면 alert 창을 띄운 후 로그인 페이지로 이동시킵니다.파일: src/components/ProtectedRoute.tsximport React from 'react';import { Navigate } from 'react-router-dom';import { useAuth } fro..

## 1. 현재 React 버전 확인```bashnpm list react```## 2. React 및 관련 패키지 업데이트```bash# 최신 React 버전 설치npm install react@latest react-dom@latest# 타입스크립트 React 타입 업데이트npm install @types/react@latest @types/react-dom@latest```## 3. Vite 구성 업데이트`vite.config.ts` 파일에서 React 플러그인 설정 확인:```typescriptimport { defineConfig } from 'vite'import react from '@vitejs/plugin-react'export default defineConfig({  plugins: ..