vanlia javascript 에서 router 구현

라우팅

• HASH방식으로 구현
  • anchor 태그를 사용한다. (url 정보에 #이 붙는다. )
  • /router/router.js 생성
  • 최초 진입은 index.html
  • uri : "/" , "/complete" 에 따라서 동적으로 index.htm에 있는 app-rootclass 에 template정보가 렌더링 된다.
  • DOMContentLoaded 될때 (서비스 실행 시) 최초로 render()가 호출 된 후 다음 로직이 실행된다.
  • hashchange 이벤트 리스너를 받아 uri hash 변경시(/#/complete) 해당 template가 렌더링 되며 점수를 보여주는 로직이 실행된다.

router.js

// router.js
    const root = document.querySelector('.app-root');
    const compTemplate = require('../complete.html');
    const gameTemplate = require('../game.html');

    const routes = {
      '': gameTemplate, 
      '/complete': compTemplate
      // '/complete': '/complete.html' /// 원래 index.html로 해서 (1)
    };
    
    /**
     * HTML 렌더링
     * @returns html
     */
    const render = async () => {
      try {
        const hash = location.hash.replace('#', '');
        const res = routes[hash];
        if (!res) { 
          //결과 값이 없을때 
          root.innerHTML = `${hash} Not Found`;
          return;
        }
        
  		//요기에서 불러오는 것도 가능하지만 webpack으로 말면 html을 가져올수없다 그래서 그냥 바로 require 로 가져와서 불러오기
  		// const res = await fetch(url); // 원래는 url로 html불러와서 렌더링하지만 난 그냥 바로 랜더링
      	// root.innerHTML = await res.text();
        root.innerHTML = res; 
        return hash;
      } catch (err) {
        console.error(err);
      }
    };
  
  export {
    render //index.js에서 쓰기위해 export하기
  }

index.js

//index.js 

import { render } from '../router/router.js'; //요래 갖고와서 


/**
 * 최초 로드 (init) -- 진입 시점 (index.html > game.html)
 */
 document.addEventListener('DOMContentLoaded', async() => {
    console.log('DOM Load - (index.js)');
    await render() //여기서 랜더링함 
    .then(response => {
        settingGame(response); //,,,이건 랜더링이후 다음로직 실행
    })

});


/**
 * url 변경될때 Hash Change
 */
window.addEventListener('hashchange', async() => {
    console.log("Event Listener :::::: HASH CHANGE::::: ")
    await render()
    .then(response => {
        settingGame(response); //,,,이건 랜더링이후 다음로직 실행
    })
    .catch(error => console.log(error));
});