55,000원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
깃허브에서 강사님의 소스가 보이지 않습니다.
아래 화면캡처와 같이 깃허브에 강사님이 작성하신 스크립트가 보이지 않습니다. 실습 시 참조하기 위해 반드시 필요합니다. 기초강의때처럼 소스를 다운받을 수 있을까요?
- 미해결Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
깃허브 권한 요청 드립니다.
- 인프런 아이디: renoyar@naver.com- 인프런 이메일: renoyar@naver.com- 깃허브 아이디: skshhj@gmail.com- 깃허브 username: RENOYAR
- 미해결Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
vuex와 컴포넌트 설계 관련 질문
안녕하세요, 강의를 잘 수강하고 실무에서도 잘 사용하고 있습니다. 다름이 아니라 몇가지 질문들이 있어서 드립니다. 1) action에서 반드시 mutation을 호출할 필요는 없는 것이죠? view에서 action을 통하여 api를 호출하여 비동기로 데이터를 받은 다음, action을 호출한 method에서 데이터를 처리하고 mutation을 다시 호출하여 state에 넣어도 되는 것이죠? 2) 1번 질문의 연장 질문입니다. action에서 비동기로 받은 데이터를 return을 받는 방법은 일반적인 method에서 return 시키는 방법처럼은 없는 것인가요? 검색해보면 전부 promise를 사용하는 방식인거 같아서요. 3) 제가 이해하기론 view에서는 getter를 이용해서 state의 데이터를 받는 것이라고 이해했습니다.그렇다면 우리가 어떤 컴포넌트의 v-model에 getter를 직접 연결해도 괜찮은가요?실제로 vuex에는 데이터가 잘 반영이 되는데, 이렇게 되면 getter가 mutation의 역할도 같이 해버리는 것 같아서요.찾아보면 value=mapState + @input을 통하여 method에서 mutation을 호출하여 분리하여 처리하라고 하는거 같은데, view에서 바로 state를 붙게되면 또 getter의 의미가 퇴색되는거 같아서 그렇습니다. 4) 특정 메뉴의 컴포넌트의 depth도 깊고 child도 많은 상황이라 vuex를 사용하려합니다. 그런데, 버튼을 클릭하면 특정 컴포넌트를 추가하고 또 삭제도 가능한 상황입니다. v-for를 통하여 vuex에 있는 list에 해당 컴포넌트의 데이터를 추가하고 삭제하면서 관리를 합니다. 다만, 특정 컴포넌트에서 vuex에 있는 데이터에 바로 접근하려면 항상 본인의 index를 props로 내려받아서 list[this.index].object 이런식으로 접근해야하는데, v-for와 vuex를 동시에 사용하는 상황에서 효과적으로 컴포넌트를 설계하는 방식이 있을까요? 5) action과 mutation의 동작 범위action과 mutation은 각각 비동기/동기로 데이터를 처리하는 것으로 이해하고 있습니다.그렇다면 우리가 action과 mutation에도 많은 녀석들이 생성될 텐데요.action과 mutation안에서 단순히 api로 데이터를 비동기로 호출하거나 또는 동기로 state에 데이터를 저장하는 그런 동작 외에 어떤 데이터를 처리하거나 하는 Logic단같은 코드나 함수를 추가해도 되는 것일까요?아니면 그런 코드들은 view에서 생성하고 거기서만 처리하고 action과 mutation에는 단순 데이터를 호출하고 저장하고 하는 그런 코드만 작성하여 최소한으로 해두어야하는 것일까요? 6) 현재 저희는 typescript로 넘어가지 않고 아직 javascript를 사용하고 있습니다.간간히 javascript의 class를 사용하고 간단한 디자인 패턴도 넣어서 같이 구현하곤 하는데요.혹시 다른 객체지향언어(C#, Java)와 같이 class와 상속/조합 과 같은 설계를 많이 사용하시나요?아니면 그런걸 지원하긴 하지만 거의 안쓰시나요?또한, 전략/팩토리/옵저버 등과 같은 간단한 디자인패턴도 사용하시는지? 아니면 브릿지 등과 같은 고급 패턴도 typescript/javascript에서 구현을 해서 사용을 하는 경우도 있는지 이런 부분이 생기면 최대한 backend단으로 넘겨서 처리시키시는지 front에서의 처리를 어느정도로 하는지 궁금합니다. 말솜씨가 안좋아서 저의 질문이 잘 전달되었는지는 모르겠습니다.혹시나 확인하시고 여유가 되신다면 답변을 부탁드립니다 :)
- 미해결Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
[Vue warn]: Error in v-on handler: "TypeError: Cannot read properties of undefined (reading '$store')"에러..
main.js, store.js 등에서도 vuex랑 연결 잘되있는데removeOneItems랑 toggleOneItems 클릭시 저런 애러가 뜸니다 addOneItems은 잘되는데
- 미해결Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
깃헙 권한 요청드립니다
인프런 아이디 : sangkipm@gmail.com인프런 이메일 : sangkipm@gmail.com깃헙 아이디 : sangkipm@gmail.com깃헙 username : kimsangkipm
- 미해결Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
TodoInput컴포넌트의 addTodo 헬퍼함수 적용 질문드립니다.
<template> <div class="inputBox shadow"> <input type="text" v-model="inputValue" v-on:keyup.enter="checkAndAddTodo()"> <span class="addContainer" v-on:click="checkAndAddTodo()"> ... </template> <script> methods: { ...mapMutations([ 'addTodo' ]), checkAndAddTodo() { if (!this.checkEmpty()) { this.addTodo(this.inputValue); this.clearInput(); } else { this.showModal = !this.showModal; } }, checkEmpty() { console.log("inputValue: ", this.inputValue) if(this.inputValue === '') { return true; } return false; }, clearInput() { this.inputValue = ''; } }, components: { Modal: Modal } </script>addTodo도 helper 함수를 적용해서 변경해보려 했는데.. 이런식으로 변경하는게 맞을까요??checkAndAddTodo함수 내의 this.addTodo() 실행시 mapMutations의 'addTodo'를 따라 store까지 전달이 되긴 하는데.. 올바른 방식으로 수정한건지 궁금합니다
- 미해결Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
store.js와 각 컴포넌트 간 역할에 대해 질문드립니다
store.js는 mutations 속성에 DB(or localStorage)에 접근해서 실제로 데이터를 CRUD하는 함수를 정의하고, 각각의 컴포넌트들의 methods 속성에는 $store.commit을 통해 store.js로 상태들을 모아주는 역할을 하는 것이라 이해를 했습니다. 여기서 궁금한 부분은, 데이터를 가공하는 로직이 필요할 경우 각 컴포넌트의 methods에서 가공 후 store로 넘기는 방법일단 데이터를 다 받은 뒤 store의 mutations에서 가공&저장을 하는 방법저는 각각의 컴포넌트에서 가공한 뒤 가공된 데이터를 store로 넘기는 게 맞다고 생각이 되는데, 뭐가 더 나은 방법일지 궁금해서 문의드립니다.
- 해결됨Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
state 와 v-model에 대해서 질문이 있습니다.
강의 내용 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로만 사용하라고 되어있는데 스택오버플로에선 사용한 사람도 있는 것 같기도 하고 무엇이 맞는지 궁금해용
- 미해결Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
todoItem.item이 왜 key가 될까요?
안녕하세요 강사님!어플리케이션 탭을 보면 엄연히 key, value가 있고 value 안에 completed, item이 있는 건데...todoItem.item이 어떻게 키값이 되는건지 궁금합니다.처음 설정할 때 key값과 todoItem.item을 같게(?) 해놓으면 todoItem.item을 key 값으로 접근할 수 있나요?만약 key(id값)으로 접근하려면 어떻게 해야 하나요?초보라 질문이 많습니다 ㅠㅠ 시간되실 때 답변해주시면 감사드리겠습니다 :)
- 해결됨Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
slot 적용 안되는 것 해결법
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> 감사합니다.
- 해결됨Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
Vue에서 Dependency Injection이 없나요?
안녕하세요~!프론트에 관심이 생겨서재미있게 강의를 듣고 있는 백엔드 개발자 입니다. 강의를 듣다보니 js는 component를 작성할 때 클래스를 만드는 것보다는 함수를 만들어서 해결하는 것 같은데요. 컴포넌트 클래스를 생성하고 spring framework 처럼 IoC를 사용하여 각 컴포넌트간에 DI를 사용할 수는 없는 건가요?감사합니다.
- 미해결Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
Vuex 관련 질문
안녕하세요~ 캡틴 판교님 수업을 잘 듣고 실무에서도 잘 사용 중입니다. 다만, 사용하다보다가 발생한 궁금증이 있습니다.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.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
학생 할인 관련 질문이 있습니다.
이 수업과 관련된 질문은 아니지만, Vue 중급강좌를 완강하기 전에 미리 Vue 완벽가이드 강의를 구매하려합니다.학생할인을 50%를 제공한다고 하는데 학생증을 첨부하면 자꾸 첨부한 파일이 자꾸 사라지네요. 개발자 도구로 확인해보니 학생증 사진의 글씨를 인식하는 카카오 api가 작동을 안하는것 같습니다.혹시 학생 할인이 이제 끝난건가요? 아니면은 고쳐 주시길 부탁드리겠습니다...ㅠ 제가 학생이라 가격이 조금 부담되는게 있어서요. 답 해주시면 감사하겠습니다:)
- 미해결Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
안녕하세요 !
혹시 수업에 나온 교안은 따로 볼 수 있는곳이 없는걸까요 ?
- 미해결Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
github 권한 추가해주세요
인프런 아이디: hyzcore@gmail.com인프런 이메일: hyzcore@gmail.com깃허브 아이디: hyzcore@gmail.com깃허브 username: HyungJun Lee
- 미해결Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
GitHub 권한 요청드립니다.
인프런 아이디 : ferrariq@naver.com인프런 이메일 : ferrariq@naver.com깃헙 아이디 : ferrariq@naver.com깃헙 Username : KJP-MrJAVA권한 부타드립니다.수고 하십시요
- 미해결Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
깃허브 요청
인프런 아이디 : sjgio0515@naver.com인프런 이메일 : sjgio0515@naver.com깃헙 아이디 : sjgio0515@naver.com깃헙 Username : zioDaydream
- 미해결Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
깃허브 요청드렸는데 수락 부탁 드립니다
인프런 아이디 : ps@codeclick.co.kr인프런 이메일 : ps@codeclick.co.kr깃헙 아이디 : rhksgud123@naver.com깃헙 Username : KwanHyung Lee 댓글 달아놨는데 아직 소식이 없어서요! 부탁드립니다 ㅠㅠ
- 미해결Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
깃허브 권한 요청 드립니다.
인프런 아이디 : siwoobaksa@naver.com인프런 이메일 : siwoobaksa@naver.com깃헙 아이디 : lswsepia@gmail.com깃헙 username : lswdev
- 미해결Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
깃헙 권한 요청드립니다~
인프런 아이디 : YOON KYEOM KIM인프런 이메일 : newalpha77@gmail.com깃헙 아이디 : newalpha7@naver.com깃헙 username : KimYoonKyum