2024-04-17

• setupProxy.js

// setup파일은 변경을 하게 되면 서버를 재구동

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function (app) {
    app.use(
        '/api',
        createProxyMiddleware({
            target: `http://1.234.5.158:13000/api`,
            changeOrigin: true, // csrf
        })
    )
}

• Home.js

import React from 'react';

const Home = () => {
    return (
        <div>
            <h3>메인화면</h3>
        </div>
    );
};

export default Home;

• Login.js

import React from 'react';

const Login = () => {
    return (
        <div>
            <h3>로그인</h3>
        </div>
    );
};

export default Login;

• Join.js

import React from 'react';

const Join = () => {
    return (
        <div>
            <h3>회원가입</h3>
        </div>
    );
};

export default Join;

• App.js

import { Route, Routes } from 'react-router-dom';
import Home from './components/Home'
import Login from './components/Login'
import Join from './components/Join'

function App() {
  return (
    <div>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/login" element={<Login />} />
        <Route path="/join" element={<Join />} />
      </Routes>
    </div>
  );
}

export default App;

• index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

import { HashRouter } from 'react-router-dom';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <HashRouter>
    <App />
  </HashRouter>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: <https://bit.ly/CRA-vitals>
reportWebVitals();