묻고 답해요
156만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결Vue 3 시작하기
vue3로 이벤트 버스 관련부분 처리해봤는데요
안녕하세요vue3로 시작해서 열심히 교육 듣다가 이벤트 버스에서 막혔습니다.아직 vue가 초보라 구글링 보면서 이방법 저방법 해보다 잘 안되서 결구 mitt를 사용해서 해결했습니다. 우선npm install --save mitt로 mitt 설치했고 main.js에 mitt 세팅해주고NewsView.vue에서 이벤트 보내주고App.vue에서 받아서 처리하는 방법을 썻습니다.일단 잘 되는거 같아 다행인데요 질문이 좀 있습니다.질문1혹시 더 좋은 방법이 있었으면 알려주셨으면 합니다.위에 소스에서 잘못사용한거 같은 부분도 좀 알려주셨으면 합니다. 질문2첨에 NewsView.vue에서 $emit으로 start,stop 보내고App.vue에서 NewsView를 import하고 템플릿에 NewsView 세팅해주고 @이벤트명="aaa"로 받아서 methods에서aaa() {} 안에 처리하려고 했습니다.그런데 첨에 페이지 들어갈때는 되는데 페이지 이동하면$ emit가 실행이 안되네요 emit 위아래는 console.log가 찍히는데 왜 app.vue로 emit이 왜 안가는걸까요?=================================<<NewsView.vue>>this.$emit('eventBus', 'start');this.$store.dispatch('FETCH_NEWS');this.$emit('eventBus', 'stop'); <<App.vue>><template><news-view @eventBus="lodings"><news-view></template>import NewsView from './views/NewsView.vue'methods: {lodings(event) {if(event === 'start') {this.startSpinner();}else if(event === 'stop') {this.endSpinner();}}};=================대충 이런느낌으로============ 질문3두번째로 this.$store.dispatch를 사용해서 처리해보려고 했습니다.NewsView.vue 화면에서this.$store.dispatch('EVENT_BUS_START');this.$store.dispatch('FETCH_NEWS');this.$store.dispatch('EVENT_BUS_STOP');이런식으로 처리해서 index.js에서 세팅한 eventBus값을 바꿔서 app.vue에서 $store.start.eventBus값을 불러서 처리하려고 했는데 stop만 인식하더군요NewsView.vue 화면에서 다 처리된값만 인식하는 걸까요?일단 질문드리지만 뭔가 설명을 잘 못적겠네요소스를 지워서 사진으로 보여드릴수 없지만 질문 이해되시면답장좀 부탁드립니다.
-
해결됨Vue 3 시작하기
Vue Directive: v-for 강의 영상의 재생되지 않습니다.
무한 로딩상태에서 진전이 없어요~확인부탁드립니다.
-
해결됨Vue 3 시작하기
맥 환경에서 Cmder 대체 툴
Cmder은 윈도우 환경을 위한 툴로 알고 있는데 맥 환경에서는 어떤 툴을 사용하는게 좋을까요? 추천하실만한 툴이 있으실까요? 감사합니다.
-
해결됨Vue 3 & Firebase 10 커뮤니티 만들기 풀스택 - "활용편" (with Pinia, Quasar, Tiptap, VueUse)
vite-plugin-vue-layouts 종속성 충돌 관련
안녕하세요,vue-plugin-vue-layouts 설치 시 종속성 충돌 관련 에러가 발생합니다.(node 및 npm, 그리고 package.json 내용 모두 강좌와 동일하게 진행중입니다.) github issue를 보니 vite version 관련한 문제로 보인다, 4.0.0을 지원해달라 등의 이야기가 있습니다.혹시 저와 같은 문제를 겪으신 분은 안계실까요?이 때, vite 버전 문제 관련한 부분을 해결(?)한 사람이 있더라고요.https://github.com/charrue/vite-plugin-vue-layoutsa. 원본을 fork한 이 것을 프로젝트에 설치해서 사용 시에 문제가 될까요?b. a 방법보다는, 원본에 --force 옵션을 두고 설치하는 것이 더 나은 선택일까요?
-
해결됨Vue 3 & Firebase 10 커뮤니티 만들기 풀스택 - "활용편" (with Pinia, Quasar, Tiptap, VueUse)
메뉴 컴포넌트 분리..
안녕하세요~ default.vue에서 헤더의 메뉴 부분 컴포넌트를 분리해봤는데그럼 authDialog 가 활성화가 안 되더라구요..방법이 없을까요?
-
해결됨Vue 3 중급 - Composition API
강의 노트 관련 문의입니다 :)!
안녕하세요, 이전 vuejs 3 강의부터 지금 강의까지 정말 잘 듣고 있습니다!다름이 아니라, 강의마다 말씀해주시는 '강의 하단 강의 노트'가 없는 것 같아서 문의 드립니다 😀 감사합니다!
-
미해결Vue 3 & Firebase 10 커뮤니티 만들기 풀스택 - "활용편" (with Pinia, Quasar, Tiptap, VueUse)
비밀번호 재설정에서 질문있습니다!
안녕하세요, 파이어베이스 인증 부분'비밀번호 변경하기' 강의에서 궁금한 것이 있어 질문드립니다. 비밀번호 재설정을 위해 이메일로 재설정 링크를 발송하고재설정할 비밀번호를 입력하면이 창이 뜨는데, 여기서 저는 비밀번호 재설정 후 바로 제가 원하는 로그인화면으로 나왔으면 좋겠습니다. 상기의 화면은 제가 생성한 파일이 아니라firebase에서 보여주는 화면인데,그 부분은 어떻게 해야할까요, 그럼 확인부탁드리겠습니다감사합니다!
-
미해결Vue 3 & Firebase 10 커뮤니티 만들기 풀스택 - "활용편" (with Pinia, Quasar, Tiptap, VueUse)
vite로 프로젝트를 만들어서 진행해도 문제 없을까요?
안녕하세요~당연히 강의 내용을 따라가는게 맞긴 합니다만, 제가 백엔드 개발자라 인텔리제이 IDE를 쓰는게 편해서 강의를 인텔리제이로 진행중입니다vite로 프로젝트를 만들면 인텔리제이에서 뷰로 인식해서 여러 vscode에서 따로 설치해야하는 플러그인 기능을 기본으로 제공해주더군요근데 퀘이사로 프로젝트를 생성하면 이같은 기능이 동작하지 않네요 정리하자면 vite로 프로젝트를 만들어서 퀘이사를 설치해도 후반부 강의에 문제 없을까요?
-
해결됨Vue 3 중급 - Composition API
할일추가, 조회 기능 리팩토링 App.vue 강의 내용이 없습니다
색션1만들면서 배우는 Composition API 내용에서[할일 추가,조회 기능 리팩토링] 강의 에서 App.vue 에 코드가 갑자기 많이 바뀌게 되어서 나오는데(예) fetchTodos 함수가 추가가 되었고, TodoList에 todoItems가 추가가 되었음해당 내용은 설명하는 부분도 없는데 코드를 어디서 확인을 할 수 있나요??TodoList.vue 도 변경된게 있는지 알고 싶습니다
-
미해결Vue 3 & Firebase 10 커뮤니티 만들기 풀스택 - "활용편" (with Pinia, Quasar, Tiptap, VueUse)
Auto Layout 설정 관련 오류 문의드립니다.
해당 강의에서 처음으로 서버를 틀었을 때우선 터미널 창에 App • ⚠ quasar.config.js > invalid Vite plugin specified (cannot find it): unplugin-vue-router/vite 이런 코드가 떴고,페이지에 접속했을 때에는[plugin:vite:import-analysis] Missing "./auto" export in "vue-router" packageC:/Users/soyou/vue3-quasar-app/src/router/index.js이런 오류 코드가 떴습니다.강의 코드 그대로 따라했는데, 어디서 오류가 난 것인지 모르겠어 문의드립니다.
-
해결됨Vue 3 & Firebase 10 커뮤니티 만들기 풀스택 - "활용편" (with Pinia, Quasar, Tiptap, VueUse)
self closing rule 추가하기
엘리먼트 자동으로 닫을 수 있는 eslint 룰설정입니다. vscode 자동 저장 기능이랑 같이 설정하면 <q-space></q-space>가 <q-space /> 로 수정됩니다. rules: { 'prefer-promise-reject-errors': 'off', 'vue/multi-word-component-names': 'off', // allow debugger during development only 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off', 'vue/html-self-closing': [ 'warn', { html: { void: 'always', normal: 'never', component: 'always' }, svg: 'always', math: 'always' } ]
-
미해결Vue 3 & Firebase 10 커뮤니티 만들기 풀스택 - "활용편" (with Pinia, Quasar, Tiptap, VueUse)
email인증 관련 문의드립니다
안녕하세요 email인증 진행 중 오류가 발생하여 문의드립니다.코드는 확인하였고, 구글 콘솔에서 템플릿도 확인하였습니다.(템플릿에서 따로 수정한것은 없음)이메일도 정상적으로 발송되었으나, 해당 링크로 들어가면 이런 에러페이지가 발생하여 이메일 인증이 되지 않고있습니다..무엇이 문제인지 검색해보았지만 답을 찾지 못해 문의남깁니다.// sendEmail for verification export async function sendVerificationEmail() { await sendEmailVerification(auth.currentUser); console.log(auth.currentUser.emailVerified) }
-
미해결Vue 3 & Firebase 10 커뮤니티 만들기 풀스택 - "활용편" (with Pinia, Quasar, Tiptap, VueUse)
14강 에러문의 드립니다!
<template v-for="(_, name) in $slots" :key="name"> 여기 부분에서 _ 이 부분에 배열 요소 구조 파괴 패턴이 필요합니다.ts(1181), 문제 보기 (<Alt>+F8) 빠른 수정을 사용할 수 없음 이 에러가 나거든요??근데 또 실행은 잘 되는데, 빨간색 줄이 여간 신경이 쓰여서...ㅎㅎㅎ; 문의드립니다.
-
미해결Vue 3 시작하기
후속강의는 언제 나올 예정인가요?
궁금합니다!
-
해결됨Vue 3 & Firebase 10 커뮤니티 만들기 풀스택 - "활용편" (with Pinia, Quasar, Tiptap, VueUse)
env 환경변수 설정하는 방법이 궁금합니다.
안녕하세요.해당 강의 수강하면서 프로젝트 진행 중에 궁금한 점이 있어 질문드립니다.실무 환경에서 axios를 이용해 API 호출을 한다고 가정하였을 때, [local, stage, prod] 와 같은 다양한 환경에 대하여 API 호출 도메인이 달라지게 됩니다.vite를 사용하였을 때에는 .env.local, .env.stage, .env.prod와 같이 환경에 따른 변수를 지정하고, vite --mode local 과 같은 형태로 실행하는 환경을 설정할 수 있었는데요.이러한 다양한 환경에 다른 값을 지정해야할 떄에 어떻게 사용하시는지 궁금합니다.
-
미해결Vue 3 & Firebase 10 커뮤니티 만들기 풀스택 - "활용편" (with Pinia, Quasar, Tiptap, VueUse)
IntelliJ 환경에서 UnpluginViewRoute 설치 후 route 태그를 읽지 못하고 있습니다.
인텔리제이에서 작업해야하는 환경이라 최대한 환경설정을 맞추면서 하고 있습니다 router들은 잘 반영이 되어있고 화면에서도 Default Layout 은 적용되어 있는 상태인데, route 태그를 통해 meta 및 layout을 변경하려고 할 때 적용이 되지 않습니다.혹시 이유를 알 수 있을까요?
-
해결됨Vue 3 시작하기
컴포넌트간의 데이터 이동에 대해
안녕하세요.동일 레벨 컴포넌트간에 데이터를 주고 받는 방법에 대해 레벨1 -루트레벨2 - 컴포넌트a, 컴포넌트b인경우컴포넌트a -> 루트 -> 컴포넌트b 라고 수업내용에서 배웠습니다.그렇다면 계층이 더 깊은 경우는 어떻게 되나요?예를 들어 컴포넌트 구조가 레벨1 -루트레벨2 - 컴포넌트a-1, 컴포넌트b-1레벨3 - 컴포넌트a-2, 컴포넌트b-2인경우 (트리구조 비슷한?)컴포넌트 a-2에서 b-2로 전달하려면 컴포넌트a-2 -> 컴포넌트a-1 -> 루트 -> 컴포넌트b-1 -> 컴포넌트b-2 이런식으로 루트를 통해야 되나요? 그리고 a-2옆에 같은 레벨의 a-3이 있다면,이또한 루트까지 데이터를 올린다음 내려 받아야 할까요? 이런 느낌입니다.
-
해결됨Vue 3 시작하기
Event Emit 구현에서 이벤트가 여러개의 경우
<app-contents v-on:refresh="showAlert"></app-contents> methods: { sendEvent() { this.$emit('refresh'); } }강의 코드의 경우, 이벤트가 하나인데요.여러개의 경우 어떻게 작성하는게 좋을까요? 예를 들어methods: { sendEvent1() { this.$emit('refresh1'); }, sendEvent2() { this.$emit('refresh2'); }, sendEvent3() { this.$emit('refresh3'); }, }인경우<app-contents v-on:refresh1="showAlert1" v-on:refresh2="showAlert2" v-on:refresh3="showAlert3" > </app-contents>이런식으로 작성하나요?아니면 따로 좋은 작성방법이 있을까요? 매번 이벤트 추가할 때 마다 연결을 해줘야 하는게, 추적을 위해서 라고는 하지만 편리한지 모르겠습니다.
-
미해결Vue 3 시작하기
영상 하단에 강의노트가 있다고 하셨는데 안보입니다...
영상 하단에 강의노트가 있다고 하셨는데 안보입니다...업로드가 아직 제대로 되지 않은 것인 지, 제가 그냥 못 찾는 것인 지 모르겠네요
-
미해결Vue 3 & Firebase 10 커뮤니티 만들기 풀스택 - "활용편" (with Pinia, Quasar, Tiptap, VueUse)
Firebase: Please verify the new email before changing email. (auth/operation-not-allowed). 해결 방법
안녕하세요.해당 강의 수강 중 이메일 변경 과정에서 에러가 발생하였고, 많은 분들이 해당 에러를 겪을 것 같아 해결방법 공유드립니다.에러firebase의 정책 변경에 따른 문제인지 이메일 변경시 변경하려는 이메일에 대한 인증이 필요하다는 에러가 나타납니다.해당 에러는 이메일 열거 보호 (무차별 이메일 입력에 대한 대처)로 인해 나타나는 에러이며, 이메일 열거 보호를 해제하여 해결하였습니다.참조: https://github.com/firebase/firebase-ios-sdk/issues/11886 해결방법Firebase 프로젝트 ID 확인https://console.firebase.google.com/Firebase 콘솔 접속 -> 해당 프로젝트 접속 -> 좌측 상단 프로젝트 개요 우측 톱니바퀴 -> 프로젝트 설정화면에 노출되는 Firebase 프로젝트 생성시 작성한 프로젝트 ID를 확인합니다.gCloud shell 접속https://console.cloud.google.com/welcome?cloudshell=true위 링크 접속시 하단에 CloudShell이 노출됩니다.gcloud access token 취득CloudShell 에 아래의 명령어를 입력해 accessToken을 취득합니다.gcloud auth print-access-token --project=PROJECT_ID위 명령어의 PROJECT_ID는 1. Firebase 프로젝트 ID 확인 에서 얻은 프로젝트 ID를 입력합니다.이메일 열거 보호 비활성화CloudShell 에 아래의 명령어를 입력해 이메일 열거 보호를 비활성화 합니다.curl -X PATCH -d "{'email_privacy_config':{'enable_improved_email_privacy':"false"}}" \ -H 'Authorization: Bearer ACCESS_TOKEN' \ -H 'Content-Type: application/json' -H 'X-Goog-User-Project: PROJECT_ID' \ "https://identitytoolkit.googleapis.com/admin/v2/projects/PROJECT_ID/config?updateMask=email_privacy_config"여기서 PROJECT_ID는 3번과 동일한 프로젝트 ID를, ACCESS_TOKEN은 3번을 통해 취득한 ACCESS_TOKEN을 입력합니다.이제 이메일 변경이 잘됩니다 :)참조: https://cloud.google.com/identity-platform/docs/admin/email-enumeration-protection?hl=ko이메일 열거 보호가 서비스중인 프로젝트라면 중요하겠지만 학습을 위한 개발단계인 현재는 비활성화해도 괜찮을 것 같습니다.감사합니다.