SPA, ROUTER,서버사이드

오늘은 리액트로 포트폴리오를 만들면서 배워가는 개념들을 정리 하겠습니다.

이번 포트폴리오를 만들면서 조건이 있습니다.
1. React를 사용해야 합니다.
2. SPA(Single Page App)로 만들어야 합니다.
3. 클라이언트 상에서 페이지 라우팅을 적용하십시오(React Router)
4. create-react-app의 build 기능을 이용해 리액트 프로젝트를 빌드합니다

위의 4가지 조건을 충족하는 포트폴리오를 만들어 봅시다 .

1. SPA(Single Page App)

단일페이지를 뜻 한다.
한개의 페이지로만 이루어진 애플리케이션이며 페이지 전환이 AJAX로 이루어진다. 필요한 데이터만 비동기 적으로 받게 해 트래픽 총량을 줄이는 형태이다.

2. 라우팅 적용시키기

라우팅을 하기 위해서는 먼저 설치를 해줘야 한다.

$ npm install react-router-dom

라우팅 문법이다.

import React from "react";
import { // 국률 불러와야함
  BrowserRouter as Router,
  Switch,
  Route,
  Link
} from "react-router-dom";

export default 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>About</h2>;
}

function Users() {
  return <h2>Users</h2>;
}

라우터를 해주면 페이지 깜박이는 전환없이 웹 ui를 바꿔준다.

3.빌드하기

클라이언트 부분을 빌드 하여 서버에서 express를 통해 실행하면 npm start를 하지 않아도 우리가 만든 리액트 페이지를 작동 시킬 수 있다.

제일먼저 빌드를 해줘야한다. !

$ npm run build 

빌드를 실행하면 build라는 파일이 만들어 진다.
그파일의 내용물을 public이라는 폴더를 만들고 담아준다.

const path = require('path');
const express = require('express');
const cors =require("cors");
const app = express();
const port = 8080;

app.use(cors());
app.use(express.static(__dirname + "/public"));
//__dirname = 디렉토리의 절대 경로
app.get("/*", function (req, res) {
  res.sendFile(path.join(__dirname, "public", "index.html"));
});
app.listen(port); 

위와 같이 소스를 입력후 서버를 실행하면 npm start를 하지않고 ,
주소창에 localhost:8080을 입력해도 리액트가 실행된다.
이것이 서버사이드 이다.