무료
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 해결됨웹 게임을 만들며 배우는 Vue
webpack - npm run build 시 오류
package.json "dependencies": { "vue": "^2.6.12" }, "devDependencies": { "vue-loader": "^15.0.2", "vue-template-compiler": "^2.6.12", "webpack": "^5.4.0", "webpack-cli": "^4.2.0" }오류 내용Failed to load 'D:\Vue\FirstProject\vue-project\숫자 야구\webpack.config.js' config[webpack-cli] Error: Cannot find module 'webpack/lib/RuleSet'Require stack:- D:\Vue\FirstProject\vue-project\숫자 야구\node_modules\vue-loader\lib\plugin.js- D:\Vue\FirstProject\vue-project\숫자 야구\webpack.config.js- D:\Vue\FirstProject\vue-project\숫자 야구\node_modules\webpack-cli\lib\webpack-cli.js- D:\Vue\FirstProject\vue-project\숫자 야구\node_modules\webpack-cli\lib\bootstrap.js- D:\Vue\FirstProject\vue-project\숫자 야구\node_modules\webpack-cli\bin\cli.js- D:\Vue\FirstProject\vue-project\숫자 야구\node_modules\webpack\bin\webpack.js at Module._resolveFilename (node:internal/modules/cjs/loader:1144:15) at Module._load (node:internal/modules/cjs/loader:985:27) at Module.require (node:internal/modules/cjs/loader:1235:19) at require (node:internal/modules/helpers:176:18) at Object.<anonymous> (D:\Vue\FirstProject\vue-project\숫자 야구\node_modules\vue-loader\lib\plugin.js:4:17) at Module._compile (node:internal/modules/cjs/loader:1376:14) at Module._extensions..js (node:internal/modules/cjs/loader:1435:10) at Module.load (node:internal/modules/cjs/loader:1207:32) at Module._load (node:internal/modules/cjs/loader:1023:12) at Module.require (node:internal/modules/cjs/loader:1235:19) { code: 'MODULE_NOT_FOUND', requireStack: [ 'D:\\Vue\\FirstProject\\vue-project\\숫자 야구\\node_modules\\vue-loader\\lib\\plugin.js', 'D:\\Vue\\FirstProject\\vue-project\\숫자 야구\\webpack.config.js', 'D:\\Vue\\FirstProject\\vue-project\\숫자 야구\\node_modules\\webpack-cli\\lib\\webpack-cli.js', 'D:\\Vue\\FirstProject\\vue-project\\숫자 야구\\node_modules\\webpack-cli\\lib\\bootstrap.js', 'D:\\Vue\\FirstProject\\vue-project\\숫자 야구\\node_modules\\webpack-cli\\bin\\cli.js', 'D:\\Vue\\FirstProject\\vue-project\\숫자 야구\\node_modules\\webpack\\bin\\webpack.js' ]} 계속 오류난거 해결하다가 여기까지 왔는데 여기선 해결이 안되네요ㅠㅠ
- 미해결웹 게임을 만들며 배우는 Vue
webpack-dev-server 설정 후 에러 발생 처리 도와주세요.
강의자님이 세팅하신 대로 webpack-dev-server 관련 세팅을 한 뒤 npm run dev를 하니 아래와 같이 생성자를 생성할 수 없다는 에러가 뜨고 있습니다.이런 경우 어떻게 해야 할까요?세팅 상태에러 내용
- 해결됨웹 게임을 만들며 배우는 Vue
Vue3으로 강의를 듣고 있는데 마지막 router에서 막혔습니다
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
Vue.Js 3를 사용하시면 Vue.set , this.$set 메서드가 없습니다.
제로초님 강의를 보면서 현재 Vue.js 3를 가지고 학습 중에 있습니다.강의 내용을 보면서 저는 실시간으로 화면에 대한 변화가 일어나고 있길래 Vue.js 3에서 Vue.set과 this.$set을 확인한 결과 Vue.js 3 에서는 제거가 되었다고 알게 되었습니다.혹시 제로초님의 강의를 Vue.js 3로 들으시는 분들은 도움 되실 수 있지 않을까 해서 남깁니당
- 미해결웹 게임을 만들며 배우는 Vue
Vue@3에서의 $set 관련 Typeerror $set is not function에 대한 대처
Vue 3 버전에 오면서 vue reactivity system이 proxy로 바뀌었다고 합니다. 저도 정확히 다 아는 것은 아니고 그냥 배열을 변경해도 해당 내역이 반영되는 것을 확인하였습니다. 즉, TdComopnent.vue에서의 this.$set(rootData.tableData[this.rowIndex], this.cellIndex, rootData.turn);코드를 rootData.tableData[this.rowIndex][this.cellIndex] = rootData.turn;로 변경하시면 에러없이 작동합니다. 혹시나 이후에 오시는 분들에게 도움이 되었으면 합니다.
- 미해결웹 게임을 만들며 배우는 Vue
vuex관련질문이용
1. 다시 루트에 모든 컴포넌트를 합칠시vuex를 사용할때 컴퓨티드에 tableData를 사용하다보니 각 td각 다 다시 계산되서 그냥 하나의 컴포넌트로 작업하시는 걸 보여주셨는뎅 그러면 다시 처음으로 돌아가서 store를 안써도 되지 않을까 생각이 들어서용store를 쓰는 이유는 자식컴포넌트로 분리시켰을때 props로 부모에게 정보를 받는게 불편해져서 하는거라고 생각하는데, 부모자식없이 하나의 컴포넌트로 돌아가면 store를 쓰지 않아도 될거같아서 문의드려요~2. 루트에 모든 컴포넌트를 합치지 않을시, 예제에서 vue-devtools에서 하나의 셀만 변경해도 한번에 9개셀이 모두 계산되더라도 가상돔에서 실제데이터 변경여부를 체크해서 실제 렌더로 이어지지는 않는다고 하셨는데 그냥 저렇게 계산되어도 가상돔 계산방식을 믿고 그냥 store를 쓰면 되는건가요? 실제데이터변경여부를 체크하는 데이터가 object일 경우에도 그냥 믿고 쓰면되는지 궁금해서 문의드려용~
- 미해결웹 게임을 만들며 배우는 Vue
LottoBall 컴포넌트 computed의 return 부분에 대해 질문 있습니다.!
안녕하세요 제로초님! 제로초님의 강의 항상 정말 감사히 잘 듣고 있습니다.다름이 아니라, computed에서 backgorund의 색깔을 지정하고 return을 해주실 때, 왜 객체로 감싸야하는지 궁금해서 여쭤봅니다. retrun background;로 하니까 동작되지 않았고, return {background};로 하니까 잘 작동됐습니다. 왜 그런건가요??
- 미해결웹 게임을 만들며 배우는 Vue
this 디스트럭처링 관련 질문있습니다!
vue에서 만든 데이터를 사용할 때는 this를 앞에 같이 붙여줘야하는걸로 알고 있습니다.그래서 디스트럭처링으로 this의 중복 사용을 최대한 방지하면서 코드를 작성하려 합니다. first, second, value는 다 괜찮은데 왜 result만 디스트럭처링을 할 때 오류가 발생하는 것인가요???
- 해결됨웹 게임을 만들며 배우는 Vue
app.vue안에 있는 nav를 따로 분리하고 싶은데 잘안됩니다..
안녕하세요. 현재 강의보고하다가 요즘은 책을 보고 공부중인데 app.vue안에 있는 nav를 따로 분리 하고 싶은데 방법이 있을까요? 이유는 특정 서브페이지에서는 nav가 안보여야하는데 그 특정 서브페이지에서도 nav가 보여서요 ㅠ css로 처리했더니 다시 돌아가면 그페이지들도 nav가 사라지더라구요 ㅠㅠ 혹시 방법이 잇을까요?
- 미해결웹 게임을 만들며 배우는 Vue
3-3 웹팹 로더 사용하기
asset app.js 325 KiB [compared for emit] (name: app)runtime modules 1.13 KiB 5 modulescacheable modules 303 KiB ./main.js 138 bytes [built] [code generated] ./NumberBaseball.vue 39 bytes [built] [code generated] [1 error] ./node_modules/vue/dist/vue.runtime.esm.js 303 KiB [built] [code generated] ERROR in ./NumberBaseball.vueModule build failed (from ./node_modules/vue-loader/dist/index.js):TypeError: Cannot read properties of undefined (reading 'styles') at Object.loader (C:\Users\samsung\OneDrive\바탕 화면\CODE\vue-webgame\3.숫자야구\node_modules\vue-loader\dist\index.js:70:34) @ ./main.js 2:0-50 4:8-22 webpack 5.74.0 compiled with 1 error in 506 ms --------------------------------------------NumberBaseball.vue 코드 //Vue 컴포넌트<template> <div> <h1>{{ result }}</h1> <form v-on:submit="onSubmitForm"> <input type="text" ref="answer" maxlength="4" v-model="value"> <button>입력</button> </form> </div></template><script> export default { data() { return { value: '', result: '', }; }, methods: { onSubmitForm(e) { e.preventDefault(); }, }, };</script><style></style>웹팹 로더에 실패해서.. 다음 단계로 못 넘어가고 있습니다.혹시 버전의 차이가 있을까 구글링 열심히 해봤지만 결국 에러 한 개는 해결하지 못했어요.
- 미해결웹 게임을 만들며 배우는 Vue
한번만 봐주세요..
안녕하세요. 강의 잘 보고 있습니다. 감사합니다. 잘 따라 가다가 마지막에 빌드에서 아무것도 안뜨고 끝이 납니다. 폴더에도 아무것도 안들어 가구요. 혹시 한번 봐주실수 있으실까요? 부탁드립니다.
- 미해결웹 게임을 만들며 배우는 Vue
``<-- 안의 내용이 스트링
`` <-- 요거 안에서 자동완성 기능이 안되는데, 비주얼스튜디오 코드에서 작업중입니다. ``<-- 요것들 안에 있는내용은 스트링으로 됩니다. 방법이 있을까요?
- 미해결웹 게임을 만들며 배우는 Vue
ajax 통신으로 부모 자식 컴포넌트 간의 데이터를 주고 받는 방식에 대해 문의드립니다.
안녕하세요, 우선 코드는 추후에 해결이 안됐을 때 다시 올려서 재문의 드리도록 하겠습니다. 현재 부모 컴포넌트에서 ajax 통신 (async await) 을 사용하여 데이터를 조회하고, 해당 데이터를 자식 컴포넌트에 전달해야 하는데요, 자식 컴포넌트는 해당 ajax 통신을 기다리지 않고 mount가 됩니다. 자식 컴포넌트에서 ajax 통신을 기다리게 하는 방법이 있을까요? 아니면 다른 해결 방법이 있는지 문의드립니다.
- 미해결웹 게임을 만들며 배우는 Vue
npm run build
npm run build 한 후 localhost에서 어떻게 확인하나요...?
- 미해결웹 게임을 만들며 배우는 Vue
안녕하세요. vue-loader 오류 질문드립니다.
npm run build 잘 되다가 vue-loader를 설치하고 나서 오류가 납니다. 왜 모듈을 찾을 수 없다고 나올까요?
- 미해결웹 게임을 만들며 배우는 Vue
webpack 문제 질문드립니다.
안녕하세요. npm run build 를 하면 dist 파일에 app.js가 생성되지 않습니다. 혼자 해결해 보려고 했는데 초보라서 그런지 해결하기가 쉽지 않네요ㅠㅠ 어떤 게 문제인건지 전혀 모르겠습니다. 도와주시면 감사하겠습니다.
- 미해결웹 게임을 만들며 배우는 Vue
Uncaught TypeError: vue__WEBPACK_IMPORTED_MODULE_0__.default is not a constructor
위의 script_vue 디렉토리는 1강에서 했던 작업물들입니다. vue 버전과 vue-template-compiler(2.6.14) 버전을 동일 하게 하고 나서 webpack을 실행하니, [webpack-cli] Failed to load '/Users/joo/Desktop/zero_view/webpack.config.js' config [webpack-cli] Error: Cannot find module 'vue/compiler-sfc' 이런 에러가 나서 vue/compiler-sfc을 설치 한 후, 다시 vue는 (3.2.31)최신버전으로 하고 vue-temp는 (2.6.14)버전으로 하고 나서 웹팩빌드 하니 에러 없이 app.js 파일을 생성했습니다. 그리고 numberbaseball.html 파일을 실행하니, Uncaught TypeError: vue__WEBPACK_IMPORTED_MODULE_0__.default is not a constructor at eval (main.js:7:1) at Object../main.js (app.js:19:1) at __webpack_require__ (app.js:153:41) at app.js:205:37 at app.js:207:12 위에 내용과 같은 에러가 크롬콘솔창에 뜹니다. 관련해서 검색 해도 잘 나오질 않네요 ㅜ
- 미해결웹 게임을 만들며 배우는 Vue
watch를 회원가입, 비밀번호 확인 등의 값 검증에 사용하는건 어떤가요?
watch를 회원가입, 비밀번호 확인 등의 값 검증에 사용하는건 어떤가요?
- 미해결웹 게임을 만들며 배우는 Vue
1:19
import Vue from 'vue'; console.log(Vue) // ERROR import Vue from 'vue'; 부분에서 다른 행동없이 'vue' 패키지를 잘 가지고 왔는지에 대해 console.log(Vue); 를 찍어보려 했는데 에러코드가 나와서 질문드립니다. 경로가 잘 못 설정된건지 환경변수를 못찾는 것 같은데 스택오버플로우에서는 다른 방향으로 안내하지만 강사님 진행 방식으로 진행이 안되네요, 도움을 주실 수 있을까요? 링크
- 미해결웹 게임을 만들며 배우는 Vue
9-1. Vue Router 설정하기 질문드립니다.
강의를 따라 9-1 까지 따라서 진행중입니다. 좋은 강의 감사드립니다. 제가 여태까지 잘 따라왔는데 vue 라우터에서 막히는 부분이 있어서 질문드립니다. 1. routes.js 에서 컴포넌트를 추가할때, import할때 NumberBaseball.vue 가 경로에서 안보이는 점이나 (vue파일을 컴포넌트로 따로 설정해야 하는건가요 ?) vue 라우터 네비게이션에서 vue를 불러왔을때, 데이터나 데이터에 정의해둔 값들을 못가져오는거같습니다. 제가 빼먹은 부분이 있을까요 ? 2. 뷰 라우터의<router-view></router-view>로 .vue 파일을 불러오면 불러온 vue의 app.js도 같이 가져오게 되나요 ? VueRouter.html의 <script src="./dist/app.js"></script> app.js는 9장에서 만든 뷰라우터 폴더의 app.js 같은데 헤깔리네요