code splitting and emotion

코드 스플릿팅 을 하기위해서 패키지를 설치합니다.

yarn add @loadable/component
yarn add -D @types/loadable__componet

typescript를 사용할시 두번째 줄도 설치

import LogIn from "@pages/LogIn";

에서 다음과 loadable을 import 한뒤

@import loadable from "@loadable/component";
const LogIn = loadable(() => import("@pages/LogIn"));

으로 변경할 수 있습니다.

css in javascript

styled component 와 emotion
가장 유명한건 styled component지만 emotion이 설정이더 간단하여 emotion을 사용하겠습니다.

yarn add @emotion/react @emotion/styled

emotion styled 를 사용하기위해서 styled 를 가져 옵니다.

import styled from '@emotion/styled';

emotion 을 사용할때 template 문법을 사용하기 위해서 babel plugin 을 설치합니다.

yarn add @emtion/babel-plugin

webpack.config.js setup

webpack github Link!!

env: {
            development: {
              plugins: [
                ["@emotion", { sourceMap: true }],
                require.resolve("react-refresh/babel"),
              ],
            },