프런트엔드/리엑트21 React Router 중첩 라우팅 실습 React Router 공식 템플릿은 타입스크립트를 기반으로 파일 중심의 라우팅 구성을 제공합니다. 이 글에서는 /about 및 /contact 페이지를 새로 추가하고, 이를 중첩 라우팅 구조로 확장하는 과정을 설명합니다.1. 새 라우트 컴포넌트 생성// app/routes/about.tsxexport default function About() { return 소개 페이지입니다;}// app/routes/contact.tsxexport default function Contact() { return 문의 페이지입니다;}2. routes.ts 설정 확장path() 함수는 실험적 모듈에서 제공되지 않기 때문에 객체 형식으로 작성합니다.import { type RouteConfig, index } fro.. 2025. 4. 25. React Router 공식 템플릿에서 routes.ts가 다르게 보이는 이유 React Router를 학습하며 기본적으로 createBrowserRouter를 사용하는 방식에 익숙한 분들은, 공식 템플릿에서 routes.ts가 다르게 보이는 점에 당황할 수 있습니다.1. 템플릿에서 사용된 코드 예시import { type RouteConfig, index } from "@react-router/dev/routes";export default [index("routes/home.tsx")] satisfies RouteConfig;이 구성은 React Router 팀에서 실험적으로 제공하는 파일 기반 라우팅 설정을 사용하고 있는 방식입니다.2. @react-router/dev/routes란?@react-router/dev/routes는 라우팅을 파일 경로 기반으로 자동 추론할 수 있.. 2025. 4. 24. React 프로젝트에 라우팅 적용하기: React Router v7 기본 사용법 React에서 페이지 이동과 라우팅을 구현하려면 React Router를 사용하는 것이 일반적입니다. 이 글에서는 React Router v7을 기반으로 간단한 라우팅 구조를 만드는 방법을 소개합니다.1. Vite로 React 프로젝트 생성npm create vite@latest my-router-app -- --template reactcd my-router-appnpm install2. React Router 설치npm install react-router-dom@latest3. 페이지 컴포넌트 만들기아래와 같이 두 개의 페이지 컴포넌트를 만듭니다.// src/pages/Home.jsxexport default function Home() { return 홈 페이지입니다}// src/pages/Ab.. 2025. 4. 23. React Router v7 입문부터 실전까지: Next.js 스타일로 배우는 단계별 가이드 1단계: React 프로젝트 및 라우팅 기본프로젝트 생성: create-react-app 또는 vite로 SPA 프로젝트 시작React Router 설치: npm install react-router-dom@^7기본 라우팅 구성: BrowserRouter, Routes, Route를 활용페이지 컴포넌트 구성: /pages/Home.jsx, /pages/About.jsx 형식2단계: 중첩 라우팅과 레이아웃createBrowserRouter 사용으로 중첩 라우트 구성Outlet 컴포넌트로 자식 라우트 삽입Header, Footer 등 공통 레이아웃 구성3단계: 데이터 로딩loader: 라우팅 전에 데이터를 불러옴useLoaderData: 페이지 내부에서 데이터 접근Suspense: 비동기 로딩 처리4단계: .. 2025. 4. 23. Next.js 공통 레이아웃 구성하기: Header, Footer 분리와 적용 1. 공통 레이아웃이 필요한 이유Next.js 프로젝트에서 페이지마다 반복되는 UI(Header, Footer 등)가 있다면, 이를 Layout 컴포넌트로 분리해 재사용할 수 있습니다.이 방식은 유지보수성과 개발 효율성을 크게 향상시켜줍니다.2. 폴더 구조 설계/pages _app.js index.js about.js/components Layout.js Header.js Footer.js3. Layout 컴포넌트 생성// components/Layout.jsimport Header from './Header';import Footer from './Footer';export default function Layout({ children }) { return ( {.. 2025. 4. 21. Next.js에 Tailwind CSS 적용하기 (최신 버전 대응 가이드) 1. Tailwind CSS란?Tailwind CSS는 유틸리티 클래스 기반으로 빠르게 UI를 구성할 수 있는 CSS 프레임워크입니다. 컴포넌트마다 별도 CSS를 작성하지 않고, HTML 클래스만으로 스타일링이 가능합니다.2. 설치 명령어npm install -D tailwindcss postcss autoprefixer설치 후 다음 명령어로 초기화합니다:npx tailwindcss init -p3. 초기화 시 에러 발생 (해결 방법)npx tailwindcss init -p 실행 시 아래와 같은 에러가 발생할 수 있습니다:npm ERR! could not determine executable to run이 에러는 Tailwind CSS 실행 CLI가 설치되지 않았을 때 발생합니다.해결 방법기존 패키지 .. 2025. 4. 21. 이전 1 2 3 4 다음
