Vue 강의 끝판왕 : Nuxt 3 완벽 마스터대시보드

<template> <div class="q-pa-xl"> <AppCard> <template #header> <div class="text-h5 text-weight-medium">{{ course?.title }}</div> <div class="flex q-gutter-x-sm items-center q-mt-sm text-grey-8"> <span class="flex items-center"> <q-icon name="star" size="16px" color="orange" /> <span>{{ course?.rating }}</span> </span> <span>{{ course?.reviewsCount }}</span> <span>&middot;</span> <span>{{ course?.studentCount }}</span> <q-space /> <a class="text-bold" :href="course?.reviewsUrl" target="_blank"> 수강평 보기 </a> </div> </template> <div class="q-mb-md"> <VideoPlayer :src="course?.video" /> </div> <div class="row q-col-gutter-md"> <div class="col-6"> <q-btn label="인프런에서 수강하기" unelevated class="full-width" color="primary" :href="course?.inflearnUrl" target="_blank" /> </div> <div class="col-6"> <q-btn label="짐코딩 클럽에서 수강하기" unelevated class="full-width" color="red" :href="course?.gymcodingUrl" target="_blank" /> </div> </div> <p class="q-mt-lg text-grey-8"> {{ course?.content }} </p> <template #footer> <q-btn v-if="prevCourse" label="이전 강의" color="primary" unelevated :to="prevCourse.path" /> <q-space /> <q-btn v-if="prevCourse" label="쿼리추가" color="primary" unelevated :to="{ path: $route.path, query: { timestamp: Date.now() } }" /> <q-space /> <q-btn v-if="nextCourse" label="다음 강의" color="primary" unelevated :to="nextCourse.path" /> </template> </AppCard> </div> </template> <script setup lang="ts"> const route = useRoute(); const courseSlug = route.params.courseSlug as string; const { course, prevCourse, nextCourse } = useCourse(courseSlug); console.log('re'); definePageMeta({ key: (route) => route.fullPath, }); </script> <style scoped></style>   <template> <NuxtLayout> <NuxtPage /> <!-- <RouterView /> --> <!--layouts>default.vue의 slot부분--> </NuxtLayout> </template> <script setup lang="ts"></script>  해당 코드처럼 넣은후 쿼리파라미터를 넣어도 리랜더링이 안되네요.. ㅠ 

아직 강좌 초반부이기는 한데.. 테스트 코드를 작성하면서 실시간 렌더링을 되면서 오작동을 너무 많이 한다고 느껴집니다..리엑트나 next.js를 사용시에는 이정도까지는 아니였는데, nuxt3는 좀 많이 심한거 같은데..저만의 생각인가요?? 예로.. 같은 경로에 렌더링 코드를 구성하기 위해서..pages/course.vue 생성하고.. http://localhost:3000/course 로 접속해서 결과물 확인했습니다.그리고, pages/course.vue를 삭제하고, pages/course/index.vue를 생성해서 다시 새로고침이나 다른 브라우저로 접근해도 동일한 오류를 발생시킨 페이지를 보여줍니다. 물론 nuxt3를 재실행하면 문제는 해결이 되기는 합니다.여기서 질문은.. nuxt3를 재실행하는 형태면 실시간 렌더링이 된다고 할 수 있느냐는 거죠... ㅡ.ㅜ;강의 보시면 테스트 코딩하니, 이제 제대로 작동한다고 생각을 하는거지.. 복잡한 프로젝트가 이처럼 정상적인 코드가 오류를 뿜어되면 어떻게 해야 할지.. 답답해 지네요.. ㅜ.ㅜ; 이런 형태의 문제가 처음이 아니고, 여러번 있었다는 겁니다. 처음에는 그러려니 했으나.. 하면 할수록 이건 좀 심하지 않나 싶어서 적어봅니다. 이런 문제를 해결할 방법이 있을까요??캐시 때문인지, 다르면 다른 설정으로 근본적으로 개발할때라도 해결할 방법이 있으면 알려주시면 감사하겠습니다..   

강의 잘 보고 있습니다.nuxt3가 버전없이 되어서 그런지, 강의에서는 안 보이는 _nuxt/pages/index.vue?macro=true 이런게 많이 보입니다.라우팅을 확인하기 위해서 개발자 도구의 network에서 보면 이런 코드가 다 들어가 보이는데..이건 뭐며, 로딩이 안되게나 해당 페이지 사용시 로드하는 형태는 불가능한가요??home으로 이동시 index.vue 로드해서 가져오고, about 클릭시 about.vue를 정상적으로 로드해서 정상적으로 code split이 이루어지고 있는 상태인데.. 해당 페이지를 리로드해서 가져오면.. 이처럼 pages 밑에 있는 모든 파일의 macro=true로 다 가져오고 있거든요..알려주시면 감사하겠습니다.. 아.. 코드 오류 발생시 저 macro=true 붙은 것을 화면에 많이 뿌려주어서 더 궁금합니다.. 

