완성본 1. 총 3가지의 버튼을 생성하기 alert("버튼클릭")} type={"positive"} /> alert("버튼클릭")} type={"negative"} /> alert("버튼클릭")} type={"default"} /> 2. MyButton을 컴포넌트화 시켜주기 : 위에서 text , type , onclick 을 파라미터 변수로 받아줘서 * btnType = > positive,negative 이 아닌 다른 값이 들어오면 강제로 "default" 로 변경해주는 함수. * MyButton.defaultProprs = > type값이없으면 "default" 로 만들어준다. const MyButton = ({text,type,onClick}) => { // positive 나 negative 아..
1. React 기본 경로 위치 => /public/** 와 같은역할 const env = process.env; env.PUBLIC_URL = env.PUBLIC_URL || ""; import "./App.css" import {BrowserRouter, Route, Routes} from "react-router-dom"; import Home from "./pages/Home" import New from "./pages/New"; import Edit from "./pages/Edit"; import Diary from "./pages/Diary"; function App() { const env = process.env; env.PUBLIC_URL = env.PUBLIC_URL || ""; r..
사용하기 1. 설치 npm npm install react-router-dom@6 🐳 App.js 로 돌아가서 import {BrowserRouter} from "react-router-dom"; 🐳 App.js 페이지 import "./App.css" import {BrowserRouter} from "react-router-dom"; function App() { return (
사용한 개발환경 * Spring_Boot 3.2.1 * Maria_db 8.xx (RDBMS) * Mybatis (Frame_Work) * LomBok * JAVA 17 * React App 생성 cd src/main npx create-react-app {프로젝트명} 위와 같이 리액트 앱이 실행되는 모습이 보인다. 나는 3000번 포트가 이미 사용중이어서 3001번으로 실행하였다. 아마 여러분은 localhost:3000으로 실행되었을 것이다. 프로젝트 연동 여기까지 잘 따라왔다면 React와 Spring Boot의 프로젝트가 각각 3000번과 8080번 포트에서 수행되는 모습까지 확인했을 것이다. 그렇다면 이제 두 프로젝트를 연동시켜보자. ⚡️ Proxy 설정 기본적으로 React 프로젝트는 3000..