위 링크에서 Node.js를 다운받는다.
18.16.0 LTS 버전을 다운받았다.
프로젝트를 생성할 폴더에 가서
cmd를 입력한다.
cmd창에서 위처럼 입력하여 프로젝트를 생성하자.
폴더가 생성된 것을 확인할 수 있다.
vscode에서 폴더열기에서 방금 만든 폴더를 선택하고
cd front01로 경로를 지정하고 npm start를 입력하여 실행시킨다.
cdm에 위처럼 뜨고
리액트창이 뜨면 성공.
이렇게 실행해도 된다.
Hello React!!를 작성하면
Hello React!!가 적힌다.
npm i axios, npm i react-router-dom을 입력하여
axios와 react-router-dom을 설치한다.
src에 components폴더를 생성하고 About.js, Board.js, Home.js를 생성한다.
import React from 'react';
function App() {
return(
<div>
<h3>홈화면</h3>
</div>
);
}
export default App;
Home.js
import React from 'react';
function App() {
return(
<div>
<h3>about</h3>
</div>
);
}
export default App;
about.js
import React from 'react';
function App() {
return(
<div>
<h3>board</h3>
</div>
);
}
export default App;
board.js를 작성한다.
import './App.css';
import Home from './components/Home'
import Board from './components/Board'
import About from './components/About'
import { Link, Route, Routes } from 'react-router-dom';
function App() {
return (
<div>
<div>
<Link to="/">Home</Link>
<Link to="/about">About</Link>
<Link to="/board">Board</Link>
</div>
<hr />
<Routes>
<Route path="/" element={ <Home/> } />
<Route path="/about" element={ <About/> } />
<Route path="/board" element={ <Board/> } />
</Routes>
</div>
);
}
export default App;
App.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();
index.js를 이렇게 수정한다.
이렇게 뜨면 성공.
Home을 누르면 홈화면, About 누르면 about, Board를 누르면 board가 뜬다.
<div className='App'>
<div>
<Link to="/">Home</Link> /
<Link to="/about">About</Link> /
<Link to="/board">Board</Link>
</div>
이렇게 수정하면
이렇게 중간정렬이 된다.
import './App.css';
이 부분이 중간정렬이 포함되어있는 거 같다.
import React from 'react';
function App() {
const name = "가나다";
return(
<div>
<h3>about</h3>
asdf
asdfasdf
{name}
</div>
);
}
export default App;
About.js에 이렇게 추가해보았다.
About을 누르니 이렇게 바뀐 모습을 볼 수 있다.
import axios from 'axios';
import React, { useEffect } from 'react';
function App() {
// postman으로는 잘됨.
// Acess-Control-Allow-Origin => CORS문제 => 같은 서버가 아니면 rest자료를 받을 수 없다.
// 함수 생성
// async function selectList() { }
const selectList = async () => {
const url = `/web02/api/board/select.json?page=1`
const headers = {"Content-Type":"application.json"};
const { data } = await axios.get(url, {headers});
console.log(data);
}
// 화면이 로딩될 때
useEffect( () => {
selectList(); // 함수 호출하기
},[])
return(
<div>
<h3>board</h3>
</div>
);
}
export default App;
Board.js를 수정한다.
const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = function(app) {
app.use(
'/web03/api',
createProxyMiddleware({
target: 'http://127.0.0.1:8080',
changeOrigin: true,
})
);
};
setupProxy.js를 생성하여 위처럼 작성한다.
그 뒤에 cdm에서 Ctrl + C를 눌러 종료한 후 npm start로 다시 실행해보자.
오류가 뜨지 않는다면 정상적으로 잘 연결이 되었다는 뜻이다.
...
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"homepage": "./resources/react"
}
package.json 파일에 위 코드를 추가한다.
(백엔드에 css,js 등을 위치시킬 폴더명 지정)
npm build를 실행한다.
index.html을 제외한 모든 파일을
resources - react에 넣고
index.html은 webapp에 넣는다.
그 후에 npm start 리액트를 실행시키고
http://127.0.0.1:8080/web02/index.html 링크에 접속하면
vscode로 작성해서 나온 창과 같은 화면이 나온다.
Git ignore에 Node를 설정하고
다른 pc에서 받아서 사용할 때 cmd에서 npm install을 실행시켜 Node를 복구시키면 된다.