Skip to content
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

[나무] TodoList CRUD #23

Merged
merged 14 commits into from
Sep 1, 2020
Merged

Conversation

wooooooood
Copy link
Collaborator

@wooooooood wooooooood commented Aug 13, 2020

1주차 - TodoList CRUD

🎯 요구사항

  • todo list에 todoItem을 키보드로 입력하여 추가하기
  • todo list의 체크박스를 클릭하여 complete 상태로 변경. (li tag 에 completed class 추가)
  • todo list의 x버튼을 이용해서 해당 엘리먼트를 삭제
  • todo list를 더블클릭했을 때 input 모드로 변경. (li tag 에 editing class 추가) 단 이때 수정을 완료하지 않은 상태에서 esc키를 누르면 수정되지 않은 채로 다시 view 모드로 복귀
  • todo list의 item갯수를 count한 갯수를 리스트의 하단에 보여주기
  • todo list의 상태값을 확인하여, 해야할 일과, 완료한 일을 클릭하면 해당 상태의 아이템만 보여주기

🎯🎯 심화 요구사항

  • localStorage에 데이터를 저장하여, TodoItem의 CRUD를 반영하기. 따라서 새로고침하여도 저장된 데이터를 확인할 수 있어야 함

✨ 그냥 해보고싶어서 해본것

  • ESLint 적용
  • import&export 모듈화 적용

🐞버그

  • 다른 아이템을 삭제하면 completed된 아이템의 체크박스가 해제됨

느낀점

  • 1기때 구현한 내용에서 많은 진행이 되지 않아서 아쉽습니다 ㅠ
  • 버그 수정을 위해 다른 분들의 코드를 읽어봤지만 그냥 읽기만 해서는 이해되지 않는 부분이 많았던 것 같습니다..
    더 효과적으로 참고하기 위해 돌려보면서 동작을 확인하는 방식으로 해보려 합니다!

js/TodoList.js Outdated
@@ -58,7 +60,7 @@ function TodoList($todoList, data, removeItem){
this.render = () => {
let result = ''
this.data.map(({ text }, index) => {
result += `<li class="todo-item" data-index="${index}">
result += `<li class="todo-item ${data[index].isCompleted == true? 'completed' : ''}" data-index="${index}">
<div class="view">
<input class="toggle" type="checkbox" />
Copy link
Collaborator

Choose a reason for hiding this comment

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

63번째줄에서 isCompleted 체크한 것처럼 토글에서도 적용하면 삭제시 체크박스 해제를 방지할 수 있을 것 같습니다. 🐸
<input class="toggle" type="checkbox" ${data[index].isCompleted ? 'checked' : ''} />

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

악 감사합니다 ㅠㅠㅠㅠ 이걸 몰랐다니!! 바로 적용하겠씁니다 🥳

@eastjun-dev eastjun-dev merged commit 776876c into next-step:wooooooood Sep 1, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants