묻고 답해요
130만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결Vue 강의 끝판왕 : Nuxt 3 완벽 마스터
macro=true 는 뭔가요?
강의 잘 보고 있습니다.nuxt3가 버전없이 되어서 그런지, 강의에서는 안 보이는 _nuxt/pages/index.vue?macro=true 이런게 많이 보입니다.라우팅을 확인하기 위해서 개발자 도구의 network에서 보면 이런 코드가 다 들어가 보이는데..이건 뭐며, 로딩이 안되게나 해당 페이지 사용시 로드하는 형태는 불가능한가요??home으로 이동시 index.vue 로드해서 가져오고, about 클릭시 about.vue를 정상적으로 로드해서 정상적으로 code split이 이루어지고 있는 상태인데.. 해당 페이지를 리로드해서 가져오면.. 이처럼 pages 밑에 있는 모든 파일의 macro=true로 다 가져오고 있거든요..알려주시면 감사하겠습니다.. 아.. 코드 오류 발생시 저 macro=true 붙은 것을 화면에 많이 뿌려주어서 더 궁금합니다..
-
미해결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.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
깃허브 vue-todo 접근불가에 따른 확인요청
깃허브 권한이 별도 없다고해주셨는데, 아래와같이 vue-todo 접근이 불가해서 확인부탁드리려합니다.
-
미해결Vue 강의 끝판왕 : Nuxt 3 완벽 마스터
메타 태그 질문입니다.
안녕하세요Nuxt3를 이용해서 서비스를 개발중인 수강생입니다. 저는 middleware단에 useSeoMeta를 사용해서, 각 페이지별로 메타태그가 들어가게 해놓고,일부 페이지는 axios 모듈로 api 서버에 request하고 response받은 값을 useHead()를 통해 meta태그로 설정하려고 하고 있습니다. 빌드해서 확인해보니, 콘솔에는 해당 페이지에 사용하고자 하는 메타태그가 잘 찍히는데, 막상 페이스북 공유하기 버튼이나 카카오톡에 링크를 붙여넣는등의 행위를 할때 이미지나 타이틀등이 안보입니다. 미들웨어에서 페이지의 메타태그를 한번 씌워놓으면 해당 pages 폴더의 vue파일에서 다시 메타태그 설정이 안되는지 궁금하고, api response값을 메타태그에 사용하려면 어떻게 하는지 궁금합니다. 크롬 개발자도구에서 head 부분을 보면, 메타 태그는 잘 들어가 있는걸 확인할 수 있었습니다.
-
미해결[웹 개발 풀스택 코스] Vue.js 프로젝트 투입 일주일 전 - 기초에서 실무까지
route에서 prefetch와 component 지정 방식 문의
안녕하세요.HomeView 처럼 항상 들어가는 페이지는 vue를 지정하는 방식과 prefetch 하는 방식의 차이점이 있는 건가요?import 해서 사용하면 lazyloading 인데, prefetch 설정을 해서 vue를 지정한 방식과 동일한 효과를 얻는 것이라고 보면 될까요? 감사합니다.
-
미해결Vue3 완벽 마스터: 기초부터 실전까지 - "실전편"
eslint 링크 에러
eslint와 관련된 설정값 파일 링크가 404가 발생합니다!
-
미해결퀘이사(Quasar) 완벽 마스터: Vue 프론트 웹을 빠르게 만들고 싶다면! (Based Vue3)
q-input과 :rules 속성을 함께 쓸때, items-center 속성이 이상한 현상
안녕하세요q-span과 q-input을 나란히 배치하는 UI를 만들고 있습니다. 세로 중앙정렬을 위해서 Container에 item-center 옵션을 사용하고 있는데, q-input에 :rules 속성만 주면 중앙 정렬이 깨지네요. 어떻게 해야 세로 중앙정렬이 가능할까요? 아래는 제가 시도해본 4가지 상황입니다. ps. 글쓰는거 코드랑 함께 넣는거 어렵네요. ㅠㅠ<template> <q-page> <!-- 유효성 검사 없이 items-center --> <div class="row q-mt-md bg-primary"> <div class="row full-width items-center"> <q-span class="text-h6 col-3" align="right">신청자</q-span> <q-span class="col-1"></q-span> <q-input class="" dense outlined v-model="userName" /> </div> </div> <!-- 유효성 검사와 items-center 모두 없음 --> <div class="row q-mt-md bg-primary"> <div class="row full-width"> <q-span class="text-h6 col-3" align="right">신청자</q-span> <q-span class="col-1"></q-span> <q-input class="" dense outlined v-model="userName" /> </div> </div> <!-- 유효성 검사와 items-center 모두 존재--> <div class="row q-mt-md bg-primary"> <div class="row full-width items-center"> <q-span class="text-h6 col-3" align="right">신청자</q-span> <q-span class="col-1"></q-span> <q-input class="" dense outlined v-model="userName" :rules="['text']" /> </div> </div> <!-- 유효성 검사 존재하고 items-center 없을 경우 --> <div class="row q-mt-md bg-primary"> <div class="row full-width"> <q-span class="text-h6 col-3" align="right">신청자</q-span> <q-span class="col-1"></q-span> <q-input class="" dense outlined v-model="userName" :rules="['text']" /> </div> </div> </q-page> </template>
-
미해결Vue3 완벽 마스터: 기초부터 실전까지 - "기본편"
컴포넌트 간 데이터 전달 시
상위에서 하위로 데이터 변경 시에는 props에 담아서 전달하고,하위에서 상위 컴포넌트로 데이터 변경 전달 시에는 emit을 가지고 이벤트 핸들링을 한다고 공부 했습니다.그리고 vuex , pinia 같이 전역상태관리 라이브러리로 하는 법도 있는데 실무에선 보통 후자로 하는 게 바람직 한 가요?
-
미해결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.js 시작하기 - Age of Vue.js
App.vue 내용 변경했는데 창이 연결할수없대요ㅜㅜ
App.vue 다 삭제하고 다시 시작해서 template태그에 div태그만 적었는데 갑자기 차이 연결할수없다고 떠요 ㅜㅜ
-
미해결Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
깃허브에 문제있는것 같습니다.
깃허브에 문제있는것 같습니다.vue-todo 폴더에 들어가지지 않습니다.확인 바랍니다.
-
미해결퀘이사(Quasar) 완벽 마스터: Vue 프론트 웹을 빠르게 만들고 싶다면! (Based Vue3)
Key값으로 Object 사용가능할까요?
안녕하세요. 질문이 있습니다.부모 컴포넌트에서 자식 컴포넌트를 리로드하기위해서 key값을 이용하고 있습니다.key값으로 object를 사용하고 있고 값 변경을 감지하고 리로드되고 있습니다.그런데 vue 문서에 보니 key값으로 Number, String, Symbol만 적혀있고 Object는 적혀있지 않아서요.key 값으로 Object를 사용하면 안되는걸까요?안된다면 id, enable 두개 값 중 하나라도 변경 되었을경우 자식 컴포넌트를 리로드하는 방법이 있을까요? <vn-list-in-vng :grp_info="grp_info" :key="grp_info" /> grp_info: ref({ id: Number(0), enable: Number(0), lv1_id: Number(0), }),
-
미해결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 값은 화면을 리로드 하면 바뀌는데로컬 스토리지가 변경 되었을때는 변화가 없네요해결 방안좀 부탁 드립니다.감사합니다.
-
미해결Vue3 완벽 마스터: 기초부터 실전까지 - "기본편"
eslint와 prettier를 설정 했는데.. 매번 프로젝트를 시작할 때 마다 이렇게 다 처음부터 설정을 해야하나요?
eslint와 prettier를 설정 했는데.. 매번 프로젝트를 시작할 때 마다 이렇게 다 처음부터 설정을 해야하나요?
-
미해결Vue.js - Django 연동 웹 프로그래밍 (실전편)
VUE에서 라우터를 쓰면 django랑 연동이 안되나요?
vue에서 라우터 기능이 정말 좋다고 생각했는데 강의에서 메인콤포넌트로 해서 공유했던 방식이 아니라 메인 페이지에 두고 라우터 기능으로 하단만 바뀌게 하는게 훨씬 좋을 것 같아서요. vue라우터 기능을 못쓰면 장고랑 연동할지도 고민이 됩니다. 꼭 답변 부탁드려요. ㅠㅠ
-
미해결Nuxt.js 시작하기
layouts폴더와 default.vue에대해서 궁금한 점 있습니다!
안녕하세요~! nuxt최신버전을 받게되어서 2.15.8버전으로 받게 되었습니다. 커뮤니티를 보니까 최근버전에는 layouts폴더가 없다고 하신거같은데 루트경로에 layouts폴더를 직접만들고 default.vue를 직접 추가해도 되는지 궁금합니다..nuxt폴더내에는 있어서 처음에는 layouts/default.vue에 실습을 해도 자동 build시에 문제없길래 계속 사용했는데 서버를 껐다 다시키면 원래대로 돌아가서 문의 드립니다!