React + FastAPI로 JWT 인증 기반 이벤트 관리 시스템 만들기1. 개요React와 FastAPI를 연동하여 JWT 인증 기반 로그인 시스템을 구축하고, 인증된 사용자만 이벤트를 등록할 수 있게 했습니다. 추가로 이미지를 업로드하고 다운로드하는 기능도 구현했습니다.📁 구조├── frontend (React + Vite)│ ├── App.jsx│ ├── user/Login.jsx│ └── event/Regist.jsx, List.jsx, Detail.jsx└── backend (FastAPI) ├── main.py ├── routes/users.py, events.py ├── models/users.py, events.py └── uploads/2. FastAP..

React Router로 페이지 전환 구현React는 하나의 HTML에서 모든 화면을 관리하는 SPA(Single Page Application)입니다.이런 구조에서는 브라우저 주소(URL)에 따라 화면을 전환할 수 있도록 라우팅(Routing) 기능이 필요합니다.React Router는 이를 위한 공식 라이브러리로, 이번 글에서는 React Router의 개념과 실제 적용 방법을 정리합니다.React Router란?React Router는 브라우저 주소에 따라 특정 컴포넌트를 렌더링할 수 있게 해주는 라우팅 라이브러리입니다.전체 페이지를 새로고침하지 않고도 화면 전환을 자연스럽게 구현할 수 있도록 도와줍니다.설치 방법npm install react-router-dom※ 설치 후 모든 라우팅 기능은 re..

props와 이벤트 핸들러 정리React에서 컴포넌트 간 데이터 전달(props)과 사용자 입력 처리(이벤트 핸들러)는 가장 기본적이면서도 중요한 개념입니다.이 글에서는 props의 개념과 사용법, 그리고 이벤트 핸들러 작성 및 최적화 방법까지 예제 중심으로 정리합니다.props란?props는 부모 컴포넌트가 자식 컴포넌트에 값을 전달할 때 사용하는 속성입니다.함수의 매개변수처럼 컴포넌트에 값을 전달하고 사용할 수 있으며, 읽기 전용입니다.// App.jsxfunction App() { return ( );}// User.jsxfunction User({ name, age }) { return ( 이름: {name} 나이: {age} );}..

React JSX 기초 문법 정리1. useState로 상태 관리하기useState()는 React 함수형 컴포넌트에서 상태(state)를 선언하고 관리할 수 있게 해주는 Hook입니다.import { useState } from 'react';function App() { const [count, setCount] = useState(0); return ( 카운터 예제 현재 값: {count} setCount(count + 1)}>+1 증가 );}※ const [변수이름, 변경함수] = useState(초기값) 형식은 구조 분해 할당을 통해 상태(state) 값을 선언하는 방법입니다.※ [count, setCount]는 구조 분해 할당이며, count는 ..

React 앱 생성부터 상태 관리1. Vite로 React 프로젝트 만들기npm create vite my-app✔ Select a framework: › React✔ Select a variant: › JavaScriptcd my-appnpm installnpm run dev※ http://localhost:5173에서 브라우저로 바로 확인 가능2. Vite 프로젝트 구조 요약my-app/├── index.html├── package.json├── vite.config.js├── public/├── src/│ ├── App.jsx│ └── main.jsx※ React 컴포넌트는 src 폴더에서 작성됨3. 함수형 컴포넌트와 useStatefunction MyButton() { const [i..