안녕하세요~1번은 전달한 인자를 그대로 함수에서 받아서 의문이 안생기는데,2번은 인자를 전달하지 않았는데, 함수에서는 event 인자를 받네요? event 인자는 자동으로 사용가능한 개념인지요?답변 주시면 감사하겠습니다~ 1.전달 한 인자를 함수에서 그대로 받음printEventInfo('text', $event)printEventInfo(message, event) 2.인자를 전달하지 않았는데 함수에서는event를 인자로 받음@keyup="onKeyupHandler"onKeyupHandler(event) on<template> <button @click="printEventInfo('text',$event)">inline event handler</button> <input type="text" @keyup="onKeyupHandler"/> </template><script> export default{ const printEventInfo=(message, event)=>{ console.log(message) console.log(event.target) console.log(event.target.tagName) } const onKeyupHandler=(event)=>{ console.log(event.key) } } </script>

안녕하세요 짐코딩님,강의 잘 듣고 있습니다!강의 듣다가 궁금한게 있어서 질문드려요!피니아 persist 사용하면서 localStorage 또는 sessionStorage에 저장할 때 암호화해서 저장하는 방법이 있을까요?

<template> <div> <q-page padding> <div class='text-center q-py-xl'> <div class='text-h4'> {{ $route.path }} </div> </div> </q-page> </div> </template> <scipt lang='ts'> //아래 문장을 추가해야 링크클릭 가능 export default { }; console.log('prefetching-1'); </scipt> <script setup lang="ts"> </script> <style scoped> </style> 일단 각 prefetching-1,2,3 vue파일에 script 부분에 export default를 선언해야 강의로드맵 클릭했을때 이동이 되는데 왜그런가요?? 강의교안에는 그런게 없어서 영상에는 이동이 잘 되는데 말이죠.. <NuxtLink v-slot="{ navigate }" custom to="/course/prefetching-1"> <q-item clickable @click="navigate()">Prefetching Test 1</q-item> </NuxtLink> <NuxtLink v-slot="{ navigate }" custom to="/course/prefetching-2"> <q-item clickable @click="navigate()">Prefetching Test 2</q-item> </NuxtLink> <NuxtLink v-slot="{ navigate }" custom to="/course/prefetching-3"> <q-item clickable @click="navigate()">Prefetching Test 3</q-item> </NuxtLink>Prefetching에서 NuxtLink tag 안에 custom을 제거하면 prefetching이 정상적으로 되고 custom을 입력하면 prefetching이 되지 않는 것을 console.log에서 확인하였어요.. 혹시 왜그런지 아실까요? source : https://github.com/nhs0912/onego-front/tree/routing

질문삭제

안녕하세요. nuxt까지는 설정을 하였는데요 .잘 안되서 공식문서에 있는 순서대로 터미널로 그냥 만들어봤는데요.npx nuxi@latest init <project-name>https://nuxt.com/modules/quasar여기까지 초기페이지가 잘 나왔어요. 그런데 quasar를 공식문서에 있는 것 처럼 설치 해보니깐# Using npmnpm install quasar @quasar/extras npx nuxi@latest module add quasar ERROR  [nuxt] [request error] [unhandled] [500] __QUASAR_SSR_SERVER__ is not defined npm run dev 이후에 웹페이지 초기화면 새로 고침을 하면 이런 에러가 나오는데 혹시 어떤게 문제인지 알수 있나요? 

처음에 퀘이사 프로젝트를 생성하고, unplugin-vue-router가 동작하지 않아 적잖이 당황했습니다.   여러 테스트를 해본 결과... 다음과 같은 결과를 얻었습니다. 1/25일 기준, 최신 Vue/Vue Router 기준으로... "vue": "^3.5.0", "vue-router": "^4.5.0" unplugin-vue-router의 0.8.8까지만 호환되는 걸 확인했습니다. "unplugin-vue-router": "^0.8.8", 정확히, 0.9.0으로 하니까..chunk-NFXBJ25B.js?v=f99a8603:1268 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'forEach')위의 오류가 나더군요... 덧) 강사님 최신 unplug-vue-router 호환이슈좀 해결해 주세요.. ~~ ^^ 

