[10기 이지은] TodoList with CRUD #219

jeleedev · 2021-07-12T10:43:35Z

☕ 작업기간: 2021년 07월 05일 ~ 07월 06일

컴포넌트로 나누는 게 아직 미숙해서 이전 기수들이 한 소스를 참고해서 최대한 이해하면서 해봤습니다
TodoApp.js 가 깔끔하지 않아서 스터디 진행하면서 리팩토링 해보겠습니다

✍ 07.13 코드리뷰 참고하여 리팩토링 진행

🎯 요구사항

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

🎯🎯 심화 요구사항

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

renee13wi

1주차 과제 너무 수고많으셨습니다!

과제 PR 했다는 것 만으로도 대단합니다!!
저도 보면서 많이 배워갑니다, 앞으로 남은 과제도 열심히 함께 해봅시다!! 😄

renee13wi · 2021-07-12T11:42:56Z

src/components/TodoApp.js

+      const newTodoItem = new TodoItem(contents, ++id);
+      this.todoItems.push(newTodoItem);
+      this.setState(this.todoItems);
+      todoCount.setState(this.todoItems);
+
+      saveItems();


OnAdd에 들어가는 이벤트는 handler 함수로 따로 선언해주면 가독성에 더 좋을 것 같아요! 😄

네 안그래도 가독성이 많이 떨어져서 따로 분리했어요! 감사합니다 😀🙏

renee13wi · 2021-07-12T11:43:50Z

src/components/TodoFilter.js

+export const FilterType = Object.freeze({
+  all: 'all',
+  active: 'active',
+  completed: 'completed',
+});


저는 이 방법은 생각해보지 못했었는데, 좋은 아이디어 하나 배워갑니다~!

renee13wi · 2021-07-12T11:45:39Z

src/components/TodoFilter.js

