해당 프로젝트 깃 허브
참고 블로그 (저자님)

• 과거
  기존에는 사용자가 다른 페이지로 이동할 때마다 서버로부터 새로운 html을 받아오는 방식을 사용하였다. 하지만 이제는 웹에서 제공되는 정보가 매우 많아짐에 따라서 서버 측에서 모든 View를 준비하면 성능상의 문제가 발생한다.
• 현재
  따라서 React와 같은 라이브러리, 혹은 프레임워크는 View 렌더링을 사용자의 브라우저가 담당하도록 하고, 우선 애플리케이션을 브라우저에 불러와서 실행시킨 후, 사용자와의 인터렉션이 발생하면 필요한 부분만 JS를 사용해 업데이트 하는 방식으로 바뀌었다. 만약 새로운 데이터가 필요하다면, 서버 API를 호출하여 필요한 데이터만 불러온다.

1. SPA란 ?

Single Page Application (싱글 페이지 애플리케이션)의 약어로써, 말 그대로 한 개의 페이지로 이루어진 애플리케이션이다.
하지만 '싱글 페이지' 라고 해서 화면이 한 종류는 아닐 것이다. 예를 들어 블로그를 개발한다면 홈, 포스트 목록, 포스트, 글쓰기 등의 화면이 존재할 것이고, 해당 페이지에서 로딩된 JS와 현재 사용자 브라우저의 주소 상태에 따라 다양한 화면을 보여줘야 할 것이다.

2. 라우팅

따라서 다른 주소에 다른 화면을 보여주는 것을 라우팅이라고 한다. React 라이브러리 자체에 이 기능이 내장되어 있지는 않다. 그 대신, 브라우저의 API를 직접 사용하여 이를 관리하거나, 라이브러리 (React-router, Reach-router, Next.js) 를 사용하여 이를 간편히 구현할 수 있다.
이중 나는, React-Router를 사용할 것이고, 클라이언트 사이드에서 이루어지는 라우팅을 아주 간단하게 구현할 수 있도록 해준다.

3. SPA의 단점

1. 앱의 규모가 커지면 JS 파일이 너무 커진다는 것이다. 페이지 로딩 시 사용자가 실제로 방문하지 않을 수 있는 페이지의 스크립트도 불러오기 때문이다. 하지만 이를 "Code Splitting"을 사용하면 라우트별로 파일들을 나누어서 트래픽과 로딩속도를 개선시킬 수 있다.
2. JS를 실행시키지 않은 일반 크롤러에서는 페이지의 정보를 제대로 수집하지 못할 수도 있다. 구글 검색 엔진에서 사용하는 크롤러의 경우 자바스크립트를 실행해주는 기능이 탑재되어 있긴 하지만, 크롤링하는 모든 페이지에서 JS를 실행하고 있지는 않다.

이러한 문제들을 서버 사이드 렌더링을 통해 모두 해결할 수 있다.

4. 라우터 적용해보기

1. 프로젝트 생성 및 라이브러리 설치

1. 프로젝트 생성

yarn create react-app blog-frontend

2. 해당 프로젝트 폴더로 이동 후 라우터 라이브러리 설치

yarn add  react-router-dom

2. 라우터 적용

1. 라우팅 페이지 만들기

총 다섯 개의 페이지를 만들 것이고, 라우트와 관련된 컴포넌트 들은 src/pages 디렉터리에 만든다.

• LoginPage.js - 로그인
• RegisterPage.js - 회원가입
• WritePage.js - 글쓰기
• PostPage.js - 포스트 읽기
• PostListPage.js - 포스트 목록

2. 엔트리파일에 Router 적용

그 후, 프로젝트 엔트리 파일인 index.js에서
BrowserRouter로 App컴포넌트를 감싼다.

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

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

// 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();

3. App.js 에 라우팅 적용하기

import React from 'react';
import { Route, Routes } from 'react-router-dom';
import './App.css';
import PostListPage from './pages/PostListPage';
import LoginPage from './pages/LoginPage';
import RegisterPage from './pages/RegisterPage';
import WritePage from './pages/WritePage';
import PostPage from './pages/PostPage';

function App() {
  return (
    <>
    <Routes>
      <Route element = {<PostListPage/>} path="/:username" exact/>
      <Route element = {<PostListPage/>} path="/" exact/>
      <Route element = {<LoginPage/>} path="/login"/>
      <Route element = {<RegisterPage/>} path ="/register"/>
      <Route element = {<WritePage/>} path = "/write"/>
      <Route element = {<PostPage/>} path = "/:username/:postId"/>
    </Routes>
    </>
  );
}

export default App;