Personal Portfolio(문제 수정)

클라이언트 사이드 셋업
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 참조

//경로 연결   
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>;
}

라우터 예시를 참조 하여 만들어보겠다.

mdl
SPA 참조

빌드란???? 첫 빌드 뿐아니라 클라이언트가 수정 될 때 마다 배포가 필요시 빌드후 서버쪽으로 보내야 한다. 만약에! 클라이언트 에서 수정이 일어났지만 ! 빌드 해서 주지 않는다면 아무리 서버를 구동시켜도 그전에 작업한 모습만 보여준다.