https://astro.build/ Astro Build fast websites, faster. Astro is a new kind of static site builder for the modern web. Powerful developer experience meets lightweight output. astro.build Astro.js 는 SSG (Static Site Generator) Framework로 근래 대중화된 React.js Vue.js Svelte.js 등을 함께 사용할 수 있는 특이한 프레임워크 입니다. 가장 큰 특징은 함께 사용할 수 있으며, SSR서버로도 이용은 가능합니다. 또 강력한 점은, React, Next, Vue, Next, Svelte, Sveltekit을 사용..

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 다른 ..

Vue 또는 Nuxt에서 vue apollo 4를 사용하며 composition api에서 유연하게 작성하기 위해서는 @vue/apollo-composable이 필요로 합니다. 물론 없어도 @nuxtjs/apollo를 통해서 작성할 순 있지만, apollo가 setup 밖에 있다 보니, 변수 참조가 안되어 초기 데이터 로드를 query명과 일치하여야만 합니다. 굉장히 불편하며 모순적입니다. 현재 @vue/apollo-composable 4.0.0 은 알파 버전이며 오류가 나타나는 버전은 alpha.12 입니다. alpha.11도 동일하다고 하니... alpha.10을 설치하면 해결됩니다. 하지만 alpha의 저. 버전은 이상하게 package.json으로 재 명시해도 12로 설치가 되고, node_mod..

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를 통해 생성한 컴포넌..

https://gmyankee.tistory.com/334 Nuxt.js + Typescript + Vuetify.js + Jest 설정하기 Nuxt.js와 vuetify.js 그리고 Typescript를 이용한 jest 설정은 생각보다 손이 많이 갑니다. 하지만 초기 설정만 하면되는데, 매번 까먹어서 검색하기가 귀찮으니 다들 이 게시글을 즐겨찾기 하시거나, Wh gmyankee.tistory.com 지난번에 위 링크처럼 Nuxt.js + Typescript + Vuetify.js + JEST.js 의 조합으로 Unit Test 환경을 구축하였지만, Vuex를 적용하는 내용이 빠져서 추가로 작성을 해보고자 합니다. Vuex는 Typescript를 조합하면 대체로 많은 외국 게시글들은 Typescript ..

Typescript를 사용하여 Nuxt.js를 이용하다보면 다음과 같은 오류와 마주할 수 있습니다. TS2307: Cannot find module '@/components/PostList' or its corresponding type declarations. https://typescript.nuxtjs.org/guide/setup.html#configuration Setup Nuxt TypeScript Support mainly comes through a Nuxt module, @nuxt/typescript-build, and its types @nuxt/types. typescript.nuxtjs.org typescript nuxt에서는 위 와같이 설정하는 것을 문서로 표기되어 있으며, vue-..