본문 바로가기

FrontEnd92

[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.
[JavaScript] Axio GET에서 파라미터로 배열을 전송하는 방법 문제상황 Axios에서 GET 메소드로 아래와 같은 배열을 전달하면, request URL은 어떻게 될까? import axios from 'axios'; const arrayToSend = [1, 2, 3, 4, 5]; axios .get("https://example.com/api/data", { params: { test: arrayToSend } }) .then((response) => { console.log(response.data); }) .catch((error) => { console.error(error); }); https://example.com/api/data?test=[1,2,3,4,5]? HTML 삽입 미리보기할 수 없는 소스 위 CodeSandbox로 앱을 열어보면, 네트워크.. 2023. 7. 24.
[HTML/CSS] 쉐도우 돔(Shadow DOM) 내부에서 @font-face가 동작하지 않는 이슈 Shadow DOM이란? 이전 글 참고 [HTML/CSS] 쉐도우 돔(Shadow DOM)으로 스타일 충돌 해결하기 코드로 알아보는 CSS 충돌 다음과 같이 header 컴포넌트(header.vue)와 header 컴포넌트를 사용하는 content(index.vue)영역이 있다. index.vue content의 tittle ... index.css body { width: 100%; height: 100%; } header.vue header ti doqtqu.tistory.com @font-face란? 웹페이지의 텍스트에 온라인폰트(online fonts)를 적용할 수 있는 CSS at role이다. 간단하게 아래와 같이 사용이 가능하다. @font-face { font-family: ; src: [.. 2023. 6. 30.
[HTML/CSS] 쉐도우 돔(Shadow DOM)으로 스타일 충돌 해결하기 코드로 알아보는 CSS 충돌 다음과 같이 header 컴포넌트(header.vue)와 header 컴포넌트를 사용하는 content(index.vue)영역이 있다. index.vue content의 tittle ... index.css body { width: 100%; height: 100%; } header.vue header tittle header에 글자 색상을 회색으로 바꾸고 싶어서 아래와 같이 header.css를 코드를 수정하면 어떻게 될까? header.css h3 { margin: 0 10px; color: gray; } #header { margin: 0; width: 1000px; height: 50px; background-color: black; display: flex; flex.. 2023. 5. 6.
[Cross Browsing] 모바일 iOS 크롬에서는 WebM을 지원하지 않는다? WebM이란? [Cross Browsing] webm 영상의 투명도를 지원하지 않는 Safari 브라우저WebM 이란? 먼저 WebP를 알아보자. WebP 포맷은 2010년 구글에서 개발한 이미지 포맷으로 웹 환경에서 JPEG 및 PNG 포맷을 대체할 목적으로 개발되었다. 손실 압축과 비손실 압축을 둘 다 지원하며, 흔히doqtqu.tistory.com이전 글 참고이슈 WebM은 크롬에서 구글이 2008년에 VP8을 만들었던 On2 테크놀로지스를 인수하여 비디오 코덱의 컨테이너로 발표한 포맷이며, 컨테이너에 사용되는 영상 코덱과 음성 코덱이 완전히 무료이기 때문에 유튜브에서는 이미 이 포맷을 일부 사용하고 있다. 그렇다면 크롬에서는 WebM이 잘 동작하겠구나! 라고 안일한 생각을 했다. 하지만, 모바일 .. 2023. 3. 29.
[Cross Browsing] webm 영상의 투명도를 지원하지 않는 Safari 브라우저 WebM 이란? 먼저 WebP를 알아보자. WebP 포맷은 2010년 구글에서 개발한 이미지 포맷으로 웹 환경에서 JPEG 및 PNG 포맷을 대체할 목적으로 개발되었다. 손실 압축과 비손실 압축을 둘 다 지원하며, 흔히 사용되는 JPEG 및 PNG 포맷보다 압축 효율이 좋다. 또한 애니메이션 GIF 파일을 대체하기 위해, WebP 포맷은 애니메이션 기능도 제공한다. 이미지의 속성에 따라 다르기는 하나, 애니메이션 WebP 파일은 같은 내용의 GIF 파일보다 파일 크기가 1/5 ~ 1/10 정도로 작다. 과거에는 WebP 포맷을 지원하는 브라우저가 많지 않았지만, 최근에는 Chrome, Firefox, Edge 등 주요 브라우저라면 대부분 WebP 포맷을 지원한다. 아이폰의 경우 2020년 9월 출시된 i.. 2023. 3. 14.
반응형

티스토리툴바