+});
+
+export function TodoFilter({ filtering }) {
+  this.filters = document.querySelector('.filters');


document.querySelector를 컴포넌트로 선언하는 방식도 좋을 것 같아요! (https://edu.nextstep.camp/s/RZqgJhQO/ls/LWPmQkbP)

저도 이번에 처음으로 써봤는데, 유용한 것 같습니다!!

src/components/TodoApp.js

nerdyinu

잘 봤습니다! 생성자 함수를 사용하고 싶었지만 엄두가 안나서 그냥 클래스를 활용했는데 지은님은 꼼꼼하게 잘 활용하신 것 같아요!

nerdyinu · 2021-07-12T11:21:29Z

src/app.js

@@ -0,0 +1,6 @@
+import TodoApp from './components/TodoApp.js';
+
+window.addEventListener('DOMContentLoaded', () => {


DMContentloaded라는 이벤트를 활용하는 건 처음 봤네요! 혹시 그냥 html 스크립트 파일을 등록하는 것과는 무슨 차이가 있고 추가하신 이유가 있을까요?

nerdyinu · 2021-07-12T11:29:23Z

src/components/TodoApp.js

+    },
+    onDelete: (id) => {
+      this.todoItems = this.todoItems.filter((item) => {
+        return item.id !== id;


별로 중요한 부분은 아니지만 이 부분은 오히려 return을 생략하는게 가독성이 더 좋을 것 같아요!

nerdyinu · 2021-07-12T11:30:41Z

src/components/TodoApp.js

+      this.setState(this.todoItems);
+      todoCount.setState(this.todoItems);
+
+      saveItems();


setState을 할 때마다 saveItems가 반복되는데 setState에 saveItems를 포함시켜보면 어떨까요?

setState에서 로컬스토리지 영역까지 해야하면 단일책임원칙에 위배되는 것 같은 느낌이여서요.. 안그래도 저걸 어떻게 리팩토링 해야할지 고민입니다😂

nerdyinu · 2021-07-12T11:33:19Z

src/components/TodoApp.js

+      todoCount.setState(this.todoItems);
+      saveItems();
+    },
+    onEdit: (e, id) => {


onEdit과 onEditing은 함수명이 헷갈릴 수 있으니 update과 edit같은 식으로 좀 더 구분이 되게 함수명을 바꿔주는게 좋을 것 같아요!

안그래도 생각만 하고 있었는데 짚어주셔서 감사해요! 덕분에 바로 수정했습니다 👍

nerdyinu · 2021-07-12T11:36:50Z

src/components/TodoFilter.js

+  all: 'all',
+  active: 'active',
+  completed: 'completed',
+});


Object.freeze()로 일종의 상수처리를 하는 방법 배워갑니다~:thumbsup:

nerdyinu · 2021-07-12T11:40:05Z

src/components/TodoFilter.js

+  this.removeSelectedClass = () => {
+    this.filtersBtn.forEach((item) => {
+      if (item.classList.contains('selected')) {
+        item.classList.remove('selected');


이부분은 toggle('selected')를 써보시는게 어떨까요?

selected를 제거하는 부분이라 없는 경우에는 추가가 되서 toggle을 쓸 수가 없었어요 ㅎㅎㅎ

nerdyinu · 2021-07-12T11:45:51Z

src/components/TodoList.js

+  };
+
+  this.todoList.addEventListener('click', (event) => {
+    const li = event.target.parentNode.parentNode;


closest("li") 로 closest 메소드를 써보시면 어떨까요? 가장 가까운 조상 element를 찾아줍니다.

처음 알았네요🙏 한번 적용해서 수정해볼게요

nerdyinu · 2021-07-12T11:46:05Z

src/components/TodoList.js

+    if (event.target.className === 'destroy') {
+      onDelete(id);
+    }
+  });


event 안의 target property만 필요하실 때는

{target} => { const li = target.parentNode;

처럼 쓸 수도 있어요!

- LocalStorage 분리 - setStatus 통합 - 인수 타입을 메서드 -> 함수로 수정

… into main

jeleedev added 8 commits July 12, 2021 17:16

feat: app.js 추가

9d0e1be

feat: TodoInput Add 구현

b0b3d0f

feat: TodoItem 클래스 생성

1527999

feat: TodoList Delete, Completed, Editing, Edit 구현

78984e1

feat: TodoCount 구현

fe59829

feat: TodoFilter 구현

ec76522

feat: localStorage 저장, CRUD 반영

a6a8d2e

Update README.md

0e26126

renee13wi reviewed Jul 12, 2021

View reviewed changes

nerdyinu reviewed Jul 12, 2021

View reviewed changes

jeleedev added 5 commits July 13, 2021 12:03

refactor: LocalStorage 클래스로 분리

1f5766e

refactor: LocalStorage 클래스로 분리

000c601

refactor: 익명 콜백함수 -> 기명 콜백함수로 따로 분리

baf0d2e

refactor: 전반적인 코드 정리

f4b3183

- LocalStorage 분리 - setStatus 통합 - 인수 타입을 메서드 -> 함수로 수정

Merge branch 'main' of https://github.com/eazisilver/js-todo-list-step1…

578712f

… into main

		@@ -0,0 +1,6 @@
		import TodoApp from './components/TodoApp.js';

		window.addEventListener('DOMContentLoaded', () => {

[10기 이지은] TodoList with CRUD #219

Are you sure you want to change the base?

[10기 이지은] TodoList with CRUD #219

Uh oh!

Conversation

jeleedev commented Jul 12, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🎯 요구사항

🎯🎯 심화 요구사항

Uh oh!

renee13wi left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

nerdyinu left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

nerdyinu Jul 12, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

nerdyinu Jul 12, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

nerdyinu Jul 12, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

jeleedev commented Jul 12, 2021 •

edited

Loading

nerdyinu Jul 12, 2021 •

edited

Loading

nerdyinu Jul 12, 2021 •

edited

Loading

nerdyinu Jul 12, 2021 •

edited

Loading