하아 너무 답답하네요레거시나 베타버전 다 설치해봤고,충돌일까싶어서 한개씩만 설치도 해봤는데안됩니다...강의의 반만 따라가는 것 같아서 참 답답합니다...어떻게 해결방법이 없을까요?

질문은 자세하게 적어주실 수록 좋습니다. 어느 부분을 수강중이신지 =>vue 설치 수강 내가 어떻게 했는데, 어떤 결과가 나오기를 기대했는데, 다른 결과가 나왔는지=> terminal에 npm~을 입력했는데 npm : 'npm' 용어가 cmdlet, 함수, 스크립트 파일 또는 실행할 수 있는 프로그램 이름으로 인식되지 않습니다. 이름이 정확한지 확인하고 경로가 포함된 경우 경로가 올바른지 검증한 다음 다시 시도하십시오 라고 표기됨 작성하신 코드 및 오류 스크린샷 npm i -g @vue/cli 을 함께 첨부해주시면 좋아요!

안녕하세요~ 웹 레이아웃 구성 default.vue 파일의 코드 일부분 입니다.route.meta? 에서 ?물음표개념이 어떻게 될까요?지워도 작동해서 질문 드립니다.답변 주시면 감사하겠습니다. const pageContainerStyles = computed(() => ({ maxWidth: route.meta?.width || '1080px', margin: '0 auto', }));  

여러 개의 HTML 요소를 v-if로 조건부 렌더링을 하고 싶다면 template 태그로 감싸고 v-if를 사용하여 렌더링 하면 된다고 말씀해주셨는데, template 태그가 아닌 div, ul 등으로 감싸도 동일하게 작동하는 것을 확인했습니다. 기존 React를 사용하는 제 입장에서는 template 태그를 사용하지 않고 후자와 같은 방법으로 조건부 렌더링을 걸곤 했는데,혹시 여러 개의 요소를 하위 요소로 담고 있는 상위 일반 HTML 태그에 v-if를 사용하는 것과, template으로 묶어 사용하는 것에 차이가 있는지 질문드립니다!

크롬 확장 프로그램 vue devtools 이 안되서 강의 듣는데 좀 답답하네요 ㅠㅠ<app-content v-bind:propsnum="message"></app-content>이렇게 적으면 hi가 나오고<app-content v-bind:propsnum="num"></app-content>이렇게 적으면 10이 나오고근데 '<h1> {{propsnum}} {{propsdata}}</h1>',이렇게 두개는 안나오고...어렵습니당..직접 데이터 확인해보면 좋은데 왜 확장프로그램이 안될까요....ㅠㅠㅠ 레거시로 깔았는데도 개발자도구에서 vue탭이 안보여요,.. <app-content v-bind:propsnum="message"></app-content> </div> let appContent={ template : '<h1> {{propsnum}} {{propsdata}}</h1>', props:['propsnum','propsdata'] } new Vue({ el: '#app', components:{ 'app-header' : appHeader, 'app-content' : appContent }, data:{ message : 'hi', num:10 } })

component.html:11 Uncaught ReferenceError: Vue is not defined at component.html:11:20(anonymous)@component.html:11""콘솔 에러가 뜹니다..

강의 동영상화면이 안떠요,, 이전 이후 강의는 뜨는데..왜그런걸까요?

<img src="https://i.ibb.co/XbsPPmQ/image.png" />이 사진 주소 바뀐거같아요

수업 시간에 보면서 따라하고 있는데,AppCard.vue 파일에서<slot :child-messag="childMessag" :hello-messag="helloMessag">#body</slot>위의 코드처럼 :hello-messag 로 하는 게 맞는 건가요?아니면 강의 화면처럼hello-messag로 하는 게 맞는 건가요?(16:43 강의 화면 참고) 처음에만 : 쓰고 그 이후 부터는 생략이 가능한 걸 까요??

헷갈리시는분들 제목 참조용

