Vue3 또는 Vue2, Nuxt.js에서는 Composition API 패턴을 사용할 것을 권장하고 있습니다. 이는 기존 Options API 대비 유지보수가 용이해진다는 장점이 있습니다. 단일 컴포넌트내에서 너무 많은 기능을 수행한다면, 특정 기능을 수행하는 methods, computed 등의 life cycle을 찾기가 힘들어집니다. 기존 Vue에서의 단점으로 부각되는 것이 큰 규모의 프로젝트를 수행하기 어렵다라고들 하는데 설계에 문제가 있을수도 있겠지만, 기본적으로 단일 컴포넌트에 수행되는 행위들이 많아지면서 유지보수와 추가 수정이 어려워지는 현상이 나타났었습니다. 기존 다른언어들에서의 Class를 살펴보면 사실 Composition이라는 방식은 객체를 생성하고 콜 하여 상속이나 믹스인을 통해 ..

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

Nuxt.js와 vuetify.js 그리고 Typescript를 이용한 jest 설정은 생각보다 손이 많이 갑니다. 하지만 초기 설정만 하면되는데, 매번 까먹어서 검색하기가 귀찮으니 다들 이 게시글을 즐겨찾기 하시거나, Whale 브라우저를 사용중이시라면 스크랩북에 추가하시죠! 진행해야할 사항은 간단하게 정리해보자면 JEST 설치 Typescript 설정 Vuetify 선언 설정 Test 생각보다 별로없군요 JEST 설치 Nuxt.js를 설치할때 npx create-nuxt-app 을 이용하여 설치하면 JEST를 쉽게 설치할 수 있습니다. // npx create-nuxt-app npx create-nuxt-app test 이때 jest를 포함하게되면 jest와 관련된 package들이 추가되고, scr..

https://gmyankee.tistory.com/325@Nuxt.js/storybook에 vuetify.js 적용하기https://gmyankee.tistory.com/324 Nuxt.js에 Storybook 적용하기 https://storybook.nuxtjs.org/setup Introduction @nuxtjs/storybook lets you integrate Storybook with NuxtJS with a single command. storyb..gmyankee.tistory.com지난 2020.10.05에 같은 내용으로 작성하였는데, 우리의 개발속도가 너무 빠른 storybook 성님께서 Major 버전이 업데이트되어 해당글이 참고용밖에 되지않는 무쓸모 글이 되어 고인글이 되어버렸습니..

https://gmyankee.tistory.com/324 Nuxt.js에 Storybook 적용하기 https://storybook.nuxtjs.org/setup Introduction @nuxtjs/storybook lets you integrate Storybook with NuxtJS with a single command. storybook.nuxtjs.org Nuxtjs에 Storybook을 설치하고 컴포넌트를 동적으.. gmyankee.tistory.com Nuxt.js에 Storybook 적용하기에 이어서 Vuetify.js를 적용하는 방법을 공식문서에서는 언급하지 않고 이렇게 저렇게 하면 돼! 라고만 설명을 해주고 있습니다. https://storybook.nuxtjs.org/manual..

https://storybook.nuxtjs.org/setup Introduction @nuxtjs/storybook lets you integrate Storybook with NuxtJS with a single command. storybook.nuxtjs.org Nuxtjs에 Storybook을 설치하고 컴포넌트를 동적으로 적용 관리하면서 UX/UI 디자이너와 기획자와 의사소통을 편리하게 해주는 컴포넌트단위의 문서화 방식으로 기존에 React와 Next.js를 우선 해주다가 Vue와 Nuxt.js가 추가 되었었는데 기존 Vue 설치방법이 굉장히 더럽고 추악하고 냄새나고 설치가 귀찮았는데 지금은 매우 편해져서 정리해보고자 합니다. 목차 Storybook 설치 Storybook 작성 방법 Storyb..