클라이언트 사이드 셋업
npx create-react-app
을 이용해서 리액트 프로젝트를 만듭니다.
react router를 npm install --save react-router-dom
을 이용하여 설치합니다.
react router의 Quick Start의 예제 코드를 참고하여, 기본적인 라우팅이 제대로 작동하는지 확인합니다.
import React from 'react';
import logo from './logo.svg';
import './App.css';
import {
BrowserRouter as Router,
Switch,
Route,
Link
} from "react-router-dom";
function App() {
return (
// <div className="App">
// <header className="App-header">
// <img src={logo} className="App-logo" alt="logo" />
// <p>
// Edit <code>src/App.js</code> and save to reload.
// </p>
// <a
// className="App-link"
// href="https://reactjs.org"
// target="_blank"
// rel="noopener noreferrer"
// >
// Learn React
// </a>
// </header>
// </div>
<Router>
<div>
<nav>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
<li>
<Link to="/users">Users</Link>
</li>
</ul>
</nav>
{/* A <Switch> looks through its children <Route>s and
renders the first one that matches the current URL. */}
<Switch>
<Route path="/about">
<About />
</Route>
<Route path="/users">
<Users />
</Route>
<Route path="/">
<Home />
</Route>
</Switch>
</div>
</Router>
);
}
function Home() {
return <h2>Home</h2>;
}
function About() {
return <h2>About</h2>;
}
function Users() {
return <h2>Users</h2>;
}
export default App;
정상 작동 확인
서버 사이드 셋업
create-react-app의 build 기능을 이용해 리액트 프로젝트를 빌드합니다.
그런데, 빌드는 왜 하는 걸까요? 각자 고민해보세요!
npm run build
새로운 폴더에서 서버 프로젝트를 하나 만듭니다.
mkdir server
npm init -y
express를 설치합니다.
npm install express --save
클라이언트에서 빌드한 파일들을 적당한 폴더에 복사해 넣습니다. (보통 폴더 이름을 public
이라고 짓습니다.)
서버 코드를 작성하여, http://localhost:8080/ 과 같은 URL로 접근할 때 클라이언트 파일들이 접근 가능하도록 만듭니다. (다시한번 말씀드리지만, create-react-app의 yarn start를 이용하는 것이 아닙니다)
힌트: express에서 정적 파일 제공 https://expressjs.com/ko/starter/static-files.html 문서를 참고합니다.
//경로 연결
path.join(__dirname, '/test') // /home/dirname/test
//APP.js
function App() {
return (
<Router>
<div>
<nav>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
<li>
<Link to="/users">Users</Link>
</li>
</ul>
</nav>
{/* A <Switch> looks through its children <Route>s and
renders the first one that matches the current URL. */}
<Switch>
<Route path="/about">
<About />
</Route>
<Route path="/users">
<Users />
</Route>
<Route path="/">
<Home />
</Route>
</Switch>
</div>
</Router>
);
}
function Home() {
return <h2>Home</h2>;
}
function About() {
return <h2>Abou</h2>;
}
function Users() {
return <h2>Users</h2>;
}
라우터 예시를 참조 하여 만들어보겠다.
빌드란???? 첫 빌드 뿐아니라 클라이언트가 수정 될 때 마다 배포가 필요시 빌드후 서버쪽으로 보내야 한다. 만약에! 클라이언트 에서 수정이 일어났지만 ! 빌드 해서 주지 않는다면 아무리 서버를 구동시켜도 그전에 작업한 모습만 보여준다.