인프런 커뮤니티 질문&답변

이효진

작성한 질문수

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

트렌지션 소개 및 구현

질문이요ㅠㅠ

작성

353

1. 다 제대로 구현이 되었는데 todo목록작성을 다 한 후 에 새로고침을 하면 목록들이 처음 작성한 목록대로 있어주지 않고 뒤죽박죽 섞이는데 어떻게 해야 하나요?

2. clearAll 옆에 clearSelection이라는 버튼을 만들었고 이 버튼은 체크되어있는 리스트(completed가 true인 리스트)만 지우는 일을 하게끔 구현하고 싶습니다.

지금 vuex 강의까지 다 듣고 이런저런 방법으로 시도해 보았는데 잘 안되서요ㅠㅠ ..

체크를 하고 새로고침을 하고 나면 vuex 개발자 도구에서 state에 completed값이 다시 초기화 되어버리는것도 문제고

completed가 true인 값만 받아서 삭제처리를 하고싶은데 로직을 어떻게 해야 할까요???

vuejs javascript es6 vuex

퀴즈

브라우저 기본 alert 대신 커스텀 모달을 사용하는 주된 이유는 무엇일까요?

코드 실행 속도를 높이기 위해

사용자 경험(UX) 및 디자인을 개선하기 위해

데이터베이스 연결을 간소화하기 위해

자동으로 입력 유효성 검사를 수행하기 위해

답변 2

이효진

질문자

답변 너무 감사합니다!!!

캡틴판교

지식공유자

안녕하세요 효진님 제가 답변이 좀 늦었네요..! 질문에 바로 답변드릴게요.

1. 브라우저 새로 고침을 했을 때 아마 할 일 목록을 로컬 스토리지에서 꺼내와서 v-for로 목록을 나열해주셨을텐데요. 순서가 뒤죽박죽 되는 이유는 로컬 스토리지에서 할 일 목록을 꺼내와서 배열 data에 넣어줄 때 정렬(sorting)이 되어 있지 않아서 그렇습니다. 따라서, 1,2,3,4 이런식으로 정렬되어 있는 걸 보시고 싶으면 아래 sort API를 사용해보시면 될 것 같아요 :)

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/sort

2. 질문하신 기능은 배열의 filter() 라는 API를 사용하시면 쉽게 구현하실 수 있을거에요 :) 로직을 예시로 적어드리면 이런 느낌일 것 같습니다.

new Vue({
data: function() {
return {
todoItems: [{ id: 1, completed: false }]
};
},
methods: {
clearCompletedTodo: function() {
this.todoItems = this.todoItems.filter(function(todoItem) {
return !todoItem.completed;
});
}
}
});

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

남은 강의도 화이팅입니다 :)

이효진

작성한 질문수

전체 Q&A

질문하기