🧑‍💻 바닐라 JS로 투두리스트 만들기

---

삼주 전에 팀원들의 피드백을 코드에 다 반영하고 리팩토링도 다 하였다. 물론, 리팩토링을 했음에도 불구하고 멘토님이 강조하셨던 컴포넌트/함수의역할에 따라 구분 짓는 건 부족하다. 왜냐면 아직도 머리로만 알기 때문!

내가 주로 받은 피드백은 다음과 같다.

피드백

(1) 코드리뷰

1. 반복되는 코드는 추상화하여 함수로 빼주기.
2. 모듈, 번들링에 대해 공부해보기.
3. 이벤트 위임을 사용해보기.
4. 이벤트 핸들러의 네이밍 컨벤션 알아보기.
5. 함수명에 걸맞는 동작을 작성하기

(2) 알게된 것

1. 에러 처리는 어떻게 해야 할까?

• 과제에서, new 키워드를 생성하지 않고 컴포넌트를 생성하면 오류가 나도록 검증 코드를 작성하라고 요구하였다. 이때, Error()생성자를 활용하여 에러 처리를 할 수도 있고, 자체적으로 new 키워드를 붙인 컴포넌트를 생성하도록 하는 방법도 있다.
• 상황에 따라 다르지만, 다른 팀의 코드 리뷰를 보면서 에러 처리라는 것은 어딘가에서 에러가 발생했음을 알리는 역할이기 때문에 Error() 생성자를 활용하여 의도와 다르게 동작하고 있음을 표시해줘야 함.

2. 컴포넌트를 쪼갤 때에는 어떻게 해야할까?

• 컴포넌트가 하는 역할과 행동을 생각하는 게 중요하다. 코드 작성 전에 구조도를 그려 보는 게 장기적으로 시간 단축과 효율에 도움이 된다.

셀프 코드 리뷰

• 각 컴포넌트의 상태가 바뀔 때마다 같은 로직이 반복되었었다. 바로 아래와 같은 코드인데,

	todoList.setState(state);
    setItem("todos", state);
    todoCount.setState();

같은 로직이 반복되므로 App 자체에서 this.setState함수를 정의해주는 게 좋을 것 같다. 3주 전 리팩토링을 할 때에는, 함수로 추상화를 하라는 건가 싶어서...

 const updateState = (state) => {
    todoList.setState(state);
    setItem("todos", state);
    todoCount.setState();
  };

요로케 써줬고, 지금에 와서 배운 것들을 생각해보면

this.setState=(nextState)=>{
  todoList.setState(nextState);
  setItem("todos", nextState);
  todoCount.setState();

라고 써주는 게 맞을 것 같다...!

• TodoCount 컴포넌트가 다른 컴포넌트와 너무 다르게 생겼다. 따라서 initialState를 App에서 전달 받고, setState에서 전달 받은 데이터들에 따라 완료된 할일과 전체 할일을 계산하고 반환하는 동작이 필요할 것 같다.

Simple TodoList App 과제를 마치며

• index.html에서 head 를 작성하는 법을 알게 되었다!
• new를 붙이지 않고 컴포넌트를 생성하면 this가 가리키는 것이 달라지는 것을 알게 되었다!
• 에러 처리의 목적에 대해 조금이나마 이해하게 되었다!
• App에서는 컴포넌트의 변화를 감지하고 그에 따라 상태를 업데이트 하며, 그 결과를 각 컴포넌트에 전달하는 역할을 한다고 생각하게 되었다! (아니면 말해주세요)
• 코드를 작성하기 전에, 컴포넌트의 역할을 충분히 생각해보고 해당 컴포넌트에 필요한 정보들만 신경쓸 수 있도록 독립적으로 만들어야 한다!
• 코딩테스트에서만 써봤던 고차함수를 데이터를 알맞게 정제하는 데에도 쓸 수 있게 되었다!
• 자바스크립트로 html 태그들을 생성하고 속성을 부여하는 방법에 대해서 알게 되었다!