묻고 답해요
130만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결Vue 강의 끝판왕 : Nuxt 3 완벽 마스터
컴포넌트명 지정하는 방식이 변경되었나요??
우선 nuxt3 잘 듣고 있습니다.현재 컴포넌트 계층 구조보고 있는데, 이상한게 있어 질문 드립니다. "dependencies": { "@quasar/extras": "^1.16.11", "nuxt": "^3.11.2", "nuxt-quasar-ui": "^2.1.1", "quasar": "^2.15.4", "vue": "^3.4.21", "vue-router": "^4.3.0" }, "devDependencies": { "@nuxtjs/eslint-config-typescript": "^12.1.0", "@typescript-eslint/eslint-plugin": "^7.8.0", "@typescript-eslint/parser": "^7.8.0", "eslint": "^8.56.0", "eslint-config-prettier": "^9.1.0", "eslint-plugin-nuxt": "^4.0.0", "eslint-plugin-prettier": "^5.1.3", "eslint-plugin-vue": "^9.25.0", "prettier": "^3.2.5", "typescript": "^5.4.5", "vue-tsc": "^1.8.27" }현재 제가 설치한 버전은 이렇습니다. 강좌의 버전과는 살짝 차이가 있는데..CourseCard 컴포넌트를 작성할때 자동완성에서 CourseCard로 나오는게 아니고, CourseCardVue로 출력이 되고, 엔터(자동완성)을 하면 <course-card>로 출력하고 있습니다.그러면서 <script>에 import CourseCard from '~/components/CourseCard.vue'; 이게 자동으로 붙습니다. 명시적으로 추가되었나 싶어 저 import를 주석 처리하면 오류는 안 나는데.. coursecard의 내용이 출력이 안됩니다. 즉, <course-card>를 컴포넌트로 인식 못하는거죠..그래서 <CourseCard /> 를 사용해 보면 이것도 잘 작동합니다.대신에 import가 있어야 잘 작동하더군요. 그래서 nuxt.config.ts 에서 import 설정을 두니.. 구지 import를 하지 않아도 이제사 잘 작동합니다. imports: { autoImport: true, }, App.vue 코드 <q-page-container :style="pageContainerStyle"> <q-page padding> <div class="q-my-xl text-center"> <div class="text-h4">All Courses</div> <div class="q-mt-sm text-grey-8"> 웹 개발 입문부터 실전까지 학습해 보세요. </div> </div> <course-card /> <CourseCard /> </q-page> </q-page-container> <script setup lang="ts"> import CourseCard from '~/components/CourseCard.vue'; ... </script> 여기서 질문은....<course-card /> 왜 작동하는지가 궁금합니다.https://content.nuxt.com/playground 이곳에서 동일하게 코드 구성하면 여기서도 course-card는 작동이 됩니다. 그리고 nuxt.config에서 autoImport: true해서 잘 작동하는거 보면.. 디폴트로 false로 되어 있다는 것인데..혹 왜 그런지 도 알고 싶습니다. 패키지 버전 차이 나는거 이외에 bun을 사용해도 돌리고 있는데.. 혹 이것 때문일수도 있을까요?? 뭔가 살짝만 구성이 틀려져도 오류나 이상한 짓을 해서 좀 불안해서 질문 드립니다.. ㅡ.ㅜ;
-
미해결Vue 강의 끝판왕 : Nuxt 3 완벽 마스터
퀘이사 설치 후 오류
퀘이사 설치 후nuxt.config.ts에모듈을 추가하면 [vite-node] [ERR_LOAD_URL] quasar/lang/en-US.mjs오류가 뜨네요2번쨰 복습중인데 처음에는 잘 됐던거같은데 왜 갑자기 안되는걸까요?
-
해결됨Vue 강의 끝판왕 : Nuxt 3 완벽 마스터
nuxt3에서 javascript 사용하려면 어떻게 해야 하나요?
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 에러 뜨는데, 이 코드 작동 좀 하게 해 주세요.. ㅡ.ㅜ;
-
해결됨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; 에는 어떤 차이가 있는 것일까요?
-
미해결Nuxt.js 시작하기
layouts폴더와 default.vue에대해서 궁금한 점 있습니다!
안녕하세요~! nuxt최신버전을 받게되어서 2.15.8버전으로 받게 되었습니다. 커뮤니티를 보니까 최근버전에는 layouts폴더가 없다고 하신거같은데 루트경로에 layouts폴더를 직접만들고 default.vue를 직접 추가해도 되는지 궁금합니다..nuxt폴더내에는 있어서 처음에는 layouts/default.vue에 실습을 해도 자동 build시에 문제없길래 계속 사용했는데 서버를 껐다 다시키면 원래대로 돌아가서 문의 드립니다!
-
미해결Vue 강의 끝판왕 : Nuxt 3 완벽 마스터
msw
안녕하세요! msw를 적용하려고 하다보니 쉽지가 않아서 질문드립니다!검색을 해봐도 거의 활용 사례가 없는 것 같기도 하고 그러네요..원래 nuxt같은 ssr 환경에서는 쓰기가 쉽지 않은 건가요? 그렇다면 nuxt의 노드 서버를 이용해 mock api를 구성해서 써야할까요?
-
미해결Nuxt.js 시작하기
자료가 없습니다.
learn-nuxt/layouts at master · joshua1988/learn-nuxt (github.com)에 들어가도 layout를 보니 default.vue밖에 없습니다.강사님의 다른 강의에서도 github 에 아이디 등록을 하라고 해서 등록을 해도 접근이 안되는 이유가 무엇인가요
-
미해결Nuxt.js 시작하기
에러 페이지 정의 방법 강의 문의
안녕하세요 에러 페이지 정의 방법에서 layouts 폴더 하위에 error.vue 정의하고, /profile 적성 하면 자동으로 error.vue 컴포넌트가 보이는데요~ 이게 nuxt 자체에서 에러가 발생하면 layouts 하위 error.vue가 정의 되어 있으면 사용자가 정의한 페이지로 라우팅 되게 설정이 되어 있는건가요?? 답변 미리 감사합니다.
-
미해결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를 사용하고 있는데, 저는 원래 인텔리제이가 편해서요 ...웹스톰으로 해당 강의를 그냥 따라가도 괜찮을까요 ?
-
해결됨Nuxt.js 시작하기
SSG -> SSR 배포 방식 전환
안녕하세요.SSG로 배포할 때 일반적으로 로컬에서 generate하고 dist 폴더만 서버에 올리나요?현재 운영중인 서비스는 젠킨스 서버에서 generate하고 dist 폴더만 별도 서버로 전달하는 방식으로 하고 있는데... 장/단이 있을까요?추가로 서비스가 SSG와 적합하지 않으면서... 배포시 10~17분씩 소요되어 SSR 방식으로 변경하고자 합니다.배포 프로세스를 변경하는데 nginx 서버 설정 자체도 변경이 필요한지 궁금합니다! 기존에는 ssl, proxy, dist 위치 정도만 되어 있습니다!
-
미해결Vue 강의 끝판왕 : Nuxt 3 완벽 마스터
cookie 의 expire 를 설정 하려면
안녕하세요. 강의 잘듣고 있습니다.cookie 의 expire 를 설정 하려면 별도 라이브러리를 설치해서 해야 하나요? 아니면 locale: useCookie('locale',{maxAge: 60*60}).value || useDefaultLocale().value, 와 같이 하면 되는건가요?위와 같이 하니 적용 되지 않는 것 같아서 문의 드립니다.
-
미해결Nuxt.js 시작하기
갑자기 화면에 에러가 나오네요..
안녕하세요 강사님?제가 조회 기능 개발하다가 웹 화면을 npm run dev로 다시 실행했는데요 갑자기 화면과 같이 오류가 나오게 되었습니다구글링을 해서 살려보려고 했는데 1시간째 계속 저 상태이네요 ㅠㅠ 혹시 도움을 주실 수 있을까요
-
미해결Nuxt.js 시작하기
마지막 강의까지 작성된 코드
안녕하세요.강의 정말 잘 들었습니다.혹시 마지막 강의까지 작성이 완료된 코드가 있는 브랜치가 따로 있을까요?
-
해결됨Vue 강의 끝판왕 : Nuxt 3 완벽 마스터
페이지 컴포넌트 단일 루트 요소에 div 두개도 안되는건가요?
안녕하세요.라우팅 기본 : 파일 기반 라우팅 7:39분 쯤에 보니 단일 루트 요소에 div div 가 형제요소로 있는 경우도 안되는건가요?Vue3 부터는 바뀌어서 여러개 사용해도 되는걸로 알고있어서 문의드립니다!
-
미해결Nuxt.js 시작하기
JSON Server Operator 링크에 Operator 가 없습니다.
안녕하세요.서치 기능 구현 실습중입니다.nuxt3로 강의 실습 진행 중인데 Operator 가 없는데 어떻게 하면 좋을까요?이미지 url 에 들어가는 사이트도 없어져서 picsum.photos 로 하는데 여긴 랜덤 이미지 경로가 없네요..ㅠㅠ