react-helmet

헤더를 관리할 수 있는 라이브러리 이다.

seo 친화적이기 위해서 head태그에 정보를 입히는 작업은 필수적이다. 이를 쉽게 적용할 수 있도록 react-helmet을 사용해보았다.

다음과 같이 설정해주어도 되지만, 라우팅에 따른 동적인 타이틀을 넣고자 한다면 다음과 같이 해서는 안된다.

// webpack plugin에 의해 새롭게 만들어진 html 파일

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Juunzzi Editor</title>
  <script defer src="main.js"></script></head>
  <body>
    <div id="root"></div>
  </body>
</html>

// src/containers/App/index.tsx
import React from 'react';
import SEO from '@/containers/SEO';
function App() {
  return (
    <div>
      <SEO></SEO>
    </div>
  );
}

export default App;

// src/components/SEO/index.tsx
import React from 'react';
import Helmet from 'react-helmet';
function index() {
  return <Helmet title="준찌에디터"></Helmet>;
}

export default index;

다음과 같이 타이틀이 변경되었다.

라우팅

라우터(Router)는 이름 그대로 네트워크와 네트워크 간의 경로(Route)를 설정하고 가장 빠른 길로 트래픽을 이끌어주는 네트워크 장비, 중계기이다.

React에서 Router는 클라이언트 사이드 렌더링을 지원하는 중계기가 된다. MPA 방식처럼 라우팅에 따른 페이지를 서버가 만들어 클라이언트에게 주는 것이 아니라, SPA 방식으로 라우팅에 따른 페이지를 클라이언트가 그린다.

페이지를 새롭게 불러오지않는 상황에서 각각의 라우팅에 따라 UI를 그려주기 위해 React Router를 이용할 수 있다.

CSR로 동작하기 위해
React Router의 Link 컴포넌트를 활용하면 된다.

a태그로 작성하면 서버에 html을 요청하고 새롭게 로드 받는다. 즉, MPA 방식 처럼 새롭게 html 자원을 로드하기 때문에 깜빡거림이 생긴다.

import EditorPage from '@/containers/EditorPage';
import { routes } from '@/routes';
import React from 'react';
import { Switch, Route, BrowserRouter, Link } from 'react-router-dom';

function Router() {
  return (
    <BrowserRouter>
      {/* <Link to={routes.EDITOR}>hi</Link> */}
      <a href={routes.EDITOR}>hi</a>
      <Switch>
        <Route path={routes.EDITOR} exact component={EditorPage}></Route>
      </Switch>
    </BrowserRouter>
  );
}

export default Router;

Link 태그로 작성하면 클라이언트 사이드 렌더링이 적용되어, 새롭게 html을 요청하는 것이 아닌 js 파일을 보고 라우팅에 맞는 UI를 그려주게 된다.(컴포넌트를)

import EditorPage from '@/containers/EditorPage';
import { routes } from '@/routes';
import React from 'react';
import { Switch, Route, BrowserRouter, Link } from 'react-router-dom';

function Router() {
  return (
    <BrowserRouter>
      <Link to={routes.EDITOR}>hi</Link>
      <Switch>
        <Route path={routes.EDITOR} exact component={EditorPage}></Route>
      </Switch>
    </BrowserRouter>
  );
}

export default Router;

react-router-dom vs react-router

리액트 라우터란 클라이언트 사이드에서 주소값 변경에 따라 페이지 혹은 컴포넌트의 변화를 제공하기 위한 라이브러리이다.

리액트 라우터는 코어까지 들어있는 master 브랜치에 있는 라이브러리임. -> 코어 모듈임

리액트 라우터 돔은 그중에서 돔이 인식할 수 있는 컴포넌트들만 뺀 라이브러리임. Link → a태그로 렌더링되는.

코어까지 필요하지 않다면 react routuer dom 을 사용하는 것이 좋음.

HashRouter vs BrowserRouter

브라우저 라우터는

A that uses the HTML5 history API (pushState, replaceState and the popstate event) to keep your UI in sync with the URL.

HTML5의 history API를 활용해서 UI를 업데이트한다.
동적 페이지에 적합하다. 서버에 있는 데이터들을 스크립트로 가공한 후 생성되어 전달되는 웹페이지 → 서버 데이터를 가지고 만드는 페이지
새로 고침하면 경로를 찾지 못해 에러가 발생한다. -> react앱에는 경로가 있으나, 서버에는 없는 경우

해시 라우터는

Hash history does not support location.key or location.state.

주소에 해쉬가 붙는다. : example.com/#/messages/messages
검색엔진이 읽지 못한다.
정적인 페이지에 적합하다. (미리 만들어진 페이지가 그대로 보여지는 웹 페이지)
HashRouter은 URL 해시를 서버에서 읽을 수 없기 때문에 Server Side Rendering으로 설정을 백업할 수는 없다. # 이후 주소는 이해할 수 없다.

React-Router의 주요 컴포넌트

핵심컴포넌트
- Route → 가장중요한 Low Level 컴포넌트이다. 해당경로가 현재 경로와 일치할때 UI를 렌더링한다.
- BrowserRouter → history API를 주입하여 history API를 사용한 라우팅 할 수 있도록 해준다.
- Link → 페이지를 전환 , a태그로 컴파일된다. (Client Side Render)
- Switch → 여러 라우팅 경로가 존재할때 경로와 일치하는 경로만 표시해주는 역할을 한다. 여러 Route를 합성할때 사용한다.

Quick Start

import EditorPage from '@/containers/EditorPage';
import { routes } from '@/routes';
import React from 'react';
import { Switch, Route, BrowserRouter, Link } from 'react-router-dom';

function Router() {
  return (
    <BrowserRouter>
      <Link to={routes.EDITOR}>hi</Link>
      <Switch>
        <Route path={routes.EDITOR} exact component={EditorPage}></Route>
      </Switch>
    </BrowserRouter>
  );
}

export default Router;

export

-> 파일의 이름과 디렉토리 명이 내보내기의 기준이 되지 않는다.

-> 내보내기 하는 이름을 기준으로 import에 사용된다. 자동완성.

size exceeds the recommended limit

WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB). This can impact web performance. Assets: app.bundle.js (964 KiB)

빌드하고 배포환경으로 실행하면, 위와 같은 에러가 발생한다.

다음과 같이 수정할 수 있다.

  
   performance: {
    hints: false,
  // 엔트리 포인트 사이즈를 정해둔다.
  maxEntrypointSize: 512000,
  // maxAssetSize도 추가한다.
    maxAssetSize: 512000
}

Ref

Author And Source

이 문제에 관하여([21/09/23-24] Junzzi Editor 프로젝트 셋팅 - (3) head, router 설정, webpack 에러, export(모듈 내보내기)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@rat8397/210919-Junzzi-Editor-프로젝트-셋팅-3-head-router-설정

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

[21/09/23-24] Junzzi Editor 프로젝트 셋팅 - (3) head, router 설정, webpack 에러, export(모듈 내보내기)