Refactor: code splitting

[heony704]

문제
기존 코드는 통합된 하나의 빌드 파일을 가지기 때문에 TodoList 페이지를 로드할 때도 회원가입 폼이 로드되는 등 사용되지 않는 코드까지 한꺼번에 로드된다.

해결
페이지 별로 코드를 분할해 페이지에 필요한 코드만 로드한다.

1. webpack-bundle-analyzer와 cra-bundle-analyzer를 통해 빌드 파일 시각적으로 분석
2. Suspense와 lazy를 통해 컴포넌트를 동적으로 import해서 코드 분할 및 지연 로딩

추가

• Spinner 컴포넌트 style 변경

추가 의견
코드 분할로 인해 페이지마다 불필요한 코드가 로드되지는 않으나, 코드 분할 전보다 로드해야할 JavaScript 파일의 총 크기가 약간 늘어나 오히려 성능에 도움되지 않았다.
이건 코드 분할로 인해 감소되는 코드 크기보다 코드 분할로 인해 추가된 코드의 크기가 더 크기 때문이라고 생각된다.
코드가 크지 않다면 코드 분할을 적용하지 않는 것이 더 성능에 좋을 것으로 판단된다.
조금이라도 성능을 좋게 하려면 이 코드 분할은 하지 않는 것이 낫지만, 총 코드 크기가 크게 차이나지 않고 코드 분할에 대한 예제를 남기고자 merge한다.

[netlify]

✅ Deploy Preview for ordinary-todolist ready!

Name	Link
🔨 Latest commit	63b7155
🔍 Latest deploy log	https://app.netlify.com/sites/ordinary-todolist/deploys/653d320072dedb00083337d8
😎 Deploy Preview	https://deploy-preview-8--ordinary-todolist.netlify.app/
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.