강의 내용 TodoInput.vue 파일 중<input type="text" v-model="newTodoItem" v-on:keyup.enter="addTodo">부분에 v-model="newTodoItem" 을 사용하였습니다.이는 data 속성에 사용되었는데<input v-model="newTodoItem">computed:{ ...mapState(['newTodoItem'])}다음과 같은 느낌으로 v-model은 왜 state를 사용하지 않는 이유가 따로 있는지 궁금합니다!개인적으로 실험해봤을 때는 readonly로만 사용하라고 되어있는데 스택오버플로에선 사용한 사람도 있는 것 같기도 하고 무엇이 맞는지 궁금해용

안녕하세요 강사님!어플리케이션 탭을 보면 엄연히 key, value가 있고 value 안에 completed, item이 있는 건데...todoItem.item이 어떻게 키값이 되는건지 궁금합니다.처음 설정할 때 key값과 todoItem.item을 같게(?) 해놓으면 todoItem.item을 key 값으로 접근할 수 있나요?만약 key(id값)으로 접근하려면 어떻게 해야 하나요?초보라 질문이 많습니다 ㅠㅠ 시간되실 때 답변해주시면 감사드리겠습니다 :)

vue3 부터 slot 태그를 지원하지 않는 것 같습니다.아래와 같이 v-slot으로 작성해주셔야 합니다. 또한 v-slot은 template 태그에서만 동작 합니다. TodoInput Component<Modal v-if="showModal" @close="showModal = false"> <template v-slot:header> <i class="closeModalBtn fas fa-times-circle" v-on:click="showModal = false">경고!</i> </template> <template v-slot:body>아무것도 입력하지 않았습니다.</template> </Modal> 감사합니다.

안녕하세요~!프론트에 관심이 생겨서재미있게 강의를 듣고 있는 백엔드 개발자 입니다. 강의를 듣다보니 js는 component를 작성할 때 클래스를 만드는 것보다는 함수를 만들어서 해결하는 것 같은데요. 컴포넌트 클래스를 생성하고 spring framework 처럼 IoC를 사용하여 각 컴포넌트간에 DI를 사용할 수는 없는 건가요?감사합니다.

MongoDB connection error: { Error: querySrv ENOTFOUND mongodb.tcp.cluster0-ypgh5.mongodb.net at QueryReqWrap.onresolve [as oncomplete] (dns.js:196:19) errno: 'ENOTFOUND', code: 'ENOTFOUND', syscall: 'querySrv', hostname: '_mongodb._tcp.cluster0-ypgh5.mongodb.net' }(node:21088) UnhandledPromiseRejectionWarning: Error: querySrv ENOTFOUND mongodb.tcp.cluster0-ypgh5.mongodb.net at QueryReqWrap.onresolve [as oncomplete] (dns.js:196:19)(node:21088) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)(node:21088) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

안녕하세요~ 캡틴 판교님 수업을 잘 듣고 실무에서도 잘 사용 중입니다. 다만, 사용하다보다가 발생한 궁금증이 있습니다.Vuex의 장점들은 어디서나 쉽게 찾아볼 수 있는데, 단점이라 하면 무엇들이 있을까요? 저희가 props와 event로 component간 데이터를 주고 받는데, component의 depth가 깊어지면 단순 데이터를 내리고 올림에 있어서 복잡도도 증가하고번거로움도 생기잖아요? 그래서 eventbus가 있는데, 이 녀석은 naming rule을 아무리 잘 정해도 많이 사용하다보면서로 호출하는 곳들이 얽히고 나중엔 어디서 사용하는지 모르는 경우가 태반이라 사실상저희는 암묵적으로 금지하고 있는 상황입니다.(사실 얘도 언제 사용해야 가장 powerful하게 사용할 수 있는지 궁금하네요.) 그래서 vuex를 많이 사용하는데, vuex 사용에 있어서도 내부적으로 갑론을박이 있습니다.vuex도 eventbus 처럼 아무데서나 import만 하면 접근할 수 있어서 중구난방으로 접근이 되어서결국 관리가 복잡해진다.(실제도 redux도 처음에 적용했다가 다 걷어내는 프로젝트들이 주변에 점점 생겨나고 있어서요.) 그런데, 검색해보면 vuex는 단점이라고 설명이 되어 있는 것을 찾기가 힘듭니다.또한, 어느정도 선에서 vuex를 적용해야하는지가 애매한데, 기준을 어떤식으로 잡아야 할까요?vuex를 사용하면 .vue 파일 내부 코드나 로직들을 store쪽으로 뺄 수 있어서 많이 간략해지고 깔끔해지는 것으로 한눈에 component 구조들을 파악하기가 쉽긴 한데요.그렇다면 모든 computed나 data에서 관리하는 것들을 다 vuex로 항상 빼는 것이 정답일지알아서 적당히 구분해서 할지... 정말 필요한것만 vuex로 빼야할지 그런것들이 참 어려운 것 같습니다.마치 component를 어느정도 수준으로 세분화해서 설계할지와 같은 고민 같습니다. 제가 front 개발에 대한 지식의 깊이가 미진해서 그런지 관련해서 이야기를 한번 듣고 싶은데,제 주변에서는 마땅하지가 않아서 질문을 남깁니다.

