묻고 답해요
141만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결[최신] 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 3 시작하기
같은 레벨 자식에서의 이벤트 핸들링 방법 문의
섹션 3. Vue.js 컴포넌트 - Vue Component 통신방식에서 뷰는 항상 단방향으로(부모 -> 자식 = props, 자식 => 부모 = emit)으로 흐른다고 하셨는데요.예를들어 A아래 B,C 컴포넌트가 있고, C 화면에 있는 버튼을 클릭하면 B에 어떤 액션이 일어나야한다고 하면 아래와 같이 설계하는게 맞는것인가 궁금합니다.B->A emit 이벤트 발생A에서 B로부터 전달받은 이벤트 핸들링으로 C에 내리고있는 toggle형 props 값 업데이트C에서 A에서 내린 props를 watch하고 있다가 값이 변경되면 액션 수행제가 구상한 방식이 위와같은데 이게 최선인지 궁금합니다..다른 좋은 방법이 있다면 조언 부탁드립니다.
-
미해결[최신] 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 3 & Firebase 10 커뮤니티 만들기 풀스택 - "활용편" (with Pinia, Quasar, Tiptap, VueUse)
tiptap 스타일 파일은 따로 안 올려주시나요?
Tiptap Editor 강의를 듣다가 스타일 파일은 말씀으로는 자료에 올려주신다고 하셨지만, 자막을 보니 직접 타이핑을 하라고 말씀하시는 것 같아서요.따로 스타일 파일은 안 올려주시나요?
-
미해결Vue 3 & Firebase 10 커뮤니티 만들기 풀스택 - "활용편" (with Pinia, Quasar, Tiptap, VueUse)
LocalStorage 값 변경 자동 체크
안녕하세요스토어에서 LocalStorage 를 사용 하여 로그인 진행 중 막혀 문의 드립니다.const accessToken = ref(localStorage.getItem('auth/access_token'))또는const accessToken = useLocalStorage('auth/access_token', null);이렇게 선언하여jwt토큰 값을 저장하고토큰이 만료 되면 service 에서리플래쉬 토큰으로 재발급하여 auth/access_token 에 다시 저장 하는데isTokenValid 값이 변경이 되지 않습니다. const isTokenValid = computed(() => { if (!accessToken.value) { console.log('No access token found.'); // Optionally log when no token is found. accessToken.value = null; return false; } const rtn_valuue = isTokenExpired(accessToken.value); if (!rtn_valuue) { // 토큰 만료 accessToken.value = null; } return rtn_valuue; }); useEventListener(window, 'local-storage', event => { if (event.key === 'auth/access_token') { console.log( 'Detected changes in access token from another tab or window.:: local', ); // 다른 탭에서 변경된 값으로 accessToken 업데이트 accessToken.value = event.newValue; } });이렇게 해도 체크가 안되네요isTokenValid 값은 화면을 리로드 하면 바뀌는데로컬 스토리지가 변경 되었을때는 변화가 없네요해결 방안좀 부탁 드립니다.감사합니다.
-
미해결[최신] Vue 강의 끝판왕 : Nuxt 3 완벽 마스터
msw
안녕하세요! msw를 적용하려고 하다보니 쉽지가 않아서 질문드립니다!검색을 해봐도 거의 활용 사례가 없는 것 같기도 하고 그러네요..원래 nuxt같은 ssr 환경에서는 쓰기가 쉽지 않은 건가요? 그렇다면 nuxt의 노드 서버를 이용해 mock api를 구성해서 써야할까요?
-
해결됨Vue 3 시작하기
vue 개발자도구 refresh event 문제
component events에서 refresh log가 보이지 않습니다.component의 event listners에서 refresh: not declared인 것이 문제일까요?코드도 함께 첨부합니다.
-
미해결Vue 3 & Firebase 10 커뮤니티 만들기 풀스택 - "활용편" (with Pinia, Quasar, Tiptap, VueUse)
Volar Deprecated
안녕하세요. 오랜만에 들어서 다시 처음부터 듣고있는데요 Volar 관련된 플러그인이 다 Deprecated되었다고 합니다. 대체할 게 있을까요?
-
미해결쉽고 빠르게 배우는 Vue 3 기본 (Composition API)
재밌는 강의였습니다!!
또 다른 강의도 있을까요??
-
미해결Vue 3 & Firebase 10 커뮤니티 만들기 풀스택 - "활용편" (with Pinia, Quasar, Tiptap, VueUse)
호스팅 문제 관련 질문 있습니다.
안녕하세요!! 강의를 보며 호스팅까지 진행하였습니다. 이후 설정된 url로 이동하니 이화면으로 계속 이동이 되는데 무슨 오류가 있는건지 어려워서요.. 혹시 해결방법이 있을까요?
-
미해결Vue 3 & Firebase 10 커뮤니티 만들기 풀스택 - "활용편" (with Pinia, Quasar, Tiptap, VueUse)
안녕하세요!
안녕하세요~좋아요 수, 북마크 수, 댓글 수 카운팅 강의들으면서firebase emulator 실행하려고 하는데이 오류가 발생하며 계속 시작이 안되는데 어떻게 해결해야할지 모르겠습니다 ~~!이미지가 잘보이지 않는거 같아 코드 복사해서 첨부 합니다! --오류 코드 i emulators: Starting emulators: auth, functions, firestore, hosting, storage! functions: The following emulators are not running, calls to these services from the Functions emulator will affect production: database, pubsubi firestore: Firestore Emulator logging to firestore-debug.log+ firestore: Firestore Emulator UI websocket is running on 9150.! firestore: Fatal error occurred: Firestore Emulator has exited with code: 3221225786, stopping all running emulatorsi functions: Stopping Functions Emulatori firestore: Stopping Firestore Emulatori auth: Stopping Authentication Emulatori eventarc: Stopping Eventarc Emulatori hub: Stopping emulator hub
-
미해결쉽고 빠르게 배우는 Vue 3 기본 (Composition API)
Emit관련 질문이용!
제가 잘 이해가 안 가서 그렇습니만;;provide/Inject 1:17에 카테고리를 클릭하면 name=List로 수정되서 List쪽이 렌더링 되야 하는데 왜 name이 Post로 계속 남아있는 걸까요?? change-id는 클릭을 했을 때만 수정 되야 하는 거 아닌가요??
-
미해결[최신] 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 3 기본 (Composition API)
inject SiteHeader @click 에러 해결법
강의에 나온대로 작성시 @click에 함수 두개를 넣을시 에러가 남. @click=" (e) => { updateName('List') updateCategory(item) } "이렇게 함수 표현식으로 작성 후 해결 완료이유는 잘몰루겠네요