-
Notifications
You must be signed in to change notification settings - Fork 213
[10기 soonysoo] TodoList with CRUD #211
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: soonysoo
Are you sure you want to change the base?
Changes from 1 commit
5a98520
24ef8da
083007d
5cb9313
be55af2
76d96d8
023bf9e
1fb2b3a
e3074f6
11807be
ab1f0c9
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -25,7 +25,7 @@ class App extends Component{ | |
} | ||
|
||
mounted(){ | ||
const {$state ,onAddTodo, onToggleTodo, onDeleteTodo, onCountTodo, onFilter} = this; | ||
const {$state ,onAddTodo, onToggleTodo, onDeleteTodo, onUpdateTodo, onFilterTodo} = this; | ||
const _Input = document.querySelector('#new-todo-title'); | ||
const _TodoList = document.querySelector('#todo-list'); | ||
const _Filter = document.querySelector('#todo-filter'); | ||
|
@@ -34,31 +34,31 @@ class App extends Component{ | |
new TodoList(_TodoList, { | ||
$state, | ||
onToggleTodo: onToggleTodo.bind(this), | ||
onDeleteTodo : onDeleteTodo.bind(this) | ||
onDeleteTodo : onDeleteTodo.bind(this), | ||
onUpdateTodo : onUpdateTodo.bind(this) | ||
}); | ||
new Filter(_Filter,{ | ||
$state, | ||
onFilterTodo : onFilterTodo.bind(this) | ||
}); | ||
new Filter(_Filter); | ||
} | ||
|
||
onAddTodo(content){ | ||
//const {count,Filtermode,List} = this.$state; | ||
const id = String(this.$state.count*1+1); | ||
const Filtermode = this.$state.Filtermode; | ||
const List = [...this.$state.List, {id ,content:content,activate:false}]; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. { id, content: content, activate: false} -> { id, content, activate: false } 다음과 같이 content 속성을 단축 할수 있을 것 같아요. (property shorthand) |
||
localStorage.setItem("todo",JSON.stringify({List,count : id*1,Filtermode})); | ||
|
||
this.setState(JSON.parse(localStorage.getItem("todo"))); | ||
//localStorage.setItem("todo",this.$state); | ||
} | ||
onToggleTodo(id){ | ||
const List = []; | ||
|
||
this.$state.List.map(todo => { | ||
if(todo.id==id){ | ||
List.push({id:todo.id, content:todo.content, activate:!todo.activate}) | ||
}else{ | ||
List.push({id:todo.id,content:todo.content, activate:todo.activate}) | ||
} | ||
}); | ||
console.log(List); | ||
const count = String(this.$state.count*1+1); | ||
const Filtermode = this.$state.Filtermode; | ||
localStorage.setItem("todo",JSON.stringify({List,count :count*1, Filtermode})) | ||
|
@@ -67,13 +67,21 @@ class App extends Component{ | |
} | ||
onDeleteTodo(id){ | ||
const List = this.$state.List.filter(todo => todo.id!==id); | ||
const count = String(this.$state.count*1+1); | ||
const count = String(this.$state.count*1); | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. *1 은 형변환하려고 하실 때 말고 다른 용도로 사용한 것인지 궁금해요. 😀 |
||
const Filtermode = this.$state.Filtermode; | ||
localStorage.setItem("todo",JSON.stringify({List,count :count*1, Filtermode})) | ||
this.setState(JSON.parse(localStorage.getItem("todo"))); | ||
} | ||
onCountTodo(){} | ||
onFilter(mode){} | ||
onUpdateTodo(id, content){ | ||
|
||
} | ||
onFilterTodo(mode){ | ||
const List = this.$state.List; | ||
const count = String(this.$state.count*1); | ||
const Filtermode = mode; | ||
localStorage.setItem("todo",JSON.stringify({List,count :count*1, Filtermode})) | ||
this.setState(JSON.parse(localStorage.getItem("todo"))); | ||
} | ||
} | ||
|
||
|
||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -2,25 +2,43 @@ import Component from "../core/component.js"; | |
|
||
class Filter extends Component{ | ||
setup(){ | ||
|
||
this.$state = this.$props.$state; | ||
} | ||
|
||
template(){ | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 혹시, 전체를 템플릿으로 한 부분이 궁금해요. ^^ |
||
const mode = this.$state.Filtermode; | ||
const totalNum = ((mode)=>{ | ||
if(mode==0){ | ||
return this.$state.List.length; | ||
}else if(mode==1){ | ||
return this.$state.List.filter(item => item.activate!=true).length; | ||
}else{ | ||
return this.$state.List.filter(item => item.activate!=false).length; | ||
} | ||
})(mode) | ||
return ` | ||
<span class="todo-count">총 <strong>0</strong> 개</span> | ||
<span class="todo-count">총 <strong>${totalNum}</strong> 개</span> | ||
<ul class="filters"> | ||
<li> | ||
<a class="all selected" href="#">전체보기</a> | ||
<a class="all ${mode==0?"selected":""}" id="0" href="#">전체보기</a> | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
const type = (mode) => {
return mode === 0 ? "selected" : ""
} 이런식으로 뺀 다음에 해당 코드에서는 ${type(mode)} 이런식으로 작성해도 좋지 않을까요?
|
||
</li> | ||
<li> | ||
<a class="active" href="#active">해야할 일</a> | ||
<a class="active ${mode==1?"selected":""}" id="1" href="#active">해야할 일</a> | ||
</li> | ||
<li> | ||
<a class="completed" href="#completed">완료한 일</a> | ||
<a class="completed ${mode==2?"selected":""}" id="2" href="#completed">완료한 일</a> | ||
</li> | ||
</ul> | ||
` | ||
} | ||
mounted(){ | ||
const filterBtn = document.querySelectorAll('.filters > li > a'); | ||
filterBtn.forEach(element =>{ | ||
element.addEventListener('click',(e)=>{ | ||
this.$props.onFilterTodo(e.target.id); | ||
}) | ||
}) | ||
} | ||
} | ||
|
||
export default Filter; |
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -11,9 +11,7 @@ class Input extends Component{ | |
const content = this.$target.value; | ||
onAddTodo(content); | ||
} | ||
|
||
}); | ||
|
||
} | ||
} | ||
|
||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
변수명에 "_"를 맨앞에 붙이는 것이 임시변수를 뜻하는 것이라고 봐도 된다면, temp를 앞에 쓰는 방법도 있답니다. 예를 들면 tempInput 이건 명시적이라서, 좀더 보기에 편할 수도 있을 것 같은데, 개인취향이고 컨벤션을 따라가는 부분이기에 참고만 하시면 될 것 같아요. ^^