Skip to content
Open
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 18 additions & 10 deletions src/app.js
Original file line number Diff line number Diff line change
Expand Up @@ -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');

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

변수명에 "_"를 맨앞에 붙이는 것이 임시변수를 뜻하는 것이라고 봐도 된다면, temp를 앞에 쓰는 방법도 있답니다. 예를 들면 tempInput 이건 명시적이라서, 좀더 보기에 편할 수도 있을 것 같은데, 개인취향이고 컨벤션을 따라가는 부분이기에 참고만 하시면 될 것 같아요. ^^

const _TodoList = document.querySelector('#todo-list');
const _Filter = document.querySelector('#todo-filter');
Expand All @@ -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}];

Choose a reason for hiding this comment

The 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}));

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

자주쓰는 변수는 constant로 사용하는 것도 좋을 것 같아요

const TODO = "todo"

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

혹시 id에 1을 곱하는 이유를 알 수 있을까요?

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}))
Expand All @@ -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);

Choose a reason for hiding this comment

The 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")));
}
}


Expand Down
28 changes: 23 additions & 5 deletions src/components/Filter.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,25 +2,43 @@ import Component from "../core/component.js";

class Filter extends Component{
setup(){

this.$state = this.$props.$state;
}

template(){

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

혹시, 전체를 템플릿으로 한 부분이 궁금해요. ^^
저렇게 하면, 데이터를 변하는 부분과 고정된 부분을 구별해서 가져오는 것이 쉽지 않을 것 같아서요.
제가 FE를 사용을 잘 몰라서 하는 이야기일 수도 있어요. 그냥 참고만 하셔도 됩니다.

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>

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  1. 이런 코드는 인라인보다는 따로 분리해서 작성하는게 보기 더 좋을 것 같아요!
const type = (mode) => {
  return mode === 0 ? "selected" : ""
}

이런식으로 뺀 다음에 해당 코드에서는 ${type(mode)} 이런식으로 작성해도 좋지 않을까요?

  1. == 동등연산자보다는 === 일치연산자를 사용하시는게 오류 발생시 유지보수 측면에서 좋을 것 같습니다.

</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;
2 changes: 0 additions & 2 deletions src/components/Input.js
Original file line number Diff line number Diff line change
Expand Up @@ -11,9 +11,7 @@ class Input extends Component{
const content = this.$target.value;
onAddTodo(content);
}

});

}
}

Expand Down
12 changes: 11 additions & 1 deletion src/components/TodoList.js
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ class TodoList extends Component{
<li data-id="${item.id}" class=${item.activate?"completed":"notcompleted"}>
<div class="view">
<input class="toggle" id=${item.id} type="checkbox" ${item.activate?"checked":""}/>
<label class="label">${item.content}</label>
<label id=${item.id} class="label">${item.content}</label>
<button id=${item.id} class="destroy"></button>
</div>
<input class="edit" value="${item.content}" />
Expand All @@ -37,6 +37,16 @@ class TodoList extends Component{
this.$props.onToggleTodo(e.target.id);
})
});

// const editBtn = document.querySelectorAll('.label');
// editBtn.forEach(element =>{
// element.addEventListener('dbclick',(e)=>{
// // document.querySelectorAll('li').map(item =>{

// // })
// })
// });

}
}

Expand Down