묻고 답해요
141만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨[최신] Vue 강의 끝판왕 : Nuxt 3 완벽 마스터
.eslintrc.cjs 설정시 반대로 되는데, 혹 왜 이런지 아시는지요?
vscode와 eslint를 자주 사용하는데.. 이번에 이상해서 질문 드립니다.. ㅡ.ㅜ;우선 강의 내용대로 설정을 하고 있는데.. workspace에 vscode의 settings.json로 생성해서 알려주신거 붙여넣기 하고...eslintrc.cjs 파일로 이동해서 ctrl+s로 저장을 하면 space->tab으로, 싱글쿼터가 더블쿼터로 바뀝니다.즉, 반대로 되는거죠.. 'prettier/prettier': [ 'error', { arrowSpacing: ['error', { before: true, after: true }], singleQuote: true, semi: true, useTabs: false, tabWidth: 2, trailingComma: 'all', printWidth: 80, bracketSpacing: true, arrowParens: 'always', endOfLine: 'auto', }, ],강의 교안 그대로 붙여넣기 해서 하고 있는데.. 이처럼 설정되어 있는데.. 왜 이런지 혹시 아실까요?? 이전부터 싱글쿼터에 useTabs는 false로 해서 코딩하고 있으며, vscode의 전체의 settings.josn에는 eslint 관련된 것은 없습니다.물론 위 설정에서 그냥 useTabs를 true로 하고, singleQuote를 false로 하면 정상적으로 작동 할거 같기는 한데.. 왜 이런지는 꼭 알고 싶어서 적어봅니다.설정등은 교안 그래도 했는데.. 혹 패키지 버전이나 그런 문제로 이런 문제가 발생할 수도 있을까요??혹 짚히시는게 있을까 싶어 질문 올려 봅니다..
-
미해결[최신] Vue 강의 끝판왕 : Nuxt 3 완벽 마스터
메타 태그 질문입니다.
안녕하세요Nuxt3를 이용해서 서비스를 개발중인 수강생입니다. 저는 middleware단에 useSeoMeta를 사용해서, 각 페이지별로 메타태그가 들어가게 해놓고,일부 페이지는 axios 모듈로 api 서버에 request하고 response받은 값을 useHead()를 통해 meta태그로 설정하려고 하고 있습니다. 빌드해서 확인해보니, 콘솔에는 해당 페이지에 사용하고자 하는 메타태그가 잘 찍히는데, 막상 페이스북 공유하기 버튼이나 카카오톡에 링크를 붙여넣는등의 행위를 할때 이미지나 타이틀등이 안보입니다. 미들웨어에서 페이지의 메타태그를 한번 씌워놓으면 해당 pages 폴더의 vue파일에서 다시 메타태그 설정이 안되는지 궁금하고, api response값을 메타태그에 사용하려면 어떻게 하는지 궁금합니다. 크롬 개발자도구에서 head 부분을 보면, 메타 태그는 잘 들어가 있는걸 확인할 수 있었습니다.
-
미해결[최신] Vue 강의 끝판왕 : Nuxt 3 완벽 마스터
clearError 와 error.value = null
선생님 안녕하세요! 좋은 강의 잘 듣고 있습니다.에러를 초기화하는 과정에서 궁금증이 생겨 질문 드립니다.NuxtErrorBoundary에서의 error는 clearError() 로는 제거할 수 없는걸까요? <q-btn label="Reset" color="positive" no-caps @click="error.value = null" /> </template> 위 코드에서 @click="error.value = null" 대신에@click="clearError({ redirect: '/course'})" 로 바꾸어 테스트 해보았는데, 페이지 이동이 되지 않습니다.clearError() 와 error.value = null; 에는 어떤 차이가 있는 것일까요?
-
미해결[최신] Vue 강의 끝판왕 : Nuxt 3 완벽 마스터
msw
안녕하세요! msw를 적용하려고 하다보니 쉽지가 않아서 질문드립니다!검색을 해봐도 거의 활용 사례가 없는 것 같기도 하고 그러네요..원래 nuxt같은 ssr 환경에서는 쓰기가 쉽지 않은 건가요? 그렇다면 nuxt의 노드 서버를 이용해 mock api를 구성해서 써야할까요?
-
미해결[최신] Vue 강의 끝판왕 : Nuxt 3 완벽 마스터
npm run build error
안녕하세요 extends 강의에서는 viola를 사용하라고 했으나 공식문서 내용에는 office-vue를 사용하라고 해서 설치후 강의를 보며 진행하던중 npm run build 명령어 실행시 아래와 같은 에레를 확인하게 되었습니다. =======================================Nuxt Build Error: Cannot find module 'vue-tsc/out/index' Require stack:- /workspace/nuxt/learn-nuxt-3/node_modules/vite-plugin-checker/dist/esm/checkers/vueTsc/prepareVueTsc.js======================================현재 package.json 은 아래와 같습니다.{ "name": "nuxt-app", "private": true, "type": "module", "scripts": { "build": "nuxi build", "dev": "nuxi dev", "generate": "nuxi generate", "preview": "nuxi preview", "postinstall": "nuxi prepare" }, "dependencies": { "nuxt": "^3.10.3", "vue": "^3.4.21", "vue-router": "^4.3.0" }, "devDependencies": { "typescipt": "^1.0.0", "vue-tsc": "^2.0.6" } }=======================================nuxt.config.ts======================================default defineNuxtConfig({ devtools: { enabled: true }, typescript: { // shim: false, typeCheck: true, }, }); ======================================빌드시점에 index 파일을 만들지 못하는거 같은데 이문제를 해결하려면 어떻게 해야할까요??
-
해결됨[최신] Vue 강의 끝판왕 : Nuxt 3 완벽 마스터
vscode extensions 질문
안녕하세요nuxt 초기 세팅중volar를 설치를 하려 했더니 depreacted 되었다고 Vue-Offical extension을 대신 사용하라고 하는데 강의 듣는데 별 문제가 안될까요??
-
미해결[최신] Vue 강의 끝판왕 : Nuxt 3 완벽 마스터
Cannot find name 'defineProps'. 라고 나오네요
계속 오류가 나는데 오토 임폴트가 안되는걸까요??
-
해결됨[최신] Vue 강의 끝판왕 : Nuxt 3 완벽 마스터
auto import
안녕하세요, auto import가 제대로 작동하지 않는 것 같아 문의드립니다.파일을 모두 닫고 npm run dev를 다시 실행해보기도 하고 vscode를 껐다키기도 했지만 import가 자동으로 이루어지지 않는 것 같습니다.다른 확인해봐야할 부분이 있을까요 ? 확장 플러그인을 동일하게 다운 받고 싶어서 vscode를 사용하고 있는데, 저는 원래 인텔리제이가 편해서요 ...웹스톰으로 해당 강의를 그냥 따라가도 괜찮을까요 ?
-
미해결[최신] Vue 강의 끝판왕 : Nuxt 3 완벽 마스터
cookie 의 expire 를 설정 하려면
안녕하세요. 강의 잘듣고 있습니다.cookie 의 expire 를 설정 하려면 별도 라이브러리를 설치해서 해야 하나요? 아니면 locale: useCookie('locale',{maxAge: 60*60}).value || useDefaultLocale().value, 와 같이 하면 되는건가요?위와 같이 하니 적용 되지 않는 것 같아서 문의 드립니다.
-
해결됨[최신] Vue 강의 끝판왕 : Nuxt 3 완벽 마스터
페이지 컴포넌트 단일 루트 요소에 div 두개도 안되는건가요?
안녕하세요.라우팅 기본 : 파일 기반 라우팅 7:39분 쯤에 보니 단일 루트 요소에 div div 가 형제요소로 있는 경우도 안되는건가요?Vue3 부터는 바뀌어서 여러개 사용해도 되는걸로 알고있어서 문의드립니다!
-
미해결Vue.js + TypeScript 완벽 가이드
Vue3 + Typescript + Vite + Pinia 참조
안녕하세요.캡틴판교님이 vue-news를 포함하여 대부분 Vue2로 강의를 하셔서 저는 Vue3로 리팩토링 해봤습니다. 최근 Vue3로 작업(Composition API 쓰는 맛이 😇)을 많이 하시는 것 같고, 이미 저는 Tistory 블로그를 Vue3로 커스텀하여 운영하고 있기도 하고, 이번에 Typescript 강좌를 다 보면서 힘들어도 굳이 Vue3로 작업해보고 싶었거든요. 혹시나 저처럼 해보고 싶은 분들이 계실 것 같아 작업한 내용이 아래 링크에 있으니 참조하시면 편하실 것 같습니다. 🫡이전에 작업했던 vue-news는 제가 따로 GitHub에 올려놨기 때문에 그 소스를 기반으로 작업하였습니다. 아래와 같이 꽤 변경한 부분이 있으나 어느 정도 숙달된 분들은 가이드 문서 보시고 따라오시면 금방하실 거라 생각되며, 참고로 저는 Composition API로 작성하는 게 맘에 들어서 이를 적극적으로 적용하였습니다.Use Vue3, Setup Composition API, TypescriptVue-CLI -> ViteVuex -> PiniaAdd scroll event to /news URLCSS & Header https://github.com/haguri-peng/vue-news-typescript
-
미해결Vue3 완벽 마스터: 기초부터 실전까지 - "실전편"
Pinia 사용 시 composition api
안녕하세요 좋은 강의 만들어주셔서 감사합니다.강의 시청 도중 궁금한게 생겨 질문 드립니다. Pinia 사용시 Vuex와 동일하게 state, actions, getters를 사용하고 있는데해당 방식은 Optional 방식으로 보여집니다.개인적인 생각으로는 Vue3와 composition API를 사용한다면 Pinia 또한 Composition API 를 사용해 코드 작성을 해야 하는게 맞지 않을까 라는 생각이 들어 공식문서를 찾아보았지만Search 능력이 부족한 탓인지 공식 문서에서 어떤 방식을 좀 더 권장한다 라는 내용을 찾지 못해관련 내용 중 알고 계시거나 선생님의 선호하는 방식은 무엇인지 알고 싶어 질문 남깁니다. 감사합니다.
-
미해결Vue3 완벽 마스터: 기초부터 실전까지 - "실전편"
pinia 적용에 관한 질문
안녕하세요? 강의 잘 듣고 있습니다. ^^ pinia 부분 수업을 들었는데, props를 이용해서 component간에 상태를 공유하던 (번거로운)부분이 굉장히 편리해져 흥미로웠습니다. 여기서 드는 생각이.. 원래, 자식 component의 script tag내에서 defineProps로 props를 정의하고 부모 component에서 넘겨주고, computed로 업데이트하는 등의 작업들이 모두 pinia를 통한 중앙 store를 통해 해결되는 것으로 보이는데요 그럼, 실제 현업에서도 프로젝트의 일관성을 위해, defineProps, computed 등의 함수를 이용한 props 관리는 지양하고, 모든 상태관리를 pinia를 이용한 store로 관리하는 것도 좋은 선택일까요? 감사합니다.