본문 바로가기

Web/JavaScript2

Webpack 5 Module Federation을 통한 Micro-Frontend 모놀리식(Monolithic)이냐 마이크로(Micro) 서비스냐 하는 애플리케이션 아키텍처 스타일은 팀의 컨벤션과 애플리케이션의 요구 사항에 따라 달라진다. 그럼에도 마이크로서비스 아키텍처가 대세로 떠오르고, 사용이 증가하고 있는데 그 이유가 무엇일까? 모놀리식 아키텍처는 하나의 패키지안에 여러 서비스(기능)가 포함된 구조를 말한다. 대부분의 개발자가 모놀리식 아키텍처에서 작업을 시작하곤 하지만, 이러한 구조에는 몇 가지 문제점이 있다. 피쳐 간 의존성 문제 1. 특정 피쳐에 버그 발생 시 다른 피쳐에도 문제가 발생할 수 있다. 2. 서로 의존하고 있는 피쳐들 사이에 발생한 문제의 원인이 어디에 있는지 파악하기 힘들 수 있다.3. 특정 피쳐가 수정되었을 때 다른 피쳐에서 문제가 발생할 수 있다.  비효율.. 2023. 3. 1.
이벤트 버블링(Event bubbling) 각 form, div, p 태그의 영역을 클릭하면 alert를 실행하는 코드를 작성하였습니다. 1. form 태그 영역(red)을 클릭할 경우 2. div 태그 영역(blue)을 클릭할 경우 3. p 태그 영역(green)을 클릭할 경우 위에서 자식 태그인 div태그를 클릭하면 div의 alert뿐만 아니라 부모 태그인 form의 alert까지 실행되는 것을 확인할 수 있었습니다. 따라서 p 태그를 클릭할 경우 p의 alert 발생 후 div, form 태그 순으로 실행될 것입니다. 이와 같이 자손 태그의 이벤트가 부모 태그에 전파되는 현상을 이벤트 버블링이라고 합니다. 그렇다면 이러한 현상을 막을 수 있는 방법은 무엇이 있을까요? stopPropagation event를 매개변수로 받은 후 event객.. 2022. 4. 14.