기본 용어 및 정리(Switch, SPA, TS, 코드 스플리팅, emotion.js, webpack, babel)

Switch

    <Switch>
      <Redirect exact path="/" to="/login" />
      <Route path="/login" component={LogIn} />
      <Route path="/signup" component={SignUp} />
    </Switch>

Switch는 하나를 키면 다른건 꺼지듯이 위 코드에서는 반드시 3개 중에서 1개만 선택 가능하다. 즉 여러 개의 라우터 중에서 딱 하나의 라우터만 표시해준다.

Route는 컴포넌트를 화면에 띄워주는 것이다.

Redirect는 다른 페이지로 돌려준다. 위 코드에서는 url이 /로 끝나면 /login으로 돌려준다. 따라서 /이나 /login이면 path가 login이다.

 

    <BrowserRouter>
      <Switch>
        <Redirect exact path="/" to="/login" />
        <Route path="/login" component={LogIn} />
        <Route path="/signup" component={SignUp} />
      </Switch>
    </BrowserRouter>

<BrowserRouter>을 해주지 않으니까 에러가 발생했었다.

 

SPA 구동 방식

SPA는 url이 없다. 오로지 index.html만 사용한다. 그래서 url 뒤에 /하고 주소를 붙쳐주는 것은 History API 덕분이다. 그래서 History API를 이용해서 가짜 주소를 만들어 준다. 새로고침하면 주소는 프론트로 안가고 서버로 간다. 근데 서버는 오로지 한 주소만 알고있다. 이 실습에서는 localhost3090만 알고 있는 것이다. 그렇기에 서버는 / 뒤에 나오는 것은 다 무시한다. 따라서 원래라면 새로고침을 하면 메인 페이지인 index.html로 간다. 이를 방지해주는 것이 webpack.config.ts에서 devServer의 historyApiFallback: true로 하면된다.

 

Ts

타입스크립트는 쉽게 말해서 변수, 매개변수, 함수의 리턴값에 타입을 줄 수 있는 것이다.

import React, { FC } from 'react';

const App: FC = () => {}

여기서 FC가 타입이다. 

타입은 웬만하면 안쓰는게 좋다.

 

코드 스플리팅(loadable)

import loadable from '@loadable/component';

const LogIn = loadable(() => import('@pages/LogIn'));
const SignUp = loadable(() => import('@pages/SignUp'));

3초 안에 사이트를 못보여주면 사람들이 떠난다는 말이 있다. 컴포넌트가 많아지면 점점 느려질 것이다. 그렇기에 LogIn 페이지에서 SignUp 컴포넌트를 import 해줄 필요가 없어서 loadable을 사용한다. 이 코드는 페이지 단위로 코드 스플리팅을 해준다.

 

emotion.js

emotion.js는 CSS-in-JS의 종류 중 하나로 js 안에서 스타일을 작성할 수 있게 해준다. emotion.js는 주로 Framework Agnostic(쉽게 말하면 프레임워크를 사용하지 않는 것)과 React 두 가지 방식으로 사용된다.

export const Header = styled.header`
  text-align: center;
  font-family: Slack-Larsseit, Helvetica Neue, Helvetica, Segoe UI, Tahoma, Arial, sans-serif;
  font-weight: 700;
  font-size: 48px;
  line-height: 46px;
  letter-spacing: -0.75px;
  margin-top: 50px;
  margin-bottom: 50px;
`;

원칙으로는 내가 어떤 컴포넌트를 쓸거다 그런데 그 컴포넌트에 위 코드처럼 미리 css를 입혀놓는 것이다.

 

webpack

webpack는 여러 개의 파일을 하나로 합쳐주는 모듈 번들러이다. webpack는 모듈을 지원하고 파일 분할 기능, css 로더 기능, jsx 변환을 해준다. 여러 개로 나줘져있는 js 파일을 하나의 js 파일로 합쳐주는 역할을 한다. 만약 파일이 많아지면 webpack이 번들러를 사용해 여러 파일을 하나로 묶어줘서 네트워크 접속의 부하를 줄여 빠른 서비스가 가능하다.

babel

babel은 js의 컴파일러이다. babel을 사용하는 이유는 최신 js 문법을 브라우저가 이해할 수 없어서 브라우저가 이해할 수 있는 문자로 바꿔준다. 그리고 모든 브라우저가 최신 기능을 적용하지 않기에 babel이 구버전으로 바꿔주는 역할도 한다.