Flask - React JWT Login Sample

물론입니다! 여기서는 Flask를 백엔드로 사용하고, React를 프론트엔드로 사용하여 JWT 기반 로그인을 구현하는 예제를 보여드리겠습니다. 이 예제에서는 Flask API 서버에서 JWT를 발급하고, React에서 이를 이용해 로그인, 인증된 API 호출을 수행하는 방식으로 구현할 것입니다.1. Flask 백엔드 (API 서버)설정 및 JWT 라이브러리 설치먼저, 필요한 라이브러리를 설치해야 합니다.pip install Flask Flask-JWT-Extended Flask-CorsFlask-JWT-Extended는 JWT를 쉽게 다룰 수 있도록 도와주는 라이브러리입니다. Flask-Cors는 CORS 정책 문제를 해결하기 위해 사용합니다.Flask 백엔드 코드:from flask import Fla..

  • format_list_bulleted [====== Development ======]/React
  • · 2024. 10. 28.
  • textsms

부모 컴포넌트에서 자식 컴포넌트 함수 사용하기 ( useImperativeHandle, forwardRef )

부모 컴포넌트에서 자식 컴포넌트 함수 사용하기 ( useImperativeHandle, forwardRef ) https://kkj6670.github.io/board/react/imperativeHandle 부모 컴포넌트에서 자식 컴포넌트 함수 사용하기 ( useImperativeHandle, forwardRef ) 개발을 하다보니 부모컴포넌트에서 자식 컴포넌트에 있는 input에 접근하여 사용해야할 일이 생겼다.생각해보니 그동안 개발하면서 이렇게 사용할일이 없었어가지고 어떻게 해야할지 고민하다 kkj6670.github.io

  • format_list_bulleted [====== Development ======]/React
  • · 2022. 8. 21.
  • textsms

CSS Flex에 대한 설명

https://studiomeal.com/archives/197 이번에야말로 CSS Flex를 익혀보자 이 튜토리얼은 “차세대 CSS 레이아웃” 시리즈의 첫번째 포스트입니다. 이번에야말로 CSS Flex를 익혀보자 이번에야말로 CSS Grid를 익혀보자 벌써부터 스크롤의 압박이 느껴지고,‘좀 편안하게 누 studiomeal.com

  • format_list_bulleted [====== Development ======]/React
  • · 2022. 8. 14.
  • textsms

[React] 반응형으로 브라우즈 크기가 작아지면 SideBar가 사라지도록 하는 코드

참고 : https://mui.com/material-ui/customization/breakpoints/#theme-breakpoints-up-key-media-query import { styled } from '@mui/material/styles'; // screen width가 lg(large: 1200px) 보다 크면 width에 280 적용 const DRAWER_WIDTH = 280; const RootStyle = styled('div')(({ theme }) => ({ [theme.breakpoints.up('lg')]: { flexShrink: 0, width: DRAWER_WIDTH, }, })); fuction SidebarComponent(){ return ( .... ); }

  • format_list_bulleted [====== Development ======]/React
  • · 2022. 8. 11.
  • textsms

React Styled component

styled.ts import styled from "styled-components"; import Box from "@mui/material/Box"; export const MyBox = styled(Box)({ marginTop: 100, display: "flex", flexDirection: "column", alignItems: "center", }); index.tsx import * as S from "./styled"; export const Sample = () => { return ( Sign In ); };

  • format_list_bulleted [====== Development ======]/React
  • · 2022. 8. 10.
  • textsms
[Meterial UI] Stack , Button

[Meterial UI] Stack , Button

import Stack from "@mui/material/Stack"; import Button from "@mui/material/Button"; Text Contained Outlined Contained Outlined Outlined Contained Outlined Contained

  • format_list_bulleted [====== Development ======]/React
  • · 2022. 8. 10.
  • textsms