SPA 초기 설계 리팩터링

1. 불필요한 import 제거

변경전

// src/app.js

import Router from './router.js';
import App from './components/app.js';

// 라우터 초기화

Router();

export default App;

변경후

// src/app.js

import App from './components/app.js';

export default App;

위 코드에서 Router.js 파일에서 이미 Router 객체를 export하고 있으므로, App.js에서 다시 import하는 것은 불필요한 작업이다.

이 작업을 수행하면, Router.js 파일에서 이미 만들어진 Router 객체를 다시 만들게 되어 메모리 사용량이 증가하고, 불필요한 리소스 낭비가 발생한다.

따라서, Router.js 파일에서 이미 만들어진 Router 객체를 사용하는 것이 바람직하며, 이를 위해서는 App.js에서 Router를 import하는 코드를 제거하였고. 결과적으로 코드를 보다 간결하게 유지할 수 있고, 성능 문제를 예방할 수 있었다.

2. 불필요한 이벤트 핸들러 제거와 변수명, 함수명 변경

변경전

// src/components/app.js

import Router from '../router';
import Header from './Header/Header';
import Footer from './Footer/Footer';
import routes from '../routes'; 

const App = () => {
  const router = new Router();

  const render = () => {
    const appElement = document.getElementById('app');

    appElement.innerHTML = `
      ${Header()}
      ${router.getComponent()()} 
      ${Footer()}
    `;
  };

  window.addEventListener('load', render);
  window.addEventListener('popstate', render);
  // router.init();

  const app = {
    render
  };

  return app;
};

export default App;

// 라우터 초기화
// const router = new Router();
// router.init();

변경후

// src/components/app.js

import Router from '../router';
import Header from './Header/Header';
import Footer from './Footer/Footer';
import routes from '../routes';

const App = () => {
  const router = new Router();

  const renderApp = () => {
    const appElement = document.getElementById('app');

    appElement.innerHTML = `
      ${Header()}
      ${router.getComponent()()} 
      ${Footer()}
    `;
  };

  const onPopState = () => {
    render();
  };

  window.addEventListener('load', renderApp);
  window.addEventListener('popstate', onPopState);

  const app = { renderApp };

  return app;
};

export default App;

1. 변수명, 함수명 변경

App.js에서 render() 함수는 App 객체 내에 존재한다. 이때, 함수 이름이 의미를 명확하게 전달하지 못할 경우, 코드를 이해하거나 유지보수하기 어려워질 수 있다.

예를 들어, 현재 코드에서 render() 함수는 App 객체에 종속되어 있으며, 함수 이름만으로는 그 역할이 명확하지 않기 때문에, 함수 이름을 보다 명확한 이름으로 변경하여 코드를 이해하기 쉽게 만들어야 한다.

2. 불필요한 이벤트 핸들러 제거

app.js에서 load 이벤트와 popstate 이벤트에 모두 render() 함수를 등록하면, 같은 작업이 중복으로 실행될 수 있다.

따라서, load 이벤트와 popstate 이벤트에 각각 다른 함수를 등록하여, 필요한 작업을 수행할 수 있도록 해야한다.

onPopState 함수에서는 popstate 이벤트가 발생할 때 render() 함수를 호출한단. 이 때 render() 함수를 바로 호출하지 않고, onPopState 함수를 중간에 두는 것은, 나중에 popstate 이벤트가 발생했을 때 추가적인 작업이 필요할 경우 onPopState 함수에서 처리할 수 있도록 하기 위해서이다.

즉, render() 함수를 호출하는 것은 onPopState 함수와 load 이벤트에서 모두 수행되지만, 각각의 이벤트에서 추가적인 작업이 필요한 경우에는 onPopState 함수에서 처리하면 된다. 이를 통해 중복 코드를 제거하고, 가독성을 높일 수 있다.