FrontEnd/Vue.js3 [Nuxt.js] Cannot use <template> as component root element because it may contain multiple nodes. 문제상황 Nuxt에서 아래와 같은 구문을 사용하면, Show Not Show 다음과 같은 에러가 발생한다. Cannot use as component root element because it may contain multiple nodes. 원인 파악 에러구문 그대로 template 태그는 component의 루트 엘리먼트로 사용하지 못하기 때문인데, template 태그는 여러 개의 노드를 가지기 때문이다. 맨 처음 에러가 발생했을 때, 에러메세지를 정확하게 읽어보지 않고 html 자체를 렌더링하는 최상위 컨테이너 template 하위에서 다중 노드를 반환하지 않는 에러인 줄 알았으나, template 하위에도 template을 사용하지 못한다는 에러였다.. + ) 착각했던 에러는 이것이었다. Com.. 2023. 11. 19. [Vue.js] SPA로 동작하는 Vue에서 DOMContentLoaded SPA 환경에서의 DOMContentLoaded 동작 SPA 환경에서는 아래와 같은 DOMContentLoaded 시점에 IntersectionObserver를 추가해주는 로직을 적용하는 과정이 의도한 것과 같이 동작하지 않는다. document.addEventListener("DOMContentLoaded", function() { var lazyImages = [].slice.call(document.querySelectorAll("img.lazy")); if ("IntersectionObserver" in window) { let lazyImageObserver = new IntersectionObserver(function(entries, observer) { entries.forEach(func.. 2022. 11. 7. [Vue.js] v-html 대체하기 v-html이란? v-text(이중 중괄호, mustaches) 디렉티브는 HTML이 아닌 일반 텍스트로 데이터를 해석한다. 따라서 아래 코드는 그대로 텍스트로 보여지게 된다. Using mustaches: {{ rawHtml }} Using mustachs: This should be red. v-html을 사용하면 태그가 포함된 문자열을 HTML로 출력해줄 수 있다. Using v-html directive: Using v-html directive: This should be red. v-html의 문제점 웹사이트에서 임의의 HTML을 동적으로 렌더링하면 XSS취약점으로 쉽게 이어질 수 있다. 따라서 신뢰할 수 있는 콘텐츠에서만 HTML 보간을 사용하고 사용자가 제공한 콘텐츠(유저로부터 입력받는 부.. 2022. 8. 6. 이전 1 다음 반응형
