안녕하세요! 말씀하신 동적으로 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 검색 결과를 참고하셔서 직접 구현해보시면 좀 더 이해가 빠르실 것 같습니다. 아참, 함수나 클래스의 경우에는 하나의 파일(모듈)에 하나씩만 선언해서 쓰는 게 아무래도 일반적인 것 같아요! 두서없이 막 말씀드린 거 같은데, 질문하신 거에 맞게 답변을 드렸는지 모르겠네요. 혹시라도 더 궁금하신 점 있으시면, 댓글 남겨주세요!

다음 내용이 궁금하다면?

또는

이미 회원이신가요?

2023년 2월 21일 오후 2:51

조회 260

댓글 0