본문 바로가기

FrontEnd94

[Nuxt] definePageMeta로 layout 지정 시 린트에러와 layout이 정상적으로 설정되지 않는 현상 문제 상황Nuxt 공식문서에 따르면 definePageMeta를 이용해 페이지에 특정 레이아웃을 사용할 수 있다.에러페이지에서 error 레이아웃을 사용하기 위해 아래와 같은 코드를 작성했다.  에러페이지에서는 error 레이아웃을 보여줘야하지만, App.vue에서 사용되고 있는 'default' 레이아웃이 표시되고 있었다.  그리고 definePageMeta에는 "'definePageMeta' is not defined." 라는 린트 에러가 발생했다.  원인 파악현재 nuxt v3.12.x 버전을 사용중인데, 해당 버전에서 nuxt 깃허브 issue에서 동일한 현상으로 제보된 이슈를 발견했다..! In nuxt@3.12.0 the definePageMeta function is broken · Iss.. 2024. 9. 7.
[Vue warn]: Failed to resolve component: ... If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement 문제 상황- 환경: vue3, nuxt: 3.12.4Vue에는 폴스루 속성(Fallthrough Attributes)이 존재하는데 해당 속성을 사용해서 타입선언 없이 부모 컴포넌트에서 받아온 props와 emit을 그대로 자식 컴포넌트에게 전달하고자 했다.  이 경우 개발자 콘솔에서 아래와 같은 warnning 문구가 발생한다. 원인 파악Vue3 마이그레이션 가이드에 따르면 $listener는 Vue3에서 제거되었다고 한다.기존의 $attrs에 Event listeners가 포함되는 형태이다. 해결 방법아래와 같이 defineProps로 타입정의 후 v-bind="$props" 또는 v-bind="$attrs"로 부모 컴포넌트로 받은 props를 내려준다.!-- ArrowLinkButto.. 2024. 8. 28.
[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.
반응형

티스토리툴바