퀘이사 설치 후nuxt.config.ts에모듈을 추가하면 [vite-node] [ERR_LOAD_URL] quasar/lang/en-US.mjs오류가 뜨네요2번쨰 복습중인데 처음에는 잘 됐던거같은데 왜 갑자기 안되는걸까요?

nuxt3에서는 typescript를 사용해야 하는것은 알고 있는데, 외부 모듈 연동이나 기타 연동등에서 어쩔수 없이 자바스크립트를 사용해야 하는 경우가 있을건데, 이때 자바스크립트를 어떻게 가져와 처리해야 하는지 알고 싶습니다.우선 간단히 예제를 구성했는데.. 간단한것도 안되네요.. ㅡ.ㅜ; <template> <div> <h1>{{ data.message }}</h1> <p>Today is: {{ data.date }}</p> </div> </template> <script setup lang="ts"> import { ref } from 'vue'; import { fetchData } from '/assets/js/javascript_test'; const data = ref(fetchData()); </script>// assets/js/javascript_test.js export default function () { return { message: "Hello from JavaScript", date: new Date().toDateString(), }; }이처럼 구성했을때, 어떻게 가져와서 처리해야 하는지 좀 알려주시면 감사하겠습니다.500 에러 뜨는데, 이 코드 작동 좀 하게 해 주세요.. ㅡ.ㅜ;

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로 하면 정상적으로 작동 할거 같기는 한데.. 왜 이런지는 꼭 알고 싶어서 적어봅니다.설정등은 교안 그래도 했는데.. 혹 패키지 버전이나 그런 문제로 이런 문제가 발생할 수도 있을까요??혹 짚히시는게 있을까 싶어 질문 올려 봅니다..

안녕하세요Nuxt3를 이용해서 서비스를 개발중인 수강생입니다. 저는 middleware단에 useSeoMeta를 사용해서, 각 페이지별로 메타태그가 들어가게 해놓고,일부 페이지는 axios 모듈로 api 서버에 request하고 response받은 값을 useHead()를 통해 meta태그로 설정하려고 하고 있습니다. 빌드해서 확인해보니, 콘솔에는 해당 페이지에 사용하고자 하는 메타태그가 잘 찍히는데, 막상 페이스북 공유하기 버튼이나 카카오톡에 링크를 붙여넣는등의 행위를 할때 이미지나 타이틀등이 안보입니다. 미들웨어에서 페이지의 메타태그를 한번 씌워놓으면 해당 pages 폴더의 vue파일에서 다시 메타태그 설정이 안되는지 궁금하고, api response값을 메타태그에 사용하려면 어떻게 하는지 궁금합니다. 크롬 개발자도구에서 head 부분을 보면, 메타 태그는 잘 들어가 있는걸 확인할 수 있었습니다.

선생님 안녕하세요! 좋은 강의 잘 듣고 있습니다.에러를 초기화하는 과정에서 궁금증이 생겨 질문 드립니다.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; 에는 어떤 차이가 있는 것일까요?

안녕하세요! msw를 적용하려고 하다보니 쉽지가 않아서 질문드립니다!검색을 해봐도 거의 활용 사례가 없는 것 같기도 하고 그러네요..원래 nuxt같은 ssr 환경에서는 쓰기가 쉽지 않은 건가요? 그렇다면 nuxt의 노드 서버를 이용해 mock api를 구성해서 써야할까요?

안녕하세요 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 파일을 만들지 못하는거 같은데 이문제를 해결하려면 어떻게 해야할까요??

안녕하세요nuxt 초기 세팅중volar를 설치를 하려 했더니 depreacted 되었다고 Vue-Offical extension을 대신 사용하라고 하는데 강의 듣는데 별 문제가 안될까요??

계속 오류가 나는데 오토 임폴트가 안되는걸까요??

안녕하세요, auto import가 제대로 작동하지 않는 것 같아 문의드립니다.파일을 모두 닫고 npm run dev를 다시 실행해보기도 하고 vscode를 껐다키기도 했지만 import가 자동으로 이루어지지 않는 것 같습니다.다른 확인해봐야할 부분이 있을까요 ? 확장 플러그인을 동일하게 다운 받고 싶어서 vscode를 사용하고 있는데, 저는 원래 인텔리제이가 편해서요 ...웹스톰으로 해당 강의를 그냥 따라가도 괜찮을까요 ?

안녕하세요. 강의 잘듣고 있습니다.cookie 의 expire 를 설정 하려면 별도 라이브러리를 설치해서 해야 하나요? 아니면 locale: useCookie('locale',{maxAge: 60*60}).value || useDefaultLocale().value, 와 같이 하면 되는건가요?위와 같이 하니 적용 되지 않는 것 같아서 문의 드립니다. 

안녕하세요.라우팅 기본 : 파일 기반 라우팅 7:39분 쯤에 보니 단일 루트 요소에 div div 가 형제요소로 있는 경우도 안되는건가요?Vue3 부터는 바뀌어서 여러개 사용해도 되는걸로 알고있어서 문의드립니다!