DO MY BEST

css in js (emotion, styled component)

       - styled component와 비교하면 emotion이 설정이 더 간단하다.

       - emotion이 서버사이드 렌더링할 때도 좀 더 쉽다.

emotion 초기설정

※ @emotion/core에서 @emotion/react로 바뀌었다.

emotion 문법  

export const Label = styled.label`
	margin-bottom:17px;
    ...
    & > span {   // &가 Label을 표현한다. 즉 Label의 자식인 span을 다음과 같이 정의한다로 해석된다.
    	...
    }
 `;

이것을 하기 위해서는 

을 해야한다.

그리고, webpack.config.ts에 

...
    module: {
    	rules: [
        	{
            	test:
                loader:
                options: {
                	presets: [
                    	
                    ],
                    env: {
                    	develtopment: {
                        	plugins: [['@emotion', { sourceMaps: true }], ...] <- 이게 필요
                        },
                    },
                },
            },
        ],
    }

설명

필요없는 컴포넌트들은 처음에 불러오지 않도록 하고, 필요한 컴포넌트들은 그때그때 불러오게 하는 기법.

어떤 컴포넌트들을 불러와야하나

  - 페이지들을 분리한다.(쉬운 기준)

        ex) 로그인 페이지에 와 있는데 굳이 회원가입 페이지를 미리 불러올 필요가 없는 경우가 있으면 로그인 페이지와 회원가입 페이지는 코드스프리트 해도 된다.

   - 서버사이드 렌더링이 필요없는 것들

        ex) 규모가 큰 텍스트 에디터들 같은 경우에는 굳이 서버에서 렌더링할 필요가 없다.

import LogIn from '@pages/LogIn';
import SignUp from '@pages/SignUp';

에서

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

로 바꾼다. 이렇게 하면 코드 스프리팅을 언제 할지, 언제 불러올지를 크게 고민할 필요 없이 알아서 불러온다.

추천

  페이지 단위로 코드 스프리팅 하는것을 추천한다고 한다.

오류 내용

오류 해결

•  npm i ~ 뒤에 ' --save --legacy-peer-deps '를 추가를 하면 된다.