1. 라우팅 최적화

2. API 호출 병렬 처리
3. UI개선 - 로딩 경험 개선
4. 반응형 디자인
5. API 통신 특이사항 - URL 구성 로직의 잠재적 위험 해결

src/App.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Outlet } from 'react-router-dom';
 import Navbar from './components/Navbar';
+import Loading from './components/Loading';
 import './App.css';
 
 function App() {
@@ -8,7 +9,9 @@ function App() {
         <div className="app-shell">
             <Navbar />
             <main className="site-main">
-                <Outlet />
+                <React.Suspense fallback={<div className="suspend-loading"><Loading /></div>}>
+                    <Outlet />
+                </React.Suspense>
             </main>
         </div>
     );