묻고 답해요
141만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결Vuetify Admin Template 만들기 - 기본편 (Based Vue2)
export 'default' (imported as 'VueRouter') was not found in 'vue-router' 컴파일 오류 원인과 해결법 부탁드립니다.
서버 실행시에 이런 오류가 뜨는 이유가 무엇이며 해결법을 알고싶습니다! export 'default' (imported as 'VueRouter') was not found in 'vue-router' 컴파일 오류인데 왜일까요ㅜㅜ>?? 원인:: package.json :: vue 버전 ::
-
미해결웹 게임을 만들며 배우는 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>웹팹 로더에 실패해서.. 다음 단계로 못 넘어가고 있습니다.혹시 버전의 차이가 있을까 구글링 열심히 해봤지만 결국 에러 한 개는 해결하지 못했어요.
-
미해결호돌맨의 요절복통 개발쇼 (SpringBoot, Vue.JS, AWS)
부끄럽지만 아래 글을 읽고도 PostEditor의 목적을 잘 모르겠습니다
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 아래 글의 답변을 읽고 이해한 바로는 반드시 title과 content를 모두 가져오기 위해 (해당 프로젝트에서 그렇게 하기로 협의가 되어있으므로) PostEditor를 사용해서 title과 content를 강제하는 목적으로 만들었다는 뜻으로 이해했는데요 그게 그냥 response용으로 만든 Edit이라는 DTO 객체에 NotEmpty를 쓰는 것과 무엇이 다른가요? 오히려 분산함으로써 관리만 더 번거로워진 게 아닌가 하는 생각이 들어서요.. 아니면 해당 예제는 간단하게 만든 것이라 별다른 차이를 느낄 수 없는 것이고 추후 확장성을 고려해서 요구사항이 늘어날 때 Post 엔티티를 오염시키거나 서비스 - 레파지토리 사이의 DTO에 대한 역방향 의존성을 주지 않고 도메인 계층에서 로직을 해결하기 위해서 분리한 건가요? 아직 아는 게 별로 없어서 질문의 핀트를 잡지 못해 다소 장황하게 질문 드린 점 죄송합니다 ㅜ 짧은 답변이라도 주신다면 정말 감사하겠습니다!
-
미해결Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
모달이 부드럽게 뜨지 않습니다.
강의내용과 똑같이 작성하고 실행해 보았고 혹시나 해서 깃헙에서 코드 가져와 실행했음에도 모달이 부드럽게 사라지는 것은 되지만 부드럽게 나타나는 것은 잘 되지 않았습니다. 혹시 어떻게 해결 할 수 있을까요?
-
미해결Vue.js 제대로 배워볼래?(Vue.js 프로젝트 투입 일주일 전)
vue cli 문제
npm install -g @vue/cli를 붙이면 아래처럼 많은 것이 뜨는데 왜 이럴까요ㅜㅜ??
-
미해결Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
+ 아이콘 안보이실때2
index.html에 설정하는 Font Awesome 태그는 기존버전태그(5.x) 대신 (<link.... ) 제가 강의를 듣고 있는 시점기준(8월 2일) 현재버전태그(6.1.2) 로 사용하시면 될 듯 싶습니다. (저는 요걸로 해결했습니다.) <script defer src="https://use.fontawesome.com/releases/v6.1.2/js/all.js" integrity="sha384-11X1bEJVFeFtn94r1jlvSC7tlJkV2VJctorjswdLzqOJ6ZvYBSZQkaQVXG0R4Flt" crossorigin="anonymous"></script> <TodoInput.vue> plus icon 태그: <i class="fa-solid fa-plus addBtn"></i> 6버전 CDN에 대한 내용은 아래 공식사이트 주소 들어가서 보시면 됩니다~ https://fontawesome.com/v6/docs/web/use-with/wordpress/install-manually
-
미해결Vue3 완벽 마스터: 기초부터 실전까지 - "기본편"
index.html 파일에서 Parsing error 가 나요
<!DOCTYPE html> 이 부분에서 Parsing error: Unexpected token eslint(prettier/prettier) 에러가 나고 </html> 이 부분에서 clear eslint(vue/comment-directive) 에러가 납니다.
-
해결됨Vue.js 끝장내기 - 실무에 필요한 모든 것
명령어 실행 오류 질문 드립니다.,
안녕하세요 강의 잘 듣고있습니다. 저장소 체크아웃 이후에 설정까지 수업대로 한후에 npm t를 입력하니 아래와 같은 오류가 나는데 혹시 어떤게 문제가 있는지 봐주실수 있으신가요?
-
해결됨Vue.js 끝장내기 - 실무에 필요한 모든 것
강의 질문있습니다.
강의 초반부에 말씀하신 웹서비스는 동시성을 보장에 대해 헷갈려서 질문 드립니다. 제가 이해 하기로는 여러사람이 하나의 ID에 대해 수정을 할때, 중간에 수정된 최근정보를 제공하는것이 좋기때문에, 페이지 진입시 Id값을 이용해 최신 정보를 불러와야한다.라는 뜻으로 이해하는것이 맞을까요? 그리고 그 최신데이터 보장은 페이지의 성격에 따라 협의를 봐야한다?라고 이해하면 되는것일까요? 그리고 지금 강의 들으면서 드는 질문인데, 강의 초반부에 페이지 컴포넌트는 드라이하게 작성하는것이 좋다고 말씀하시면서 비즈니스 로직(form submit등)이 없이 작성하고 비즈니스 로직은 components안에서 작성하는것이 좋다고 하셨는데, 이번에 view폴더에있는 MainPage.vue에는 비즈니스로직을 작성을 하신 이유가 있을까요?
-
해결됨Vue3 완벽 마스터: 기초부터 실전까지 - "실전편"
computed @vue/reactivity 질문
import computed 자동저장시 eslint에 의해 'vue'로 재정의되는대 'vue'와 @vue/reactivity 의 차이가 무엇일까요? { ref , computed } 'vue' 사용하여 써도 문제가없던대 'vue'안에 모듈들이 함축적으로 포함되어있는건가요? 강의에서는 @vue/reactivity 로 하셨지만 조금 달라서 여쭈어봅니다.!
-
미해결웹 게임을 만들며 배우는 Vue
``<-- 안의 내용이 스트링
`` <-- 요거 안에서 자동완성 기능이 안되는데, 비주얼스튜디오 코드에서 작업중입니다. ``<-- 요것들 안에 있는내용은 스트링으로 됩니다. 방법이 있을까요?
-
해결됨Vue3 완벽 마스터: 기초부터 실전까지 - "실전편"
강사님 질문이있습니다.
글 삭제 remove 메소드 실행할때 deletPost에서 (props.id) 삭제와 deltePost(id) 삭제의 차이점이 궁금합니다 어차피 delete restapi는 연결된시점에 그냥 id만 써도 되는거아닌가요?
-
미해결Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념
Vue3에서 render
데이터는 잘 불러와지는데, 렌더가 작동이 안되다는 오류 메세지 때문에, 공식 문서에서 찾아보았습니다.더 이상 render함수가 더이상 전달인자로 받지 않기 때문에 import ListView from './ListView.vue' import { h } from 'vue' export default function createListView(name) { return { //재사용할 인스턴스(컴포넌트) 옵션들이 들어갈 자리 name : name, created() { this.$store.state.loading = true this.$store.dispatch('FETCH_LIST', this.$route.name) .then(() => { console.log('success LIST') this.$store.state.loading = false }) .catch((error) => console.log(error)) }, render() { return h(ListView); } } } h 를 'vue'에서 불러와서 사용하더라구요. 이때 h 는 어떤 역활을 해주게 되나요? 위처럼 수정해서 정상적으로 화면에 표시 됩니다!
-
해결됨Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념
props 및 데이터 작명 관련해서 질문 드립니다.
props등이나 데이터들을 넘길때, 항상 작명을 관련있지만 다르게 하시잖아요? (ex : userInfo , info) 수업중에 작명을 다르게 할 수 있다는걸 보여주시기 위해 작명을 다르게 한다고도 하셨는데, 실무에서 다른 개발자들이랑 개발을 진행할때, 데이터 이름을 서로 같게 해주는게 좋은지, 수업에 하시는것처럼 다르게 작명해주는게 좋은지 오히려 같게 해주면 거슬러 올라가거나 수정하기가 더 어려울거 같다는 생각도 드네요.. 개인적으로는 뷰가 아직 덜 익숙해서 그런지, 데이터 이름이 다르니 조금 헷갈리는 부분이 있어서 ㅎㅎ 같게 해주고 있습니다.
-
해결됨Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념
저 처럼 강사님 말 안듣고 Vue3하다 dispatch error 난 경우 해결
잘 따라 하다가 또잉 이런 애러가 계속 나서 1시간 해매다가 바보같이 main.js import { createApp } from 'vue' import App from './App.vue' import router from './routes/router' import store from './store/store' createApp(App).use(router, store).mount('#app') 이렇게 했다가 import { createApp } from 'vue' import App from './App.vue' import router from './routes/router' import store from './store/store' createApp(App).use(router).use(store).mount('#app') 이렇게 고쳤더니 store를 잘 인식하네요..수업 초반에 히힛 난 vue3 써야지~ 하고 강사님말 안듣고 여기까지 오다보니 다시 Vue2로 돌아갈 자신이 없어 돌아가지 못하네요
-
해결됨호돌맨의 요절복통 개발쇼 (SpringBoot, Vue.JS, AWS)
이 강의에서 말한 더 고치고싶은 부분이 궁금합니다.
말씀하신 더 고치고 싶은 부분을 얘기해주면 어떻게 고칠 수 있을지 고민해볼 수 있을 것 같습니다.
-
미해결Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념
vue3 코드 공유
vue3로 진행하면 코드가 달르게 해야되서 코드 공유합니다. main.js ChartPlugin.js 혹시 Best practice가 아니라면 알려주세요! 감사합니다.
-
해결됨Vue.js 시작하기 - Age of Vue.js
Main.js 부분이 다르게 나옵니당
영상이 녹화됐을때랑 제가 쓰는 버전이랑 차이가 있어서 그런지 메인부분이 다르게 나옵니다. 이부분은 그냥 다른갑다... 하고 이해만 하고 넘어가도 될까요?
-
미해결Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
i 태그에 v-on:click 이벤트랑 v-bind:class가 적용되지 않습니다.
강의를 보면서 따라서 타이핑하고 있는데, i 태그에서 이벤트랑 클래스 바인딩이 안됩니다. 아래에 span태그에서는 적용되는데, 이유가 뭔지 알 수 있을까요? <template> <div> <ul> <li v-for="(todoItem, index) in todoItems" v-bind:key="index" class="shadow"> <span v-on:click="toggleComplete(todoItem, index)"> <i class="checkBtn fas fa-check" v-bind:class="{checkBtnCompleted: todoItem.completed}"></i> </span> <span v-bind:class="{textCompleted: todoItem.completed}">{{todoItem.item}}</span> <span class="removeBtn" v-on:click="removeTodo(todoItem, index)"> <i class="fas fa-trash-alt"></i> </span> </li> </ul> </div> </template> <script> export default { data: function() { return { todoItems: [], } }, methods: { removeTodo: function(todoItem, index) { console.log('ffff'); localStorage.removeItem(todoItem); this.todoItems.splice(index, 1); }, toggleComplete: function(todoItem) { todoItem.completed = !todoItem.completed; } }, created: function() { if(localStorage.length > 0) { for (var i = 0; i < localStorage.length; i++) { this.todoItems.push(JSON.parse(localStorage.getItem(localStorage.key(i)))); } } } } </script> <style scoped> ul { list-style-type: none; padding-left: 0px; margin-top: 0; text-align: left; } li { display: flex; min-height: 50px; height: 50px; line-height: 50px; margin: 0.5rem 0; padding: 0 0.9rem; background: white; border-radius: 5px; } .removeBtn { margin-left: auto; color: #de4343; } .checkBtn { line-height: 45px; color: #62acde; margin-right: 5px; align-self: center; } .checkBtnCompleted { color: #b3adad; } .textCompleted { text-decoration: line-through; color: #b3adad; } </style>
-
미해결Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념
죽어도 3버전 chart.js쓰고싶은분께
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 3 버전부터 웹팩을 쓰는분은 임포트를 개별적으로 해와서 레지스터 api 에 등록하게 끔되있는거같아요 난 그딴거 모르겠고 차트만되게해달라 저처럼 코드넣으세요!