코드 스플릿팅 을 하기위해서 패키지를 설치합니다.
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"));
으로 변경할 수 있습니다.
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
env: {
development: {
plugins: [
["@emotion", { sourceMap: true }],
require.resolve("react-refresh/babel"),
],
},