
CSR์ ๋ํ์ ์ธ ์ด๊ธฐ ๋ก๋ฉ์๋๋ฅผ ๊ฐ์ ํ๊ธฐ ์ํ ์์
๋ค์ ์ํํด๋ณด์๋ค. 1. React.lazy์ Suspense ์ ์ฉํ๊ธฐ SPA์ ๋ํ์ ์ธ ๋จ์ ์ผ๋ก, ์ต์ด ๋ก๋์ ํ์ํ์ง ์์ ์ ์๋ ๋ชจ๋ ํ์ผ์ ๋ค์ด๋ฐ๊ธฐ ๋๋ฌธ์, ์ด๊ธฐ ๋ก๋ฉ์๋๊ฐ ๊ธธ์ด์ง๋ค๋ ์ ์ด ์๋ค. ์ด๋ฅผ ๊ฐ์ ํ๊ธฐ ์ํ ๋ํ์ ์ธ ํด๊ฒฐ๋ฐฉ๋ฒ์ค ํ๋๊ฐ lazy Loading์ด๋ค. ๋์ load ํด๋น ๋ชจ๋์ด ํ์ํ ๋๋ง ๋ก๋ → ์ฝ๋ ์คํ๋ฆฌํ
(code splitting)๊ณผ ์ง์ฐ ๋ก๋ฉ(lazy loading)์ ๊ฐ๋ฅ → ์ฌ์ฉ์๊ฐ ํน์ ํ์ด์ง๋ ๊ธฐ๋ฅ์ ์ ๊ทผํ ๋ ํ์ํ ๋ฆฌ์์ค๋ง ๋ค์ด๋ก๋๋ฉ๋ฅ์ํ ์๋น์ค์ ๋ผ์ฐํธ๋ ๋ค์๊ณผ ๊ฐ์ด ์ ์๋์ด ์๋ค.const PATHS = { main: "/main", logIn: "/", signUp: "/signup", f..