묻고 답해요
130만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨Vue3 완벽 마스터: 기초부터 실전까지 - "기본편"
vue3+ cli로 구성해도 강의 따라가기에 문제가 없나요?
안녕하세요 짐코딩님!혹시 vue3 + cli 조합으로 해도 강의 따라가기에 문제가 없을까요...??회사 서버 상황상 vue3+ vite 가 불가능할 것 같은데, cli 조합으로 vue3를 배우려고 하면 짐코딩님 강의를 수강하면 안되는 것일지 궁금합니다!ㅠㅠ
-
미해결Vue3 완벽 마스터: 기초부터 실전까지 - "실전편"
form 태그에 이벤트 발생시 작동하지 않는건에 대해
질문은 아니고~ 수업을 진행하다 form @submit.prevent="함수명"해당 부분이 작동하지 않아(아예 무반응) button태그에 실행 함수를 넣으니 잘 작동하여 form 문제인거 같아 확인해보니 form안에 button이 존재할 경우 발생하는 문제였네요.form 태그안에 @submit.prevent="함수명" 은 유지하고버튼에 @click.self.prevent="함수명"을 넣으면 됩니다. 동일 문제가 발생하신다면 진행해 보세요.
-
미해결Vue 3 시작하기
defineProps, defineEmit, defineModel 차이
부모와 자식 컴포넌트간의 데이터 교환에 있어부모 -> 자식 : props자식 -> 부모 : emit이라는건 어느정도 개념이 잡힌 것 같습니다. 근데, 좀 더 찾아보니 부모자식 컴포넌트 사이에도 model을 지정해서 양방향 바인딩이 가능하다는 예제를 본 것 같습니다. model을 사용하여 props & emit을 대체한다면 복잡한 코드가 좀 더 나아질것 같은데 defineModel을 사용하지 않는 이유가 따로 있는것일까요?
-
미해결Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념
Vue3에서 구글 애드센스 탑재하기
안녕하세요. 선생님께 잘 배워서 웹사이트를 만들었습니다. timelessflash.com 아직 테스트중이고요. 조금 더 손봐야 합니다만 본기능은 사용할 수 있습니다. 마지막 관문이 남았습니다. 광고넣기입니다. vue3에서 작은 콤포넌트에 구글 애드센스 적용하고 싶은데 관련 강의클립이 제작된 것이 있나요? <vue.js 끝장내기>까지 소유하고 있는데 광고 삽입 관련 강의는 없는 것 같아요.추가 강의를 부탁드립니다. 감사합니다.
-
미해결Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념
코드가 정상 작동 되는건지 ...
해당 코드 그대로 따라 쳤는데 안 되네요. 판교님 블로그에서도 예제 있어서 복붙 했는데, 마찬가지로 안 되요.흠... 혹시 막힌건지.. 다른 동일한 질문글이 있어서 수정해봤지만 역시 value가 undefined라 동작이 안 되네요 ㅜㅜ~
-
미해결[웹 개발 풀스택 코스] Vue.js 프로젝트 투입 일주일 전 - 기초에서 실무까지
카카오 로그인
카카오 로그인 파트에서 저는 왜 이런 이슈가 발생하는 걸까요?
-
해결됨Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
TodoList.vue에서 삭제 처리를 위한 emit이 작동하지 않습니다.
TodoList.vue에서 removeBtn으로 removeTodo함수를 호출하면서 부모창으로 emit을 요청했지만app.vue에서 콘솔로그를 출력해봤을때 해당 함수를 호출이 안되는데, 원인이 뭔지를 모르겠습니다.강의 내용대로 입력했는데, 해당 기능이 수행되지 않고 있습니다. localhost:8080 으로 접속했을 때 아래와 같은 오류가 뜹니다.app.vue소스에서 methods 영역에 아래와 같이 선언했는데 못찾는 이유가 무엇인가요?removeOneItem: function(todoItem){에러메시지 -main.js:4 [Vue warn]: Property "removeOneItem" was accessed during render but is not defined on instance. at <App> TodoList.vue<template> <div> <ul> <li v-for="(todoItem , index) in propsdata" v-bind:key="todoItem.item" class="shadow"> <i class="checkBtn fa-solid fa-check" v-bind:class="{checkBtnCompleted: todoItem.completed}" v-on:click="toggleComplete(todoItem, index)"></i> <span v-blind:class="{textCompleted: todoItem.completed}">{{ todoItem.item }}</span> <span class="removeBtn" v-on:click="removeTodo(todoItem, index)"> <i class="fa-solid fa-trash"></i> </span> </li> </ul> </div> </template> <script> export default { props:['propsdata'], methods: { removeTodo : function(todoItem, index){ this.$emit('removeItem', todoItem, index); }, toggleComplete: function(todoItem, index){ console.log(todoItem.item + " " + index); todoItem.completed = !todoItem.completed; localStorage.removeItem(todoItem.item); localStorage.setItem(todoItem, JSON.stringify(todoItem)); } } } </script>app.vue<template> <div ip="app"> <TodoHeader></TodoHeader> <TodoInput v-on:addTodoItem="addOneItem"></TodoInput> <!-- <TodoInput v-on:하위 컴포넌트에서 발생시킨 이벤트 이름="현재 컴포넌트 매소드명"></TodoInput> --> <TodoList v-bind:propsdata="todoItems" v-on:removeItem="removeOneItem"></TodoList> <!-- <TodoList v-bind:propsdata="todoItems"></TodoList> --> <!-- <TodoList v-bind:내려보낼 프롭스 속성 이름="현재 위치의 컴포넌트 데이터 속성"></TodoList> --> <TodoFooter></TodoFooter> </div> </template> <script> import TodoHeader from './components/TodoHeader.vue' import TodoInput from './components/TodoInput.vue' import TodoList from './components/TodoList.vue' import TodoFooter from './components/TodoFooter.vue' export default { data: function(){ return { todoItems:[] } }, methods:{ addOneItem: function(todoItem){ console.log("addOneItem:[" + todoItem + "]"); var obj = { completed : false, item: todoItem }; // console.log(this.newTodoItem); //저장하는 로직 localStorage.setItem(todoItem,JSON.stringify(obj)); this.todoItems.push(obj); } }, removeOneItem: function(todoItem){ // console.log("removeOneItem app remove items:[" + index + "]:" + todoItem.item); console.log("removeOneItem app remove items:[:" + todoItem.item); localStorage.removeItem(todoItem.item); // this.todoItems.splice(index, 1); },
-
미해결Vue3 완벽 마스터: 기초부터 실전까지 - "기본편"
강의 중 언급하는 영상을 어디서 보는거죠?
강의 중 자세한 내용을 영상 설명란에 남겨두시다고 하시는데 어디서 보는거죠? 이벤트처리에서 4분 47초에서 모르는 분들은 위한 메서드 영상을 남겨두시다고 하셨는데 찾아봐도 모르겠어서 문의드립니다.
-
해결됨Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념
강의에서 api를 따로 빼셨는데 얻는 이점이 뭐죠?
2:05초에서는 created()에서 getNewsList();함수 호출 하나로 axios.then.catch 코드를 줄일수 있다고 하셨는데,12:00 초에서는 import 후에 fetchNewsList() 호출 후 , then.catch그대로 있어서 결과론적으로 얻는 이점이 뭔지 모르겠습니다!
-
미해결Vue3 완벽 마스터: 기초부터 실전까지 - "기본편"
javascript에서 Counter가 안나오는 문제
섹션1) Vue란 무엇인가? 에서 예시로 써주신 코드입니다.javascript.html<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>JavaScript</title> </head> <body> <button type="button" onClick="increment()">Counter: <span id="counter"></span></button> <script> let counter = 100; function increment() { counter++; printCounter(); } function printCounter() { let $span = document.querySelector("#counter"); $span.textContext = counter; } printCounter(); </script> </body> </html>강의 6:52초에 나오는 코드를 그대로 따라 쳤는데,Counter 숫자가 안나옵니다..ㅠ
-
미해결프로젝트로 배우는 Vue.js 3
x-total-count 및 db.json id값 문제
x-total-count가 undefined로 나옵니다 ㅠㅠ무슨 일일까요.. 그리고..db.json - id값 문제,,uuid로 들어가는 거 같은데,,,또 id값이 스트링으로 또 들어가네요ㅠㅠ ***혹시 몰라서 저렇게 x-total-count 추가해놓긴했는데페이징 번호 눌러도 첫번째 페이지말고는 데이터를 가져오질 않네요..깃허브에 올려놓으신 코드 봐도 x-total-count 헤더에 추가한 코드말고는 다른 게 없습니다. &버전차이일까요? node.js 일부러 낮은 버전 설치하면 json-server가 node랑 버전이 안맞는다고 안돌아가더라고요. 그래서 node 버전을 LTS최신버전으로 설치하긴했는데.. const getTodos = async (page = currentPage.value) => { currentPage.value = page; try { const res = await axios.get( `http://localhost:3000/todos?_page=${page}&_limit=${limit}` ); const total = await axios.get('http://localhost:3000/todos'); //전체 리스트 가져오기 const totalList = total.data.length; //가져온 전체리스트의 길이 res.headers.set("Access-Control-Expose-Headers", "x-total-count"); res.headers.set( "x-total-count", totalList ) //그냥..어거지로 만들어 줌.. console.log(res.headers["x-total-count"]) numberOfTodos.value = res.headers["x-total-count"]; console.log(res.data) todos.value = res.data; } catch (err) { console.log(err); error.value = 'Something went wrong!'; } }
-
미해결Vue로 Nodebird SNS 만들기
실습 환경 문의(Node 버전)
안녕하세요.실습을 위해서 Node 버전은 어떤 버전을 설치 해야 할까요 ?최신 버전을 받아서 설치하니 에러가 있어서, 답변바랍니다.
-
미해결Vue3 완벽 마스터: 기초부터 실전까지 - "기본편"
{{ counter }} 인식이 안되는 문제
섹션1) Vue란 무엇인가? 에서 예시로 써주신 코드입니다.1. vue3.html<!DOCTYPE html> <html lang="en"> <head> <title>Hello Vue3</title> <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="counter"> <button type="button" v-on:click="counter++"> Counter: {{ counter }} </button> </div> <script> const Counter = { data() { return { counter: 0 } } } Vue.createApp(Counter).mount('#counter') </script> </body> </html>https://www.gymcoding.co/eb73a52b-f54a-48da-a4ab-b22b7f499a1c강의 교안에 있는 코드를 그대로 복사했는데{{ counter }} 로 나오는데 무엇이 문제일까요??..2. javascript.html<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>JavaScript</title> </head> <body> <button type="button" onClick="increment()">Counter: <span id="counter"></span></button> <script> let counter = 100; function increment() { counter++; printCounter(); } function printCounter() { let $span = document.querySelector("#counter"); $span.textContext = counter; } printCounter(); </script> </body> </html>강의 6:52초에 나오는 코드를 그대로 따라 쳤는데,여기도 Counter 숫자가 안나옵니다..ㅠ
-
미해결퀘이사(Quasar) 완벽 마스터: Vue 프론트 웹을 빠르게 만들고 싶다면! (Based Vue3)
Quasar 관련 익스텐션
텍스트 에디터에서 코드 작성하실 때Template에서 Quasar 관련 코드는 초록색으로 표시되시던데 어떤 extension 설치하신건지 알 수 있을까요?? 그리고 추가적으로 추천해주실만한 유용한 extension 있으면 알려주시면 감사하겠습니다
-
미해결Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
vue3 모달창 트랜지션
<template> <transition appear name="modal"> <div class="modal-mask"> <div class="modal-wrapper"> <div class="modal-container"> <!-- Modal Header --> <div class="modal-header"> <slot name="header"> default header </slot> </div> <!-- Modal Body --> <div class="modal-body"> <slot name="body"> default body </slot> </div> <!-- Modal footer --> <!-- <div class="modal-footer"> <slot name="footer"> default footer <button class="modal-default-button" @click="$emit('close')"> OK </button> </slot> </div> --> </div> </div> </div> </transition> </template> <style scoped> .modal-mask { position: fixed; z-index: 9998; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); display: table; transition: opacity 0.3s ease; } .modal-wrapper { display: table-cell; vertical-align: middle; } .modal-container { width: 300px; margin: 0px auto; padding: 20px 30px; background-color: #fff; border-radius: 2px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33); transition: all 0.3s ease; font-family: Helvetica, Arial, sans-serif; } .modal-header { margin-top: 0; color: #42b983; } .modal-body { margin: 20px 0; } .modal-default-button { float: right; } .modal-enter-from { opacity: 0; } .modal-leave-active { opacity: 0; } .modal-enter-from .modal-container, .modal-leave-active .modal-container { -webkit-transform: scale(1.1); transform: scale(1.1); } </style>vue3인데 모달창 띄울 때 애니매이션 효과가 잘 작동하는데 왜 닫을 때는 작동을 안하는 지 잘 모르겠어요<AlertModal v-if="showModal" @close="showModal = false"> <!-- you can use custom content here to overwrite default content --> <template v-slot:header> <h3>경고! <span class="closeModalBtn" @click="showModal = false">x</span></h3> </template> <template v-slot:body> 아무것도 입력하지 않으셨습니다. </template> <!-- <template v-slot:footer> copy right </template> --> </AlertModal>참고로 vue3에서는 slot을 template 태그 안에 v-slot으로 적어야 한다해서 이렇게 작성했어요
-
미해결호돌맨의 요절복통 개발쇼 (SpringBoot, Vue.JS, AWS)
Post에 edit 메서드 삼항연산자 질문
업데이트 관련 질문입니다!!PostEdit을 만들고 Post에 edit이라는 메서드를 만들어서 PostEdit자체를 받은 후에 삼항연산자를 쓰는 방식으로 해결해도 문제가 없을까요??@Data public class PostEdit { @NotBlank(message = "제목을 입력하세요.") private String title; @NotBlank(message = "내용을 입력하세요.") private String content; @Builder public PostEdit(String title, String content) { this.title = title; this.content = content; } }public void edit(PostEdit postEdit) { this.title = postEdit.getTitle() != null ? postEdit.getTitle() : this.title; this.content = postEdit.getContent() != null ? postEdit.getContent() : this.content; }
-
해결됨Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
깃헙 권한 요청드립니다.
- 인프런 아이디: sju02135@hanmail.net- 인프런 이메일: sju02135@hanmail.net- 깃허브 아이디: sju02135@hanmail.net- 깃허브 username: minsung1129
-
미해결호돌맨의 요절복통 개발쇼 (SpringBoot, Vue.JS, AWS)
@Configuration WebMvcConfig클래스에대해
WebMvcConfig 클래스에 @Configuration애노테이션을 사용하면 addInterceptors 메서드에 @Bean을 달아줘야 동작할줄 알았는데 @Bean 애노테이션을 안달아줘도 잘 작동하는 이유가 궁금합니다.
-
미해결프로젝트로 배우는 Vue.js 3
개발툴 글자체, 크기, 색깔 세팅 문의
강의 화면에 보이는 개발툴 글자체, 크기, 색깔이어떻게 되나요?똑같이 세팅 하고 싶습니다^^
-
해결됨Vue 3 시작하기
파일이름을 소문자로시작하는건 어떤경우인가요
파일이름을 소문자로 시작해서 하는건 상관없는건가요?그리고 컴포넌트를 가져올때 상대경로로 보통 가져오신다고했는데 다른폴더에있는 컴포넌트를 가져올때 ../ 이런식으로도 찾는게 맞나요?