이 수업과 관련된 질문은 아니지만, Vue 중급강좌를 완강하기 전에 미리 Vue 완벽가이드 강의를 구매하려합니다.학생할인을 50%를 제공한다고 하는데 학생증을 첨부하면 자꾸 첨부한 파일이 자꾸 사라지네요. 개발자 도구로 확인해보니 학생증 사진의 글씨를 인식하는 카카오 api가 작동을 안하는것 같습니다.혹시 학생 할인이 이제 끝난건가요? 아니면은 고쳐 주시길 부탁드리겠습니다...ㅠ 제가 학생이라 가격이 조금 부담되는게 있어서요. 답 해주시면 감사하겠습니다:)

main.jsimport { createApp } from 'vue'; import Router from './Router'; import routes from './routes'; createApp(Router) .use(routes) .mount('#root'); Router.vue<template> <div> <div> <router-link to="/number-baseball">숫자야구</router-link> <router-link to="/response-check">반응속도</router-link> <router-link to="/rock-scissors-paper">가위바위보</router-link> <router-link to="/lotto-generator">로또생성기</router-link> </div> <router-view /> <!-- 바뀌는 부분 --> </div> </template> <script> import router from './routes'; export default router; </script> routes.jsimport { createRouter, createWebHistory } from 'vue-router'; import NumberBaseball from '../3.숫자야구/NumberBaseball'; import ResponseCheck from '../4.반응속도체크/ResponseCheck'; import RockScissorsPaper from '../5.가위바위보/RockScissorsPaper'; import LottoGenerator from '../6.로또/LottoGenerator'; const routes = [ { path: '/number-baseball', component: NumberBaseball }, { path: '/response-check', component: ResponseCheck }, { path: '/rock-scissors-paper', component: RockScissorsPaper }, { path: '/lotto-generator', component: LottoGenerator }, ]; const router = createRouter({ history: createWebHistory(), routes, // }); export default { }  위와 같이 뷰 라우터 링크가 반응하지 않습니다Vue는 3.3.4 버전, Vue-router는 4.2.4 버전을 사용하고 있습니다왜.. 안될까요? 공식문서를 보면서 수정해봐도 해결이 안됩니다.   

혹시 수업에 나온 교안은 따로 볼 수 있는곳이 없는걸까요 ?

윈도우에서 개발중입니다현재 Vue .js 3 버전을 사용중이라 Vue 프로젝트 실행시 node 를 12.14.0 버전으로 사용하고 있습니다BackEnd Api 설치 후 Api 프로젝트를 실행시에는 nvm 을 이용해 10.16.3 버전으로 실행하면 정상 실행됩니다하지만 Vue 프로젝트와 Api 프로젝트 두개를 동시에 띄우려고 하니까 node 버전을 하나만 인식하기 때문에 한쪽의 프로젝트에서는 문제가 발생했습니다.위 문제를 해결하기 위해 프로젝트 최상위 경로에 .nvmrc 파일을 생성 후 노드 버전을 명시ex) 10.16.3npm use 를 실행했는데 A version argument is required but missing.에러가 출력됩니다.nvmrc 파일을 제대로 인식하지 못 하는것 같은데 이 문제를 어떻게 해결 가능할까요터미널에서 기본적인 nvm list , nvm --version 등은 모두 인식하며 터미널 재시작 및 컴퓨터 재시작도 해봤지만 동일한 현상입니다nvm 버전은 1.1.11 이며 사용하려는 node 버전은 nvm 을 통해 모두 설치되어 있습니다.

인프런 아이디: hyzcore@gmail.com인프런 이메일: hyzcore@gmail.com깃허브 아이디: hyzcore@gmail.com깃허브 username: HyungJun Lee

인프런 아이디 : ferrariq@naver.com인프런 이메일 : ferrariq@naver.com깃헙 아이디 : ferrariq@naver.com깃헙 Username : KJP-MrJAVA권한 부타드립니다.수고 하십시요

위의 그림과 같이 오류가 발생하는데, 이유를 모르겠어요.. 어떻게 해결해야 할까요? jsconfig.json 파일 안에 include 를 작성하기 전, 뷰를 설치할 때 기본적으로 작성된 코드가 있는 것들을 모두 지우고 영상 강의대로 진행했습니다. 지워진 코드는 아래와 같습니다. // "compilerOptions": { // "target": "es5", // "module": "esnext", // "baseUrl": "./", // "moduleResolution": "node", // "paths": { // "@/*": [ // "src/*" // ] // }, // "lib": [ // "esnext", // "dom", // "dom.iterable", // "scripthost" // ] // }

인프런 아이디 : ps@codeclick.co.kr인프런 이메일 : ps@codeclick.co.kr깃헙 아이디 : rhksgud123@naver.com깃헙 Username : KwanHyung Lee 댓글 달아놨는데 아직 소식이 없어서요! 부탁드립니다 ㅠㅠ

인프런 아이디 : siwoobaksa@naver.com인프런 이메일 : siwoobaksa@naver.com깃헙 아이디 : lswsepia@gmail.com깃헙 username : lswdev

vue-til-server 때문에 node 버전 10 버전대로 하면 vue cli 가 설치가안됩니다. 그래서 노드 버전을 올려서 vue cli 설치하고 나면 맨위 서버가 스타트가 안됩니다. 이 문제를 도대체 어떻게 해야하나요. 진도를 못나가서 답답하네요.

인프런 아이디 : YOON KYEOM KIM인프런 이메일 : newalpha77@gmail.com깃헙 아이디 : newalpha7@naver.com깃헙 username : KimYoonKyum

Modal.vue 의 style 에 scoped 속성을 주면 왜 slot 의 디자인이 적용되지 않는 건가요??인터넷을 뒤져보니 이렇게 동작하는 게 정상적이라고는 하지만, 정작 왜 그런지는 이해가 안됩니다.그리고 혹시 <style scoped> 를 쓰더라도 slot 에 디자인을 적용시킬 방법은 없을까요?

- 인프런 아이디: kdkj1234@naver.com- 인프런 이메일: kdkj1234@naver.com- 깃허브 아이디: kdkj1234@gmail.com- 깃허브 username: juheeeeeee12

안녕하세요. 맥북 m2으로 수업 듣고있는 수강생입니다.이전까지 수업은 잘 진행 하였는데, 이번 수업에서는 시작부터 에러가 발생해서 진행을 할 수 가 없네요..ㅠㅠ 도움 부탁드립니다.nvm 버전: 0.39.3node 버전: v18.16.1 (LTS)npm 버전: 9.5.1다른 질문들 및 에러에 대해 구글에서 살펴보고 프로젝트 폴더에서 node_modules와 package-lock.json 삭제 이후 npm i bcryptnpm i 둘 다 비슷한 에러 메세지가 발생하고 있습니다. 에러 로그는 아래와 같습니다.$ npm i bcrypt npm WARN deprecated source-map-url@0.4.1: See https://github.com/lydell/source-map-url#deprecated npm WARN deprecated swagger-methods@2.0.2: This package is no longer being maintained. npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated npm WARN deprecated source-map-resolve@0.5.3: See https://github.com/lydell/source-map-resolve#deprecated npm WARN deprecated fsevents@1.2.13: The v1 package contains DANGEROUS / INSECURE binaries. Upgrade to safe fsevents v2 npm WARN deprecated chokidar@2.1.8: Chokidar 2 does not receive security updates since 2019. Upgrade to chokidar 3 with 15x fewer dependencies npm WARN deprecated babel-eslint@8.2.6: babel-eslint is now @babel/eslint-parser. This package will no longer receive updates. npm WARN deprecated bcrypt@3.0.8: versions < v5.0.0 do not handle NUL in passwords properly npm WARN deprecated json-schema-ref-parser@7.1.4: Please switch to @apidevtools/json-schema-ref-parser npm WARN deprecated node-pre-gyp@0.14.0: Please upgrade to @mapbox/node-pre-gyp: the non-scoped node-pre-gyp package is deprecated and only the @mapbox scoped package will recieve updates in the future npm WARN deprecated core-js@2.6.12: core-js@<3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js. npm ERR! code 1 npm ERR! path /Users/paris/Documents/Dev/vue/inflearn/vue-til-server/node_modules/bcrypt npm ERR! command failed npm ERR! command sh -c node-pre-gyp install --fallback-to-build npm ERR! CXX(target) Release/obj.target/bcrypt_lib/src/blowfish.o npm ERR! CXX(target) Release/obj.target/bcrypt_lib/src/bcrypt.o npm ERR! CXX(target) Release/obj.target/bcrypt_lib/src/bcrypt_node.o npm ERR! Failed to execute '/Users/paris/.nvm/versions/node/v18.16.1/bin/node /Users/paris/.nvm/versions/node/v18.16.1/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js build --fallback-to-build --module=/Users/paris/Documents/Dev/vue/inflearn/vue-til-server/node_modules/bcrypt/lib/binding/bcrypt_lib.node --module_name=bcrypt_lib --module_path=/Users/paris/Documents/Dev/vue/inflearn/vue-til-server/node_modules/bcrypt/lib/binding --napi_version=8 --node_abi_napi=napi --napi_build_version=0 --node_napi_label=node-v108' (1) npm ERR! node-pre-gyp info it worked if it ends with ok npm ERR! node-pre-gyp info using node-pre-gyp@0.14.0 npm ERR! node-pre-gyp info using node@18.16.1 | darwin | arm64 npm ERR! node-pre-gyp WARN Using needle for node-pre-gyp https download npm ERR! node-pre-gyp info check checked for "/Users/paris/Documents/Dev/vue/inflearn/vue-til-server/node_modules/bcrypt/lib/binding/bcrypt_lib.node" (not found) npm ERR! node-pre-gyp http GET https://github.com/kelektiv/node.bcrypt.js/releases/download/v3.0.8/bcrypt_lib-v3.0.8-node-v108-darwin-arm64-unknown.tar.gz npm ERR! node-pre-gyp http 404 https://github.com/kelektiv/node.bcrypt.js/releases/download/v3.0.8/bcrypt_lib-v3.0.8-node-v108-darwin-arm64-unknown.tar.gz npm ERR! node-pre-gyp WARN Tried to download(404): https://github.com/kelektiv/node.bcrypt.js/releases/download/v3.0.8/bcrypt_lib-v3.0.8-node-v108-darwin-arm64-unknown.tar.gz npm ERR! node-pre-gyp WARN Pre-built binaries not found for bcrypt@3.0.8 and node@18.16.1 (node-v108 ABI, unknown) (falling back to source compile with node-gyp) npm ERR! node-pre-gyp http 404 status code downloading tarball https://github.com/kelektiv/node.bcrypt.js/releases/download/v3.0.8/bcrypt_lib-v3.0.8-node-v108-darwin-arm64-unknown.tar.gz npm ERR! gyp info it worked if it ends with ok npm ERR! gyp info using node-gyp@9.3.1 npm ERR! gyp info using node@18.16.1 | darwin | arm64 npm ERR! gyp info ok npm ERR! gyp info it worked if it ends with ok npm ERR! gyp info using node-gyp@9.3.1 npm ERR! gyp info using node@18.16.1 | darwin | arm64 npm ERR! gyp info find Python using Python version 3.11.4 found at "/Library/Frameworks/Python.framework/Versions/3.11/bin/python3" npm ERR! gyp info spawn /Library/Frameworks/Python.framework/Versions/3.11/bin/python3 npm ERR! gyp info spawn args [ npm ERR! gyp info spawn args '/Users/paris/.nvm/versions/node/v18.16.1/lib/node_modules/npm/node_modules/node-gyp/gyp/gyp_main.py', npm ERR! gyp info spawn args 'binding.gyp', npm ERR! gyp info spawn args '-f', npm ERR! gyp info spawn args 'make', npm ERR! gyp info spawn args '-I', npm ERR! gyp info spawn args '/Users/paris/Documents/Dev/vue/inflearn/vue-til-server/node_modules/bcrypt/build/config.gypi', npm ERR! gyp info spawn args '-I', npm ERR! gyp info spawn args '/Users/paris/.nvm/versions/node/v18.16.1/lib/node_modules/npm/node_modules/node-gyp/addon.gypi', npm ERR! gyp info spawn args '-I', npm ERR! gyp info spawn args '/Users/paris/Library/Caches/node-gyp/18.16.1/include/node/common.gypi', npm ERR! gyp info spawn args '-Dlibrary=shared_library', npm ERR! gyp info spawn args '-Dvisibility=default', npm ERR! gyp info spawn args '-Dnode_root_dir=/Users/paris/Library/Caches/node-gyp/18.16.1', npm ERR! gyp info spawn args '-Dnode_gyp_dir=/Users/paris/.nvm/versions/node/v18.16.1/lib/node_modules/npm/node_modules/node-gyp', npm ERR! gyp info spawn args '-Dnode_lib_file=/Users/paris/Library/Caches/node-gyp/18.16.1/<(target_arch)/node.lib', npm ERR! gyp info spawn args '-Dmodule_root_dir=/Users/paris/Documents/Dev/vue/inflearn/vue-til-server/node_modules/bcrypt', npm ERR! gyp info spawn args '-Dnode_engine=v8', npm ERR! gyp info spawn args '--depth=.', npm ERR! gyp info spawn args '--no-parallel', npm ERR! gyp info spawn args '--generator-output', npm ERR! gyp info spawn args 'build', npm ERR! gyp info spawn args '-Goutput_dir=.' npm ERR! gyp info spawn args ] npm ERR! gyp info ok npm ERR! gyp info it worked if it ends with ok npm ERR! gyp info using node-gyp@9.3.1 npm ERR! gyp info using node@18.16.1 | darwin | arm64 npm ERR! gyp info spawn make npm ERR! gyp info spawn args [ 'BUILDTYPE=Release', '-C', 'build' ] npm ERR! In file included from ../src/bcrypt_node.cc:1: npm ERR! ../../nan/nan.h:2536:8: warning: 'SetAccessor' is deprecated: Do signature check in accessor [-Wdeprecated-declarations] npm ERR! tpl->SetAccessor( npm ERR! ^ npm ERR! /Users/paris/Library/Caches/node-gyp/18.16.1/include/node/v8-template.h:837:3: note: 'SetAccessor' has been explicitly marked deprecated here npm ERR! V8_DEPRECATED("Do signature check in accessor") npm ERR! ^ npm ERR! /Users/paris/Library/Caches/node-gyp/18.16.1/include/node/v8config.h:460:35: note: expanded from macro 'V8_DEPRECATED' npm ERR! # define V8_DEPRECATED(message) [[deprecated(message)]] npm ERR! ^ npm ERR! In file included from ../src/bcrypt_node.cc:1: npm ERR! In file included from ../../nan/nan.h:2884: npm ERR! ../../nan/nan_typedarray_contents.h:34:43: error: no member named 'GetContents' in 'v8::ArrayBuffer' npm ERR! data = static_cast<char*>(buffer->GetContents().Data()) + byte_offset; npm ERR! ~~~~~~~~^ npm ERR! 1 warning and 1 error generated. npm ERR! make: *** [Release/obj.target/bcrypt_lib/src/bcrypt_node.o] Error 1 npm ERR! gyp ERR! build error npm ERR! gyp ERR! stack Error: `make` failed with exit code: 2 npm ERR! gyp ERR! stack at ChildProcess.onExit (/Users/paris/.nvm/versions/node/v18.16.1/lib/node_modules/npm/node_modules/node-gyp/lib/build.js:203:23) npm ERR! gyp ERR! stack at ChildProcess.emit (node:events:513:28) npm ERR! gyp ERR! stack at ChildProcess._handle.onexit (node:internal/child_process:291:12) npm ERR! gyp ERR! System Darwin 22.3.0 npm ERR! gyp ERR! command "/Users/paris/.nvm/versions/node/v18.16.1/bin/node" "/Users/paris/.nvm/versions/node/v18.16.1/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "build" "--fallback-to-build" "--module=/Users/paris/Documents/Dev/vue/inflearn/vue-til-server/node_modules/bcrypt/lib/binding/bcrypt_lib.node" "--module_name=bcrypt_lib" "--module_path=/Users/paris/Documents/Dev/vue/inflearn/vue-til-server/node_modules/bcrypt/lib/binding" "--napi_version=8" "--node_abi_napi=napi" "--napi_build_version=0" "--node_napi_label=node-v108" npm ERR! gyp ERR! cwd /Users/paris/Documents/Dev/vue/inflearn/vue-til-server/node_modules/bcrypt npm ERR! gyp ERR! node -v v18.16.1 npm ERR! gyp ERR! node-gyp -v v9.3.1 npm ERR! gyp ERR! not ok npm ERR! node-pre-gyp ERR! build error npm ERR! node-pre-gyp ERR! stack Error: Failed to execute '/Users/paris/.nvm/versions/node/v18.16.1/bin/node /Users/paris/.nvm/versions/node/v18.16.1/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js build --fallback-to-build --module=/Users/paris/Documents/Dev/vue/inflearn/vue-til-server/node_modules/bcrypt/lib/binding/bcrypt_lib.node --module_name=bcrypt_lib --module_path=/Users/paris/Documents/Dev/vue/inflearn/vue-til-server/node_modules/bcrypt/lib/binding --napi_version=8 --node_abi_napi=napi --napi_build_version=0 --node_napi_label=node-v108' (1) npm ERR! node-pre-gyp ERR! stack at ChildProcess.<anonymous> (/Users/paris/Documents/Dev/vue/inflearn/vue-til-server/node_modules/node-pre-gyp/lib/util/compile.js:83:29) npm ERR! node-pre-gyp ERR! stack at ChildProcess.emit (node:events:513:28) npm ERR! node-pre-gyp ERR! stack at maybeClose (node:internal/child_process:1091:16) npm ERR! node-pre-gyp ERR! stack at ChildProcess._handle.onexit (node:internal/child_process:302:5) npm ERR! node-pre-gyp ERR! System Darwin 22.3.0 npm ERR! node-pre-gyp ERR! command "/Users/paris/.nvm/versions/node/v18.16.1/bin/node" "/Users/paris/Documents/Dev/vue/inflearn/vue-til-server/node_modules/.bin/node-pre-gyp" "install" "--fallback-to-build" npm ERR! node-pre-gyp ERR! cwd /Users/paris/Documents/Dev/vue/inflearn/vue-til-server/node_modules/bcrypt npm ERR! node-pre-gyp ERR! node -v v18.16.1 npm ERR! node-pre-gyp ERR! node-pre-gyp -v v0.14.0 npm ERR! node-pre-gyp ERR! not ok npm ERR! A complete log of this run can be found in: npm ERR! /Users/paris/.npm/_logs/2023-07-13T05_21_26_110Z-debug-0.log