안녕하세요!
말씀하신 동적으로 HTML을 구성하는 것이 바로 CSR 개념이에요.
이는 React, Vue 혹은 Angular와 같은 모던 자바스크립트 라이브러리 & 프레임워크가 추구하는 렌더링 방식이기도 하구요. 물론 장점만 있는 것은 아니지만, CSR로 어플리케이션을 구성했을 때의 핵심 장점은 페이지 이동간 페이지 리로드 현상(SSR의 단점)이 발생하지 않는다는 것이에요. 아무래도 이런 측면에서 사용자의 UX가 좀 더 향상되겠지요.
이 부분에 대해서 잘 이해하고 싶으시면 vanilila javascript spa라는 키워드로 검색해보시면 돼요!
검색 결과 참고하시면 자바스크립트만을 사용해서 동적으로 HTML을 생성해내는 CSR 방식의 웹 구현을 해보실 수 있으실거에요.
아마 Webpack을 사용한 예제들이 많을텐데요, 사실 이 부분은 Webpack을 사용하지 않고도 index.html에 아래와 같은 예시의 스크립트를 추가함으로써 동일한 동작을 하게끔 만들 수 있어요.
<html>
<head></head>
<body>
<nav class="navbar">
<ul>
<li>
<a href="/">home</a>
</li>
<li>
<a href="/about">about</a>
</li>
</ul>
</nav>
<div id="root"></div>
<script type="module">
import App from "App.js";
window.addEventListener("DOMContentLoaded", function () {
new App(document.querySelector("#root"));
});
</script>
</body>
</html>
예컨대 App.js에 router.js라는 자바스크립트 파일이 import되어 있고 App 함수 내에 router.js에 들어있는 특정 함수를 실행하는 코드가 있다면, 이와 같은 방식으로 모든 자바스크립트 파일(모듈)들을 연결해서 사용할 수 있겠지요.
vanilila javascript spa 검색 결과를 참고하셔서 직접 구현해보시면 좀 더 이해가 빠르실 것 같습니다.
아참, 함수나 클래스의 경우에는 하나의 파일(모듈)에 하나씩만 선언해서 쓰는 게 아무래도 일반적인 것 같아요!
두서없이 막 말씀드린 거 같은데, 질문하신 거에 맞게 답변을 드렸는지 모르겠네요.
혹시라도 더 궁금하신 점 있으시면, 댓글 남겨주세요!