FastAPI에서 JWT 토큰을 이용한 로그인 인증 구현1. JWT란?JWT(Json Web Token)는 서버가 사용자 인증을 위해 발급하는 토큰으로, 사용자 정보를 암호화하여 클라이언트에 전달하는 방식입니다.클라이언트는 이 토큰을 Authorization: Bearer 형태로 서버에 전달하고, 서버는 토큰을 검증하여 인증 여부를 판단합니다.JWT는 다음의 3부분으로 구성됩니다.Header: 알고리즘, 토큰 타입Payload: 사용자 정보 및 만료 시간 등 클레임Signature: 헤더 + 페이로드를 비밀키로 암호화한 서명Claim 종류iat: 발급 시간exp: 만료 시간sub: 사용자 ID 등 식별 정보헤더: 토큰 타입(typ)과 암호화 방법(alg)을 보관하는 곳으로 BASE64로 인코딩페이로드:..

FastAPI + React로 회원관리 시스템 구축 (MySQL 연동)MySQL 설치아래 링크를 참고하여 MySQL과 Workbench를 설치합니다. https://myanjini.tistory.com/entry/MySQL-8034-MySQL-Workbench-80-설치 스키마 생성MySQL Workbench에서 fastapiuser 사용자로 접속한 상태에서 아래 쿼리를 실행합니다.CREATE SCHEMA `fastapidb` DEFAULT CHARACTER SET utf8;실행이 완료되면 왼쪽 SCHEMAS 목록에서 fastapidb가 생성된 것을 확인할 수 있습니다.MySQL 연동 설정 (database/connection.py)# 데이터베이스 설정from sqlmodel import SQLModel..

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

React와 Python 연결React로 작성한 프론트엔드와 FastAPI로 구성한 백엔드를 연결하여 데이터를 주고받는 구조는 실제 서비스 개발에서 가장 기본적이면서도 중요한 흐름입니다.이번 글에서는 React에서 입력한 데이터를 FastAPI로 전송하는 과정을 실습하고, 중간에 발생했던 CORS 에러 문제와 해결 방법까지 정리합니다.프론트엔드: React 입력 폼 작성사용자가 이벤트 정보를 입력하면 해당 데이터를 FastAPI 서버로 전송하도록, 다음과 같은 컴포넌트를 작성했습니다.// src/event/Regist.jsximport { useState } from "react";import axios from "axios";function Regist() { const [form, setForm] ..

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

Axios란? JavaScript에서 사용하는 HTTP 통신 라이브러리웹 애플리케이션을 개발하다 보면, 서버로부터 데이터를 받아오거나 서버에 데이터를 보내야 할 때가 많습니다.이럴 때 사용하는 대표적인 도구가 바로 Axios입니다.Axios는 JavaScript 기반의 HTTP 클라이언트 라이브러리로, 주로 React와 같은 프론트엔드 환경에서 많이 사용됩니다.1. Axios란?Axios는 Promise 기반의 HTTP 클라이언트로, 브라우저와 Node.js 모두에서 동작합니다.서버와의 비동기 통신을 보다 간단하고 직관적으로 작성할 수 있도록 도와줍니다.주요 특징Promise 기반으로 비동기 처리가 용이자동으로 JSON 데이터 변환요청 및 응답 인터셉터 지원요청 취소, 타임아웃, 응답 스키마 지정 가능브..