프론트엔드를 위한 리액트 프로젝트 만들기

1. PowerShell이나 터미널에서 새 리액트 앱 만든다

npx create-react-app carfront

 

 

2. 프로젝트로 폴더 이동 후 머티리얼 UI 컴포턴트 라이브러리 설치

cd carfront
npm install @mui/material @emotion/react @emotion/styled

 

 

3. 앱 실행

npm start

 

 

4. VS code에서 src 폴더 열고 App.js 파일 작성

 

import logo from "./logo.svg";

import "./App.css";

import AppBar from "@mui/material/AppBar";

import Toolbar from "@mui/material/Toolbar";

import Typography from "@mui/material/Typography";

function App() {

  return (

    <div className="App">

      <AppBar position="static">

        <Toolbar>

          <Typography variant="h6">Carshop</Typography>

        </Toolbar>

      </AppBar>

    </div>

  );

}

export default App;

 

 

 

결과물

 

 

 

 

 

 

mui 사이트 이용해서 쉽게 프론트엔드 모형 수정할 수 있다.

 

App Bar React component - Material UI

 

 

 

 

 

---

 

 

 

 

스프링부트 백엔드 준비

 

 

 

SecurityConfig

configure 메서드 수정하기

@Override
protected void configure(HttpSecurity http) throws Exception { 

http.csrf().disable().cors().and()
.authorizeHttpRequests().anyRequest().permitAll();
}