{"product_id":"zosia-vue-js-nuxt-frontend-engineer-ai-skill","title":"조시아 - Vue.js\/Nuxt 프런트엔드 엔지니어 AI Skill","description":"\u003ch2\u003eVue의 반응성 시스템을 React의 리렌더링 모델처럼 다루지 마세요.\u003c\/h2\u003e\n\u003cp\u003eZosia는 Vue의 실제 멘탈 모델을 중심으로 설계된 Senior Vue.js\/Nuxt 프론트엔드 엔지니어 스킬입니다. Vue의 세분화된 프록시 기반 반응성 시스템, 단일 파일 컴포넌트, 그리고 의존성 배열을 사용하는 훅이 아닌 컴포저블을 기반으로 하는 Composition API를 다룹니다. 또한 Composition API 아키텍처와 컴포저블 설계, 반응성 시스템(ref, reactive, computed 캐싱, watcher), Pinia 상태 관리, Nuxt의 렌더링 전략(Nitro의 routeRules를 통한 SSR, SSG, 하이브리드 렌더링), 파일 기반 라우팅과 레이아웃, SEO\/메타 관리, Vitest\/Vue Test Utils 테스트, Vue 2에서 3으로의 마이그레이션 또는 Options API에서 Composition API로의 마이그레이션을 다룹니다.\u003c\/p\u003e\n\u003ch3\u003e대상 사용자\u003c\/h3\u003e\n\u003cp\u003eVue 및 Nuxt 프론트엔드 엔지니어, 그리고 Vue 2 또는 Options API에서 마이그레이션하는 팀.\u003c\/p\u003e\n\u003ch3\u003e주요 기능\u003c\/h3\u003e\n\u003cul\u003e\n  \u003cli\u003e\"반응성 버그\"를 조사할 때 다른 곳을 살펴보기 전에 reactive() 객체의 구조 분해, 누락된 .value 언래핑, 반응성 컨텍스트 외부에서의 의존성 참조 여부를 확인합니다.\u003c\/li\u003e\n  \u003cli\u003e로컬 상태를 사용하는 컴포저블로는 실제로 해결할 수 없는 문제인지 확인한 후에만 Pinia 스토어를 권장합니다.\u003c\/li\u003e\n  \u003cli\u003e앱 전체에 하나의 전역 모드를 적용하는 대신 routeRules를 통해 라우트별로 Nuxt의 렌더링 전략(SSR, SSG, 하이브리드)을 선택합니다.\u003c\/li\u003e\n  \u003cli\u003e무조건 ClientOnly로 감싸는 대신 클라이언트 전용 값이나 비결정적 콘텐츠 등 실제 서버\/클라이언트 불일치 원인을 기준으로 하이드레이션 불일치를 진단합니다.\u003c\/li\u003e\n  \u003cli\u003e테스트 대상인 컴포저블, 스토어 또는 컴포넌트의 실제 위험 범위에 맞춰 Vitest와 Vue Test Utils 테스트 커버리지를 구성합니다.\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003ch3\u003e사용 방법\u003c\/h3\u003e\n\u003cp\u003eZosia의 SKILL.md를 Claude Project Instructions(또는 다른 AI 시스템 프롬프트)에 붙여넣은 다음, vue.js\/nuxt 프론트엔드 엔지니어링 문제를 설명하세요. Claude, ChatGPT 및 모든 AI 채팅에서 사용할 수 있습니다. 설치에는 2분도 걸리지 않습니다.\u003c\/p\u003e","brand":"KissMySkills","offers":[{"title":"Default Title","offer_id":58342395838728,"sku":null,"price":29.0,"currency_code":"USD","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/1036\/1444\/7880\/files\/sw33-zosia-vue-nuxt-frontend-engineer-nf.png?v=1785685145","url":"https:\/\/kissmyskills.com\/ko\/products\/zosia-vue-js-nuxt-frontend-engineer-ai-skill","provider":"KissMySkills","version":"1.0","type":"link"}