PWA는 'Progressive Web Apps'의 줄임말로 모바일 웹을 어플처럼 쓸 수 있게 도와주는 표준기술.1. nuxt 3 > integrations > modules > 'PWA' 검색2. 문서에 따라 차분히 진행https://vite-pwa-org.netlify.app/frameworks/nuxt.html npx nuxi@latest module add @vite-pwa/nuxtexport default defineNuxtConfig({ modules: ['@vite-pwa/nuxt'], pwa: { /* your pwa options */ }})3. 헤더에 아래와 같이 pwa 수동설치 가능한 버튼 생성 앱 설치4. 근데 왜 안 먹히지? node_modules 까보면 알겠지5...
vue 말고 nuxt를 쓰면 좋은 점 중에 하나로 Auto-imports 기능이 있다.이는 import를 해주지 않아도 vue의 다양한 요소를 바로 쓸 수 있는 기능이다.내가 만난 이슈는새로운 .vue 파일을 생성하면auto-imports가 잘 안 되는지 cannot find name ref 라면서 빨간 줄이 그어진다.최상단에import {ref} from "vue";를 입력해 수동 임포트를 해주면 되지만 이건 오토임포트가 제대로 적용되면 필요없는 부분이다.1번째 해결법은Vue - Official (2023년 12월까지만 해도 Volar라고 불렷음) 플러그인을 리스타트, 리로드 해주는 방법이 있다.(이 플러그인은 VSCode IDE에서 Vue 포맷을 받아들이게 해주는 플러그인이다)https://..
고민의 시작 사이드 프로젝트의 프론트 프레임워크를 'Vue'로 정하고 열심히 개발 중에 있다. 그러던 중 고민이 생겼다. 'components가 비대해지는데 어떻게 폴더링 해야 하는가?' '컴포넌트별로 스켈레톤 로딩 화면을 만들려고 하는데 항상 1쌍씩 생기는데 어떻게 폴더링 해야 하는가?' 사이드 프로젝트의 기능 구현이 끝나면 위 부분을 꼭 정리하고 리팩터링 후 오픈해야겠다는 생각 했고 미리 정리를 좀 해두려고 한다. 현재 환경 vue3 - 기존의 vue2와 vue3는 굉장히 다르다. - vue3 내에서도 초창기에서 조금 더 발전해 script setup 방식을 권장한다. - 나 같은 경우에는 vue2 => vue3 => vue3 script setup 중에서 가장 마지막 방식으로 구현했다. vite -..
