Nuxt.js에서는 Google Adsense(구글 애드센스) 광고를 이용할 때 가장 많이 사용하는 방법이 아마도 www.npmjs.com/package/@nuxtjs/google-adsense @nuxtjs/google-adsense Google Adsense Module for Nuxt.js www.npmjs.com 위 @nuxtjs/google-adsense 모듈을 사용하는 방법일 겁니다. 해당 애드센스 모듈은 저도 오랫동안 사용해왔지만, 스토리북과 관련된 이슈도있고.... 커스텀해서 붙이는 것처럼 동일된 태그를 계속해서 호출하는 문제가 있습니다. 이 문제는 정확히는 해당 모듈의 문제가 맞으면서도 아닌데, nuxt-router 즉 vue-router가 가상의 라우팅을 진행하면서 생긴 문제입니다. 초..

nuxt extractcss ignoreorder PostCSS Loader has been initialized using an options object that does not match the API schema nuxt에서 extractcss 관련한 오류가 발생하였는데, vuetify에서 생긴 문제로 보입니다. 많은 자료 조사 결과 다양한 해결책을 제시했는데 extractCss: true를 ignororder를 추가 (이미 설정됨) node-sass를 설치 (안됨) sass-loader를 설치 (안됨) sass를 설치 (이미 설치됨) 위 패키지들을 특정 종속성으로 맞추어줌 (안됨) nuxt 2.15.3으로 강제 설치 (콘솔로그는 사라졌으나 웹상에서는 여전히 오류 발생) postcss-loader..

Apollo Graphql Client 모듈을 사용하던 중 다음과 같은 오류를 접하는 경우가 종종 있습니다. ObservableQuery with this id doesn't exist 위 오류는 React Hooks 또는 Vue/Nuxt의 @vue/apollo-composable이나, @nuxtjs/apollo 등의 apollo client를 사용하는 모든 모듈에서 제공되는 fetchMore 즉 페이지 네이션을 쉽게 하기 위한 graphql client의 기능을 사용하던 중 발생하는 오류입니다. 하지만 지금 말씀드린 내용은 어디서 발생하는지를 언급한 것이며, 원인은 이러한 이유 때문은 아닙니다. 즉 언제나 그렇듯 모듈이 문제가 아니라, 사람! 사용자가 문제라는 것이죠. Dirty Solution 다른 ..

Nuxt.js에서 JEST를 사용하다 보면 마주치는 오류중 하나로 template tag를 JEST에서 해석할 수 없어서 나타나는 증상 중 하나입니다. 대표적으로 nuxt-link 등의 nuxt만의 고유한 태그들에서 이러한 현상이 발생할 수 있습니다. Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option. 이것을 해결하기 위해서는 JEST setup에서 mocking된 component.vue를 하나 생성해주어야 합니다. // test/__mocks__/clientOnlyMock.vue setup.js를 통해 생성한 컴포넌..

Nuxt.js에서 Generate를 사용하여 Product 환경에 배포하려고 할 때 발생되는 현상으로, 많은 사람들의 의견이 갈리는데 대체로 $nuxt에서 html 구조를 이상한태그를 추가하여 발생하는 오류라고 합니다. 때문에 번들링에서 생기는 오류로써 이를 해결하기 위해서는 gulp 같은 방식을 사용해야 하는데 따로 설치를 하지 않고도 처리를 진행할 수 있는 방법이 nuxt에서는 가능합니다. github.com/nuxt/nuxt.js/issues/5800#issuecomment-570110683 Failed to execute 'appendChild' on 'Node': This node type does not support this method. · Issue #5800 · nuxt/nuxt.js ..

목차 서론 Promise를 반환하는 함수 Callback을 반환하는 함수 Graphql로 SSR Generate 하기 서론 오버맵 오버맵 오버워치 워크샵 코드, 옵치 유즈맵 코드를 등록하고 공유하며, 워크샵 제작자들의 다양한 모드를 바로 이용해보세요! overmap.me 오버맵이 어느순간부터 검색노출에서 사라지고 있길래 이게 무슨일인가 싶어 확인해보니... 동적페이지들이 노출이 사라지고 있었습니다. Nuxt generate가 해줄거라고 믿어 의심치 않았지만... Parameter가 동적인데 어떻게하지 하고서 무시햇엇는데 ... 스크롤을 내려보니 더있었군요... Promise를 반환하는 함수 const axios = require('axios') module.exports = { generate: { ro..