개발자

자바스크립트 모듈화와 동적요소 생성 사용 예시가 궁금합니다.

2023년 02월 21일조회 227

안년하세요. 자바스크립트를 공부하던도중 모둘화와 동적태그생성 기능을 어떻게 써야할까 고민을 해봤지만 답을 찾기어려워 질문을 올립니다. 모듈화의 개념은 이해했는데 기능을 어떤단위로 구분지어야할지는 너무 추상적이네요 ㅠㅠ 웹팩?을 많이 사용하는거 같은데 웹팩을 사용하지않고 바닐라 자바스크립트로todo웹을 만든다고 가정했을때 재사용이 가능한 이벤트함수등을 따로 파일을 만들어서 분리하면 되는걸까요 ?? 또한 동적으로 요소를 추가할때 SSR과CSR과 연관이 되는것같은데 자바스크립트로 동적으로 Html문서를 구성하는건 어떤상황에서 진행해야하는지 궁금합니다. 설명이 부족해서 죄송합니다..

이 질문이 도움이 되었나요?
'추천해요' 버튼을 누르면 좋은 질문이 더 많은 사람에게 노출될 수 있어요. '보충이 필요해요' 버튼을 누르면 질문자에게 질문 내용 보충을 요청하는 알림이 가요.

답변 2

인기 답변

김석현님의 프로필 사진

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

박장환님의 프로필 사진

박장환

작성자

QA Engineer2023년 02월 22일

좋은설명과 자료공유 감사합니다!! 과거 자바를 할때 모듈화라는게.. 너무 추상적이었는데 또 이렇게보니까 복잡한개념은 아니였네요 ㅎㅎ.. 공유해주신 내용과 깃허브, 구현을 해보면서 감을 익혀가겠습니다. 부족한 글에 상세하게 답변 달아주셔서 감사합니다 :)

김석현님의 프로필 사진

김석현

QANDA Frontend Engineer2023년 02월 22일

정정드릴 게 있는데요! 생각해보니 마지막에 말씀드렸던 모듈의 단위는 상황에 따라 조금 다를 것 같아요. 예를 들어 계산기관련 함수들을 모듈로 만든다고 하면, add, subtract, multiply, divide라는 함수들을 각각 파일단위로 쪼개기보다는 하나의 파일에 정의하는 것이 코드 관리나 사용하는 측면에서도 좀 더 편할 것 같아요. 따라서 나누는 기준의 정답은 없을 것 같고, 상황에 맞게 비슷한 기능 단위(함수)를 하나의 파일에 모아서 쓰시면 될 것 같아요! 다만 저라면 클래스의 경우에는 하나의 파일에는 하나의 클래스만 정의해서 쓸 것 같습니다. 정리하면, 함수: 상황에 따라 파일당 1개 이상 클래스: 파일당 1개 정도로 정의해서 쓰시면 되지 않을까 싶어요!

박장환님의 프로필 사진

박장환

작성자

QA Engineer2023년 02월 22일

프로젝트나 코드설계에따라서 달라질수 있겠네요 !! 상세하게 집어주셔서 감사합니다 !!

인기 답변

손정현님의 프로필 사진

안녕하세요! 개인적으로 기본 JS는 MDN 문서를 많이 참고하는데요. 모듈과 동적인 HTML 요소 생성에 대해서도 잘 설명되어 있는 것 같습니다. 한번 참고해보시면 좋을 것 같아요. - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules 깃허브 예시도 있는데, HTML을 보시면 body 부분은 모두 빈 깡통이고 모듈 파일을 불러와서 동적으로 DOM요소들을 생성해주고 있습니다. - https://github.com/mdn/js-examples/tree/main/module-examples 동적으로 요소를 추가하는건 생각보다 자주 사용되는데요. 간단한 예시로 요즘 프론트엔드에서 많이 사용되는 react나 next의 경우도 HTML body에 동적으로 요소들을 추가하는 방식으로 동작합니다. - https://ko.reactjs.org/docs/rendering-elements.html#rendering-an-element-into-the-dom 기능적으로 조금 축소해서 생각해본다면 여러 rich 텍스트 에디터들도 사용자가 기능을 사용할때마다 동적으로 DOM 요소들을 생성해줍니다. ex) h1~h3, p, image, code, li, ul, a 등등 자바스크립트 공부할때 자주 사용했던 링크도 같이 첨부할게요 :) - https://ko.javascript.info/

박장환님의 프로필 사진

박장환

작성자

QA Engineer2023년 02월 22일

마크다운도 동적요소였다니 .. 선생님 덕분에 좋은내용 알아갑니다 !! MDN과 구글링을 해보았지만 간단한 예제와 이론적인 내용만 가득해서 토이프로젝트에서 어떻게 활용해볼까 고민을 많이 해보았습니다. 좋은설명과 자료공유 감사합니다:)

지금 가입하면 모든 질문의 답변을 볼 수 있어요!

현직자들의 명쾌한 답변을 얻을 수 있어요.

또는

이미 회원이신가요?

목록으로
키워드로 질문 모아보기

실무, 커리어 고민이 있다면

새로운 질문 올리기

지금 가입하면 모든 질문의 답변을 볼 수 있어요!