안녕하세요. component에서 props와 slots에 동일한 name을 갖고 있을 때,slot 형태로 전달해도 무시되고 props만 인식됩니다.혹시 이럴 때 slot | string 받을 수 있는 방법이 있을까요? <slot name="prefix" /> props: { prefix: { type: String .... }}

안녕하세요.호돌맨님 인강 들으면서 어찌저찌 취업하게 된 신입 개발자입니다. 현재 postDelete 로 단일 데이터를 검증 후 삭제하고있는데,만약 List로 된 다중 PK 를 검증하고 삭제할 때는 어느 방법이 좋은건지 잘 모르겠습니다. public void postAllDelete(List<Long> postIds) { //1번 List<Post> posts = postRepository.findAllById(postIds); if(posts.isEmpty()) throw new IllegalArgumentException("삭제할 게시글이 존재하지 않습니다."); postRepository.deleteAll(posts); //2번 postIds.forEach(e-> { Post post = postRepository.findById(e) .orElseThrow(PostNotFound::new); postRepository.delete(post); }); } 1번 같은 경우는 조회 및 삭제 각 한번씩 DB 를 호출해서 성능적으로 좋다고 생각하는데,리스트에 담겨져있는 PK 가 유효한지 검증하려면 stream API 를 사용하여 map 으로 PK 추출 후 filter 로 검증을 하는게 좋은건지, 혹은 다른 방법이 있는지 궁금합니다 물론 현재는 데이터가 많이 없으니 어느 방법을 채택해도 상관없지만추후에 대량의 데이터를 접하게될 때를 생각하다보니,,  어떻게 보면 인강과 관련없는 질문이긴한데,,염치 불구하고 도움 주시면 감사하겠습니다.

질문은 아닙니다.다른 분들을 위해 공유 차 남겨둡니다.@pinia/nuxt 버전이 0.9.0인 경우 @pinia-plugin-persistedstate/nuxt와 충돌이 발생합니다.@pinia/nuxt 버전이 0.9.0를 0.5.0으로 낮춰주시면 충돌 문제를 해결할 수 있습니다.

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. eslint 가 적용 되지 않습니다. 저장시에 더블 코트가 싱글 코트로 변경되어야 하는데, 되지 않네요.vue 코드들도 저장시에 자동정렬도 되지 않고 있습니다ㅠ아래는 차례대로 package.json, setting.json, .eslintrc.cjs, .prettierrc.json 입니다{ "name": "learn-vue3", "private": true, "version": "0.0.0", "type": "module", "scripts": { "dev": "vite", "build": "vite build", "preview": "vite preview" }, "dependencies": { "bootstrap": "^5.3.3", "lint": "^0.8.19", "prettier": "^3.4.2", "vue": "^3.1.9" }, "devDependencies": { "@vitejs/plugin-vue": "^5.2.1", "eslint": "^9.17.0", "eslint-plugin-vue": "^9.32.0", "vite": "^6.0.3" } }   { "eslint.validate": [ "javascript", "javascriptreact", "typescript", "typescriptreact", "html", "vue", "markdown" ], "editor.codeActionsOnSave": { "source.fixAll.eslint": true }, } import js from '@eslint/js' import pluginVue from 'eslint-plugin-vue' import skipFormatting from '@vue/eslint-config-prettier/skip-formatting' export default [ { name: 'app/files-to-lint', files: ['**/*.{js,mjs,jsx,vue}'], }, { name: 'app/files-to-ignore', ignores: ['**/dist/**', '**/dist-ssr/**', '**/coverage/**'], }, js.configs.recommended, ...pluginVue.configs['flat/essential'], skipFormatting, { rules: { 'no-console': 'warn', // console 메서드 사용시 경고(warn) 표시 }, }, ]{ "$schema": "https://json.schemastore.org/prettierrc", // Prettier 설정 스키마 "semi": false, // 세미콜론 생략 "singleQuote": true, // 작은따옴표 사용 "arrowParens": "avoid" // 매개변수 하나일 때 괄호 생략 }