Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex

Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex

(25개의 수강평)

684명의 수강생

49,500원

장기효(캡틴판교)
평생
중급
수료증
63개 수업, 총 6시간 30분
Wishlist
wininfo1998 프로필

github 권한 부탁 드려요. wininfo1998 6일 전

GIT ID: gdsvuejs@gmail.com

git username: gdsvuejs

인프런 ID: wininfo1998@gmail.com

1
이은영 프로필

권한 부탁드려요 이은영 11일 전

권한 부탁 드려요

GIT ID: seun1986@gmail.com

git username: ey1986

인프런 ID: seun1986@gmail.com

 

0
김철중 프로필

module에 담긴 변수에 접근하는 방법 김철중 16일 전

현재 todoApp.js 모듈에 변수 keyIndex를 설정해놨습니다.

export default { keyIndex, storage, state, getters, mutations };

이런식으로 export를 해준 상태인데요.

main.js에서는 import { store } from './store/store'; 로 가져오고 있고,

라이프 사이클 훅으로 이 keyIndex 값을 아래와 같이 commit 하고 싶은데요.

created() { store.commit('setIndex', keyIndex); }

keyIndex에 접근하는 방법이 마땅치가 않더라구요.

store를 콘솔로 찍어서 겨우 찾아서 접근은 가능해졌는데...

created() { store.commit('setIndex', store._modules.root._children.todoApp._rawModule.keyIndex); }

이런 식으로 너무 장황해져서 이게 맞는건가 싶습니다.

혹시 module에 담긴 변수에 접근하는 다른 방법이 있을까요?

참고로 결제 오류로 고급 강좌를 수강하지 못하고 있는데, 고급 강좌에 해당 내용이 있다면

"고급 강좌를 참고하세요~" 라고 말씀해주셔도 좋습니다.

좋은 강의 감사합니다.

0
김철중 프로필

한글 입력시 이벤트가 두번 발생됩니다. 김철중 16일 전

한글로 내용을 작성후 엔터키를 입력하면 이벤트가 두번 발생합니다.

캡틴 판교님의 마지막 강의에서도 시연 중 이런 현상이 있는 것으로 보였는데요.

이 문제에 대해 해결 방법이 있을까요?

Vue.js 포럼에서는 CJK 언어에서 발생하는 문제로 keyup 이벤트가 발생할 때마다

해당 인풋의 value 값을 읽어와 임의로 업데이트 해주는 것으로 해결하라고 하던데,

버튼을 클릭하여 추가할 때는 문제가 없지만, 엔터키 입력시에는 문제가 발생하는 것 같아서요.

참고로 한번은 한글 내용이 담긴 채로 이벤트가 발생하고, 곧바로 빈 값을 이벤트가 한번 더 발생합니다.

빈 값일 경우에는 저장이 안되도록 예외 처리는 되어 있지만 빈 값일 경우 내용을 입력하세요 라는 alert을 띄우게 해놨더니,

한글 입력 -> 엔터 키 입력 -> 한글 내용 등록 -> alert 창 호출 이렇게 돌아가고 있습니다.

0
SEONG UK MUN 프로필

깃헙링크를 못찾아 초대부탁드립니다. SEONG UK MUN 18일 전

인프런닉네임: SEONG UK MUN
인프런아이디: SEONG_UK_MUN
인프런이메일: gukbab1216@gmail.com

깃헙아이디: MUNSEONGUK

깃헙이메일: gukbab1216@gmail.com

1
김철중 프로필

removeItem을 안하면 어떤 단점이 있나요? 김철중 23일 전

같은 키 값으로 setItem을 하게 되면 값이 덮어씌워지면서 원하는대로 동작하던데, 권장하지 않는 방식인가요?

이게 오히려 간편해서 좋은거 같아서요.

1
송기 프로필

권한 부탁드립니다! 송기 24일 전

권한 부탁드려요!

1
kn moong 프로필

권한 부탁드립니다~~ kn moong 1달 전

인프런 아이디 : kn_moong

인프런 이메일 : kyungna98@gmail.com

깃헙 아이디 : kyungna98@gmail.com

깃헙 Username : moong78

 

권한부탁드립니다!

0
성하나 프로필

확인부탁드립니다. 성하나 1달 전

