index.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="libs/css/index.css" />
    <title> Vanila JS like React </title>
</head>

<body>

    <div class="root"></div>
    
    <script src="<https://unpkg.com/axios/dist/axios.min.js>"></script>
    <script type="module" src="../public/index.js"></script>
</body>

</html>
  1. root 에 우리의 page가 들어 간다.
  2. css는 head에서 title위에 두자.
  3. 스크립트는 body 의 가장 하단에 두자.

index.js

import { getStorage, setStorage } from "./libs/storage.js";
import load from "./router.js"

const url = getStorage('url');
load(url ? url : 'login');

  1. JS의 기본 설정을 해준다. (추후에 알아보자)

    ex) 통신설정

    1. axios : session ID를 매번 바꾸기에 설정해줘야 한다.
    2. SameSite: 크롬의 쿠키 보안 정책(cross-site) 관련 설정해줘야 한다.

  2. html 파일을 열 때 sessionStorage 의 저장된 url 페이지로 연결한다.

내가 설계한 router.js

import { $ } from "./libs/util.js";

const load = async (url) => {
		
		window.sessionStorage.setStorage('url', url);

    const root = $(".root");
    root.innerHTML = ``;
    
    switch(url){
        case 'login':
            root.appendChild(await Login());
            break;
        case 'home':
            root.appendChild(await Home());
            break;
        default:
            root.innerHTML = url;
    }
}

export default load;

  1. html의 root 를 초기화하고 우리의 페이지 객체를 추가시킨다.

  2. 새로운 페이지로 이동할 때 sessionStorage 에 url를 저장하여 화면 새로고침을 하여도 패이지가 유지 된다.

  3. appendChild 쓰는 이유

    eventListener를 적용시키기 위해선 객체가 추가되어야 한다. innerHTML만 추가하면 이벤트가 적용되지 않는다.

  4. async / await 쓰는 이유

    페이지 객체를 만드는 과정에서 데이터를 axios 통신으로 가져 올 수 있다. await 하여 데이터를 수신하고 페이지 객체를 root에 추가한다.

개선해야할 점.

  1. 실제 url를 라우팅 하지 않는다.