백엔드에서 구현한 부분을 사용하기 위한 로그인, 회원가입, 리디렉션을 구현해야 함

백엔드로 HTTP 요청을 보냈을 떄 403이 날아오면 로그인 페이지로 리디렉트 해야함

& 로그인 후 백엔드 서비스에게 받은 토큰 어딘가에 저장해둬야 하고, HTTP 요청 보낼 떄마다 헤더에 Bearer 토큰으로 지정해줘야 함

라우팅

react-router-dom 설치함 (아래 라우팅 위해)

보통 브라우저는 서버-사이드 라우팅( 서버에서 html 페이지를 반환함)으로 동작하는데 이 애플리케이션은 클라이언트-사이드 라우팅(서버로 어떠한 요청도 날리지 않고 클라이언트 코드가 해결함)을 사용함

⇒ 애플리케이션이 브라우저에서 필요한 모든 소스를 가진다..!

따라서 처음 http://localhost:3000으로 접속하면 모든 페이지, 자바스크립트, CSS 리소스와 라우팅 로직 모두 브라우저로 반환된다

그 다음 페이지 접속은 리액트 라우터가 가로채서 URL 해석한 후 렌더링함

로그인 컴포넌트

import { KeyboardReturnSharp } from "@mui/icons-material";
import React from "react";
const Login = () =>{
    return(
        <p>로그인 페이지</p>
    );
}
export default Login;

페이지 만듦

import React from "react";
import "./index.css";
import App from "./App";
import Login from "./Login";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import { Typography, Box } from "@mui/material";

function Copyright(){
    return(
        <Typography variant="body2" color = "textSecondary" align="center">
            {"Copyright 0"}
            fsoftwareengineer, {new Date().getFullYear()}
            {"."}
        </Typography>
    );
}
function AppRouter(){
    return(
        <div>
            <BrowserRouter>
                <Routes>
                    <Route path="/" element={<App/>} />
                    <Route path = "login" element = {<Login/>}/>
                </Routes>
            </BrowserRouter>
            <Box mt={5}>
                <Copyright/>
            </Box>
        </div>
    );
};
export default AppRouter;

<BrowserRouter> 로 브라우저가 관리하는 히스토리 사용해서 리액트 사이 URL을 동기화한다

성공창