한동안 강의 못듣다가 지금 다시 들으려고 하는데,

저번에 분명 이메일 주셔서 확인하고 ,, 초대에 응했던거같은데

지금다시 확인하니 advanced는 되어있는데 중급강좌는 또 없습니다..

초대 이메일로 접속해봐도 404가 뜨고...

왜없어지나요..???

다시한번 확인좀 부탁드려요...

1
Soros Lim 프로필

gist 권한 부탁드립니다. Soros Lim 1달 전

갭틴판교님, github 비공개 사이트 관리가 잘되지 않는 것 같은데, 공개로 풀어버리시면 안될까요?

유료로 수강하고 있는데, 샘플 코드 돌려보지도 못하고 있네요.

1
김은택 프로필

질문 드립니다. 김은택 1달 전

todoList.vue
toggleComplete(item, index) {
    console.log( '----------------------todoList.vue / toggleComplete----------------------------);
    console.log('todoList todoItem : ', item);    
    console.log('todoList todoItem.completed : ', item.completed);     // false  

    this.$emit('toggleOneItem', item, index);
}

App.vue
toggleOneItem(todoItem, index) {
    console.log('----------------------App.vue / toggleOneItem------------------------------');      
    console.log('app.vue 1 todoItem : ', todoItem);
    console.log('app.vue 1 todoItem.completed : ', todoItem.completed);    // false     

    this.todoItems[index].completed = !this.todoItems[index].completed;

    console.log('app.vue 2 todoItem : ', todoItem);
    console.log('app.vue 2 todoItem.completed : ', todoItem.completed);    // true?? 왜 true로 변경이 되나요??       

    localStorage.removeItem(todoItem.item); 
    localStorage.setItem(todoItem.item, JSON.stringify(todoItem));
}

this.todoItems 는 라이플사이클 훅 created 단계에서 로컬스토리지에 있는 데이터를 받아 온 배열일 뿐인데
어떻게 this.todoItems[index].completed = !this.todoItems[index].completed 코드로
todoList에서 넘어온 첫번째 파라메터 todoItem.completed 값이 변경 되는건가요 ??

리팩토링 전 코드

todoItem.completed = !todoItem.completed 
localStorage.removeItem(todoItem.item);
localStorage.setItem(todoItem.item, JSON.stringify(todoItem));

는 todoItem.completed를 직접 변경해서 로컬스토리지에 저장하기 때문에 이해가 가는데
리팩토링 한 코드는 이해가 안갑니다 ㅜ

this.todoItems[index].completed = !this.todoItems[index].completed;
localStorage.removeItem(this.todoItems[index].item);
localStorage.setItem(todoItem.item, JSON.stringify(this.todoItems[index]));

이렇게 되야 되는게 아닌가요??

어떻게 index로 app.vue data의 todoItems[index].completed를 변경 했을 뿐인데
같이 넘어온 첫번째 파라메타 todoItem.completed가 변경이 될 수 있는건가요ㅜㅜ?
todoItem은 삭제하고 다시 저장하는 코드밖에 없는데 말이죠ㅜ
너무 궁금하네요 ㅜㅜ 뭔가 되게 간단한걸 놓치고 있는거 같은데 ...

또 궁금한건
console.log(todoItem)
console.log(todoItem.completed)
이 두개의 값이 다르게 나옵니다.

캡쳐 이미지 올리겠습니다 ㅜㅜ
https://i.imgur.com/4jvZzAF.png

그리고 좋은 강의 정말 감사드립니다!!

1
김창수 프로필

vue.js 중급과정 수강중인데 vue-advanced로 초대가 된것 같아요... 김창수 1달 전

vue-intermediate로 초대해주셔야 하는것 아닌가요? ㅠㅠ

0
성하나 프로필

다시한번확인부탁드려요.. 성하나 1달 전

인프런 아이디 : @crazysongi

인프런 이메일 : shn8888@naver.com

깃헙 아이디 : hana0963@gmail.com

깃헙 Username : shn8888

2
성하나 프로필

권한부탁드려요~~ 성하나 1달 전

권한부탁드려요~~

1
풀스택 프로필

프로젝트 생성시 강의와 다른 구성으로 파일들이 생성됩니다 풀스택 1달 전

index.html이 없는체로 프로젝트가 생성됩니다.

2