본문 바로가기

전체 글340

[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.
[Git] Git 브랜치 전략 (git flow, github flow, gitlab flow) Git 브랜치 전략 종류 git flow 전략 전통적으로 많이 사용되는 방식으로, 이 방법을 사용하면 master 브랜치는 항상 PROD와 동일한 상태를 바라볼 수 있다. 브랜치 종류 master PROD 배포 버전을 관리하는 메인 브랜치 hotfix PROD에서 발생하는 버그를 수정하기 위한 보조 브랜치 release 다음 버전 배포를 준비하는 보조 브랜치 develop 다음 버전 배포를 개발하는 메인 브랜치 feature 새로운 기능을 개발하는 보조 브랜치 문제점 git flow 전략에서 release는 하나만 존재한다. develop에 완료된 기능을 release에 태우고, release에서 테스트를 진행한다. 따라서, 배포가 빈번하다면 배포 예정 작업(ex. v1.0.0)을 테스트할 수 없는 병목.. 2023. 8. 25.
[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.
반응형

티스토리툴바