상태 리팩토링, 정적인 값 컴포넌트로 이동

public/src/components/footer.js

@@ -1,19 +1,13 @@
-import store from '../store.js';
-
 const Footer = () => `
   <footer>
-    ${StacksList()}
+    <ul class="stacks-list">
+      <li class="stacks-item">Vanilla JS</li>
+      <li class="stacks-item">Node.js v14.18.1</li>
+      <li class="stacks-item">Express.js v4.17.1</li>
+      <li class="stacks-item">Nodemon v2.0.13</li>
+      <li class="stacks-item">HTML5, CSS3</li>
+    </ul>
   </footer>
 `;
 
-const StacksList = () => `
-  <ul class="stacks-list">
-    ${store.state.stacks.map(StacksItem).join('')}
-  </ul>
-`;
-
-const StacksItem = ({ name, ver }) => `
-  <li class="stacks-item">${name} ${ver}</li>
-`;
-
 export default Footer;

public/src/components/header.js

@@ -1,5 +1,3 @@
-import store from '../store.js';
-
 const Header = () => `
   <header>
     <div class="header-wrap">
@@ -8,23 +6,16 @@ const Header = () => `
       </h1>
       <div class="service-wrap">
         <input type="text" class="search" placeholder="허브글, 채널 검색" />
-        ${ZumService()}
+        <ul class="service-menu">
+          <li><a href="#">뉴스</a></li>
+          <li><a href="#">TV</a></li>
+          <li><a href="#">허브</a></li>
+          <li><a href="#">쇼핑</a></li>
+        </ul>
+      <div class="login">로그인</div>
       </div>
     </div>
   </header>
 `;
 
-const ZumService = () => `
-  <ul class="service-menu">
-    ${store.state.serviceItems.map(ServiceItem).join('')}
-  </ul>
-  <div class="login">로그인</div>
-`;
-
-const ServiceItem = ({ link, content }) => `
-  <li>
-    <a href=${link}>${content}</a>
-  </li>
-`;
-
 export default Header;

public/src/components/home.js

@@ -5,7 +5,14 @@ const Home = () => `
     <h1 class="blind">줌 허브 홈</h1>
     <nav class="nav-menu">
       <h2 class="blind">전체 메뉴</h2>
-      ${MenuList()}
+      <ul class="menu-list">
+        <li class="menu-item">HOME</li>
+        <li class="menu-item">라이프</li>
+        <li class="menu-item">푸드</li>
+        <li class="menu-item">여행</li>
+        <li class="menu-item">컬쳐</li>
+        <li class="menu-item">즐겨찾기</li>
+      </ul>
     </nav>
     ${Life()}
     ${Food()}
@@ -15,16 +22,6 @@ const Home = () => `
   </main>
 `;
 
-const MenuList = () => `
-  <ul class="menu-list">
-    ${store.state.menuItems.map(MenuItem).join('')}
-  </ul>
-`;
-
-const MenuItem = ({ title }) => `
-  <li class="menu-item">${title}</li>
-`;
-
 const Life = () => `
   <section class="contents-section">
     <h2 class="tag-title">#라이프</h2>

public/src/store.js

@@ -1,26 +1,5 @@
 const store = {
   state: {
-    serviceItems: [
-      { link: '#', content: '뉴스' },
-      { link: '#', content: 'TV' },
-      { link: '#', content: '허브' },
-      { link: '#', content: '쇼핑' },
-    ],
-    menuItems: [
-      { title: 'HOME' },
-      { title: '라이프' },
-      { title: '푸드' },
-      { title: '여행' },
-      { title: '컬쳐' },
-      { title: '즐겨찾기' },
-    ],
-    stacks: [
-      { name: 'Vanilla JS', ver: '' },
-      { name: 'Node.js', ver: 'v14.18.1' },
-      { name: 'Express.js', ver: 'v4.17.1' },
-      { name: 'Nodemon', ver: 'v2.0.13' },
-      { name: 'HTML5, CSS3', ver: '' },
-    ],
     life: [],
     food: [],
     trip: [],