정훈's 프로그래밍

// 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..

아래는 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: ..

React에서 Link 컴포넌트는 React Router 라이브러리에서 제공하는 중요한 기능으로, SPA(Single Page Application)에서 페이지 간 이동을 처리하는 데 사용됩니다. Link는 브라우저의 기본적인 페이지 리로드 없이 경로를 변경하고 새로운 UI를 렌더링합니다. 아래는 Link 사용법을 단계별로 설명합니다.1. React Router 설치React Router는 Link 컴포넌트를 제공하는 라이브러리입니다. 먼저 프로젝트에 설치해야 합니다.npm install react-router-dom2. 기본적인 프로젝트 구조 설정BrowserRouter를 사용하여 라우팅을 활성화합니다.import React from "react";import ReactDOM from "react-do..

createBrowserRouter는 React Router v6.4 이상에서 소개된 데이터 중심 라우팅 기능을 제공하는 함수로, 브라우저 기반의 라우터를 생성합니다. 기존의 보다 라우터 구성과 데이터 로딩에 대한 제어를 더 세밀하게 할 수 있습니다.1. 기본 개념createBrowserRouter는 라우트 정의를 통해 브라우저 라우터를 생성하며, 이를 로 연결하여 애플리케이션에 적용합니다.2. 설치React Router를 설치해야 합니다.npm install react-router-dom3. 기본 사용법다음은 createBrowserRouter의 기본적인 사용법입니다.App.tsximport React from "react";import ReactDOM from "react-dom/client";imp..

interface SectionTemplateProps { title: string; imageSrc: string; children: React.ReactNode;}export default function SectionTemplate({ title, imageSrc, children,}: SectionTemplateProps) { return ( {title} {children} );} import SectionTemplate from "./SectionTemplate";export default function AnotherPage() { return ( {/* 변경될 내용 ..

import { atom, selector } from 'recoil';import axios from 'axios';export interface Todo { id: number; title: string; completed: boolean;}// Atom for managing todosexport const todosState = atom({ key: 'todosState', default: [],});// Selector to fetch todos from serverexport const todosSelector = selector({ key: 'todosSelector', get: async () => { try { const response = await axios..

윈도우 크기 변화에 따라 메뉴 열기/닫기import { useEffect, useState } from "react";import AnteInterdum from "../widgets/anteInterdum/AnteInterdum";import CopyRight from "../widgets/copyRight/CopyRight";import GetInTouch from "../widgets/getInTouch/GetInTouch";import Menu from "../widgets/menu/Menu";import Search from "../widgets/search/Search";function Sidebar() { const [isMenuOpen, setIsMenuOpen] = useState(..

useState & Record(type script)를 활용한 상태 관리import { useState } from "react";function Menu() { const [toggleSubMenu, setToggleSubMenu] = useState>({}); const handleToggleSubMenu = (menuName: string) => { setToggleSubMenu((prevState) => ({ ...prevState, [menuName]: !prevState[menuName], })); } return ( Menu ..