55,000원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
Vuex 사용하여 {{ 데이터 }} 표시시 에러 발생합니다..
이렇게 에러가 발생합니다 ㅠㅠindex.js 파일입니다.main.js 파일입니다.폴더 경로입니다. 저와 동일현상이 있는분이 질문올린걸 봤는데 뷰엑스를 뷰인스턴스에 연결한다는게 어떤 설정이 빠진걸까요?
- 미해결Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
다시 추가 부탁드립니다.
인프런 아이디 : jsbae인프런 이메일 : jsbae@gallup.co.kr깃헙 아이디 : baezzaes@naver.com깃헙 Username : baezzaes 댓글 달았었는데 404에러 뜹니다. 다시한번 부탁드려요~
- 미해결Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
깃헙 권한 요청 드려요
인프런 아이디 : ehana0210인프런 이메일 : ehana0210@gmail.com깃헙 아이디 : ehana0210.dev@gmail.com깃헙 Username : ehana0210-dev
- 미해결Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
메일 알람설정
이전 글에 깃 알람 안오게 하는 방법 문의 드렸었는데리포지토리를 fork 하고 알려드리면 리포에서 제거 해주신다고 하셨었어요 댓글로 달았는데 아직 알람이 계속 오는것 같아서요아래 이전글에 2개 리포 요청 드렸는데 확인 부탁 드립니다 이전글 링크:https://www.inflearn.com/questions/750983/comment/236146
- 미해결Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
GITHUB 권한 요청 드립니다.
GIST에서 권한신청했는데 404 에러로 접근이 안되네요확인부탁드립니다.인프런 아이디 : jb.hwang인프런 이메일 : jb.hwang@htpchem.com깃헙 아이디 : jb.hwang@htpchem.com깃헙 Username : hwang802
- 미해결Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
메일 알람 설정 문의
메일 알람 안오게 할려면 어떻게 해야 하나요? repositories에서는 이미 삭제해서 unsubscribe를 할수가 없는 상태입니다 답변 부탁 드리겠습니다
- 미해결Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
Vue3 쓰시는분들 트랜지션 설정 팁
실무에서 쓸일이 있어서 복습하다보니 Vue 버전이 바뀌어서 강의 내용보면서 Vue3 에 맞게 적용중인데요. 우선 아래 레퍼런스 참고하시면 될 듯 합니다. 강의내용과는 크게 다른건 없긴합니다.https://vuejs.org/guide/built-ins/transition.html#the-transition-componenthttps://vuejs.org/examples/#list-transitionTodoList.vue<template> <div> <!-- name 은 하단의 css 클래스 transition class 와 연관--> <TransitionGroup tag="ul" name="list" class="container"> <li v-bind:key="todoItem.item" v-for="(todoItem, index) in propsdata" class="shadow"> <i class="checkBtn fa-solid fa-check" v-bind:class="{checkBtnCompleted: todoItem.completed}" v-on:click="toggleComplete(todoItem, index)"></i> <span v-bind:class="{textCompleted : todoItem.completed}" >{{ todoItem.item }} </span> <!--{{ index }}--> <span class="removeBtn" v-on:click="removeTodo(todoItem, index)"> <i class="fa-solid fa-trash"></i> </span> </li> </TransitionGroup> </div> </template> <style> /* 기존 css 는 생략, 아래 레퍼런스 css 참고 https://vuejs.org/examples/#list-transition */ /* 리스트 아이템 트랜지션 효과 */ /* 1. declare transition */ .list-move, .list-enter-active, .list-leave-active { transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1); } /* 2. declare enter from and leave to state */ .list-enter-from, .list-leave-to { opacity: 0; transform: translateY(30px); } /* 3. ensure leaving items are taken out of layout flow so that moving animations can be calculated correctly. */ .list-leave-active { position: absolute; transition: all 1s; } </style>
- 미해결Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
깃헙 권한 요청드 립니다!
인프런 아이디 : ljk4268인프런 이메일 : ljk4268@kakao.com깃헙 아이디 : ljk4268@kakao.com깃헙 Username : ljk4268
- 미해결Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
권한요청 드립니다.
인프런 아이디 : sky9844인프런 이메일 : sky9844@gmail.com깃헙 아이디 : dndn8988@gmail.com깃헙 Username : @Pang15101
- 미해결Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
삭제버튼 클릭시 정상적으로 삭제되지만 트렌지션 효과로 보이는 값은 맨 마지막값으로 보입니다.
이렇게 Todo가 있다고 하고, 2번을 삭제하면 정상적으로 삭제됩니다.하지만 아래 삭제되는 트렌지션 효과를 보면 맨 마지막 숫자인 7이 사라지는 것처럼 보이게 되는데 혹시 이것을 현재 지운 값으로 보이게 하려면 어떻게 해야할까요..?항상 좋은 강의 감사합니다!
- 미해결Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
toggleOneItem > 안티패턴에 대해
안녕하세요. Vue.js 중급편을 듣고 있는 수강생입니다.다름이 아니라, App.vue > toggleOneItem의 이벤트로 넘어온 todoItem을 수정하는 것이 안티패턴이라고 하신 것은 이해가 되었는데, localStorage.setItem(todoItem.item, JSON.stringify(todoItem));에서는 todoItem을 그대로 사용하여, localStorage에 저장하는 방식은 조금 이해가 되지 않습니다. 위 문단의 안티패턴과는 상관없지만 this.todoItems[index]의 필드 수정된 것이 todoItem이 참조하고 있기 때문에 변경 처리되었으니 localStorage에 저장한다는 의미가 되는데, 굳이 그렇게 하는 것보다는 명확하게 하기 위해서이벤트로 index만 받고,toggleOneItem: function (index) { let todoItem = this.todoItems[index] todoItem.completed = !todoItem.completed localStorage.removeItem(todoItem.item) localStorage.setItem(todoItem.item, JSON.stringify(todoItem)); },이렇게 했을 때, App 컴포넌트의 todoItems를 핸들링하는 것을 명확하게 알 수 있지않을까 했습니다.이렇게 구현했을 때의 구현상의 안좋은 패턴이 되는 요소가 있는지 궁금합니다.
- 미해결Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
모달 창이 사라지지 않고 처음부터 계속 띄어져있어요
<template> <div class="inputBox shadow"> <input type="text" v-model="newTodoItem" placeholder="Type what you have to do" v-on:keyup.enter="addTodo"> <span class="addContainer" v-on:click="addTodo"> <i class="addBtn fa fa-plus" aria-hidden="true"></i> </span> <Modal> v-if="showModal" @close="showModal = false"> <h3 slot="header"> 경고! </h3> </Modal> </div> </template> <script> import Modal from './common/Modal.vue' export default{ data: function(){ return { newTodoItem:'', showModal: false } }, methods: { addTodo: function(){ if(this.newTodoItem !== ''){ this.$emit('addTodoItem', this.newTodoItem); this.clearInput(); }else{ this.showModal = !this.showModal; } }, clearInput(){ this.newTodoItem = ''; } }, components:{ Modal: Modal } } </script>위에는 TodoInput.vue 부분입니다. <template> <Transition name="modal"> <div class="modal-mask"> <div class="modal-wrapper"> <div class="modal-container"> <div class="modal-header"> <slot name="header">default header</slot> </div> <div class="modal-body"> <slot name="body">default body</slot> </div> <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> .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; } .modal-header h3 { margin-top: 0; color: #42b983; } .modal-body { margin: 20px 0; } .modal-default-button { float: right; } /* * The following styles are auto-applied to elements with * transition="modal" when their visibility is toggled * by Vue.js. * * You can easily play with the modal transition by editing * these styles. */ .modal-enter-from { opacity: 0; } .modal-leave-to { opacity: 0; } .modal-enter-from .modal-container, .modal-leave-to .modal-container { -webkit-transform: scale(1.1); transform: scale(1.1); } </style> 위에는 Modal.vue 부분입니다. 위는 프로젝트 구조입니다. 모달창이 저렇게 계속 띄어져있습니다. 그냥 실행하자마자 띄어져있고 OK를 눌러도 닫혀지지가 않습니다. 왜 그런지 혹시 알 수 있을까요?
- 미해결Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
깃허브요청합니다
인프런 아이디 : koh인프런 이메일 : koh@samil25.co.kr깃헙 아이디 : kimohhyun7@naver.com깃헙 Username : kimohhyun7
- 미해결Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
권한요청 부탁드립니다.
안녕하세요, 404에러가 떠서 재추가 요청드립니다! 인프런 아이디 : @inajeong인프런 이메일 : ina@happyict.co.kr깃헙 아이디 : ina@happyict.co.kr깃헙 Username : inajeong 감사합니다!
- 해결됨Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
깃허브 권한요청드립니다~
인프런 아이디 : jjkim0222인프런 이메일 : jjkim0222@naver.com깃헙 아이디 : jjkm0222@gmail.com깃헙 Username : JJK0104
- 미해결Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
권한 요청드립니다!
인프런 아이디 : 김민국인프런 이메일 : minkook92@gmail.com깃헙 아이디 : minkook92@naver.com깃헙 Username : minkook92
- 미해결Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
깃허브 권한요청드립니다.
인프런 아이디 : koh@samil25.co.kr 인프런 이메일 : koh@samil25.co.kr깃헙 아이디 : belger@naver.com깃헙 Username : Jungsungsu
- 미해결Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
vuex 설치가 안돼요
수업에서 말씀해주신 것처럼 npm install vuex@3.6.2 --save라고 하고 실행시키면 up to date, audited 12 packages in 880ms1 package is looking for funding run npm fund for detailsfound 0 vulnerabilities라고 뜨고 vuex가 설치가 안됩니다(package.json에서 vuex 설치가 되지 않은 것을 확인했습니다.)
- 미해결Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
깃헙 권한 요청 드립니다.
인프런 아이디 : pongstory79@gmail.com인프런 이메일 : pongstory79@gmail.com깃헙 아이디 : pongstory79@gmail.com깃헙 아이디 : pongstory
- 미해결Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
transition 관련 질문 있습니다
소스는 위와같이 강의내용대로 적용되었으나, 트랜지션이 작동하지 않는 부분이 발생합니다.TODO 목록을 삭제할때는 트랜지션이 작동하는데 TODO 목록을 추가하는 경우는 트랜지션이 작동하지 않네요.그래서 혹시나 싶어 style 부분에 아래 css를 추가하였습니다.이렇게 적용하니 TODO 목록 추가에 트랜지션이 적용되었습니다.하지만, translateY 때문인지 아래로 30px 내려가면서 추가되는 애니메이션이 적용되더군요. 혹시 강의내용처럼 위로 올라오면서 추가되게 하려면 어떻게 해야할까요??