파이썬 내가이겨

지금 백엔드 api연결이 안되어서 위에 메뉴들과 비밀번호 초기화가 넘어가지 않는 상황.임시테스트 용으로 코드를 바꿔봄 메뉴 설정// useCategory.ts 수업 내용/*import { useState, useEffect } from 'react';import { Category } from '../models/category.model';import { fetchCategory } from '../api/category.api';export const useCategory = () => { const [category, setCategory] = useState([]); useEffect(() => { fetchCategory().then((category) => { console..

라우트 작성(페이지, 링크를 타고 이동하는 경로)https://www.npmjs.com/package/react-router-dom react-router-domDeclarative routing for React web applications. Latest version: 7.5.2, last published: 3 days ago. Start using react-router-dom in your project by running `npm i react-router-dom`. There are 23706 other projects in the npm registry using react-router-dom.www.npmjs.comhttps://www.npmjs.com/package/@types/rea..

기본 컴포넌트 작성title 컴포넌트// Title.tsximport styled from "styled-components";import { ColorKey, HeadingSize } from "../../style/theme";interface Props{ children : React.ReactNode; size: "large"| "medium" | "small"; color?: ColorKey;}function Title({children, size, color}: Props) { return( {children} );}const TitleStyle = styled.h1>`font-size: ${({theme, size}) => the..

레이아웃 구성 Pico CSS • Minimal CSS Framework for semantic HTMLMinimal CSS Framework for Semantic HTML A minimalist and lightweight starter kit that prioritizes semantic syntax, making every HTML element responsive and elegant by default. Write HTML, Add Pico CSS, and Voilà!picocss.com >>인덱스에 css를 넣는 방법 //App.tsx방법1import Layout from "./components/layout/Layout";import Detail from "./pages/Detail";..

프로젝트 환경 설치리액트 환경 툴은 두가지가 있다. (1)CRAC:\project>npx create-react-app book-store-c --template typescriptC:\project>cd book-store-cC:\project\book-store-c>ls //설치된 것 확인C:\project\book-store-c>npm run //어떤 코드를 사용할 수 있는지 알려줌npm start //리액트 시작(2) Vitenpm create vite@latest book-store-v -- --template react-tscd book-store-vnpm installnpm run dev >> (1)CRA 사용! 프로젝트 폴더(디렉토리) 구조pages - 라우트에 대응하는 페이지 컴포넌..

로그아웃 기능 구현하기 (Redux + Firebase)로그아웃 기능은 로그인과 함께 사용자 인증 흐름의 중요한 일부다.사용자가 로그아웃 버튼을 눌렀을 때, Firebase에서 인증 세션을 종료하고, Redux에 저장된 사용자 정보도 초기화해야 한다.Firebase에서는 로그아웃을 위한 전용 함수가 제공되며, 이를 통해 현재 로그인된 사용자의 세션을 종료할 수 있다. 로그아웃이 성공하면 Redux에서 사용자 정보를 비우는 액션을 함께 실행해줘야 한다. 이렇게 하면 앱 상태도 깔끔하게 초기화된다.마지막으로, 로그아웃 후에는 로그인 페이지나 메인 화면으로 리디렉션하는 흐름으로 마무리된다. 핵심 요약Firebase 인증 세션 종료Redux 사용자 상태 초기화로그아웃 후 페이지 이동 처리