[☕️블랙커피Lv1] TodoList 작성기

지금껏 html에 직접 Web 화면을 구성했다면 이제 그만~~

DOM 에 직접 구현하는 방식의 한계

- DOM에 접근하고 업데이트하는 시점에 명확한 기준점이 없기 때문에 UI 가 많아질수록 DOM 업데이트 구간 추적이 어려워진다.

- DOM 에 뿌려줄 data가 변경될 때마다 일일히 찾아서 조작해야 한다.

- 중복 코드가 많아지고 DOM 접근이 많아진다.

따라서 Data를 관리하는 component와 Data를 뿌려줄 component를 분리시킬 필요가 있다.

그렇다면 기존 DOM에 직접 접근하는 방식의 코드를 보다 컴포넌트 형태로 추상화해보자!

📌 컴포넌트 형태로 변경

기존 코드

<html lang="kr">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Tami - TODOS</title>
    <link rel="stylesheet" href="./src/css/style.css" />
    <script src="./index.js" type="module"></script>
  </head>
  <body>
    <div class="todoapp">
      <h1>TODOS</h1>
      <input
        id="new-todo-title"
        class="new-todo"
        placeholder="할일을 추가해주세요"
        autofocus
      />
      <main class="App">
        <input class="toggle-all" type="checkbox" />
        <ul id="todo-list" class="todo-list"></ul>
        <div class="count-container">
          <span class="todo-count">총 <strong>0</strong> 개</span>
          <ul class="filters">
            <li>
              <a class="all selected" href="#">전체보기</a>
            </li>
            <li>
              <a class="active" href="#active">해야할 일</a>
            </li>
            <li>
              <a class="completed" href="#completed">완료한 일</a>
            </li>
          </ul>
        </div>
      </main>
    </div>
  </body>
</html>

위와 같인 index.html 은 index.js 스크립트만 쏙 걸어두고 깔끔하게 사라졌다!

index.js에서는 App을 부르고

App에서는 다양한 component를 부르며 data를 관리하는 역할을 할것이다

TodoList component와 같은 것들이 data를 뿌려주는 역할만 할 예정

index.html

<head>
	//중략
    
    <script src="./index.js" type="module"></script>
  </head>
  <body>
    <div class="todoapp">
      <h1>TODOS</h1>
    </div>
  
  </body>
</html>

index.js

import TodoApp from './src/js/TodoApp.js';
new TodoApp(document.querySelector('.todoapp'));

TodoApp

import TodoList from './TodoList.js';

//기본적인 초기 상태 (state)를 가지고 있음
export default function TodoApp($app) {
  this.state = {
    todoes: ['hi', 'hello'],
  };

//상태가 변경되면 변경된 state를 nextState로 넘겨줌
  this.setState = (nextState) => {
    this.state = nextState;
    todoList.setState(this.state.todoes);
  };
  
  //TodoList 실행
  const todoList = new TodoList({
    $app,
    initialState: this.state.todoes,
  });
  
  //초기 실행
  const init = () => {
    this.setState({
      ...this.state,
    });
  };
  init();
}

TodoList

export default function TodoList({ $app, initialState }) {
  //$app 에 받은 상태(inisialState)로 렌더링 할 예정
  this.state = initialState;
  
  //렌더링할 DOM 생성
  this.$target = document.createElement('ul');
  this.$target.className = 'todo-list';
  $app.appendChild(this.$target);
  
  //state를 받아서 현재 component의 state를 변경하고 다시 렌더링하는 함수
  this.setState = (nextState) => {
    this.state = nextState;
    this.render();
  };
  
  //현재 상태를 기준으로 렌더링 (todoes의 배열을 map으로 li생성)
  this.render = () => {
    const todoTemplate = `${this.state
      .map((todo, idx) => `<li data-index="${idx}">${todo}</div>`)
      .join('')}`;
    this.$target.innerHTML = todoTemplate;
  };
}

📌 체크한 todo 처리하기

this.setState = (nextState) => {
    this.state = nextState;
    this.render();
  };
  this.toggleTodo = (e) => {
    const todoes = this.state;
  };
  this.render = () => {
    const todoTemplate = `${this.state
      .map(
        (todo, idx) =>
          `<li >
          <div class="view">
            <input class="toggle" type="checkbox" />
            <label class="label">${todo}</label>
            <button class="destroy"></button>
          </div>
          <input class="edit " value=${todo}/>
        </li>`
      )
      .join('')}`;
    this.$target.innerHTML = todoTemplate;
  };

addEventListner를 하기 위해선 현재 <input class 'toggle' ~ /> 을 변수로 잡아서 해야 하지만,

함수 선언 당시에 아직 체크박스가 렌더되지 않아서 어떻게 해야 할지 고민했다.

--> 코드리뷰 후 다른 팀원들과 얘기해보고 다른 방향으로 변경하기로 했다.

1. 체크박스 클릭 시 클릭한 todoli의 id 전달

2. 렌더링 시 해당 id인 경우엔 class 속성 추가해 css 다르게 적용

아래 그림을 보면

e.target.className

e.target

e.target.dataset

차례로 이것들을 찍어 보았는데

todo list 렌더링 시 data-node-id 라는 값으로 idx를 제공했기 때문에

dataset을 통해 해당 값을 가져올 수 있는 것이다

📌 HTML 의 :before 과 :after 선택자

HTML DOM 객체의 내부에 추가적인 콘텐츠를 추가할 때 사용한다.

:before 선택자

DOM 객체 내부의 가장 앞쪽에 추가

:after 선택자

DOM 객체 내부의 가장 뒷쪽에 추가

.todo-list li .destroy:after {
  content: '×';
}

따라서 이렇게 하면 todo-list의 li 내부 가장 뒷쪽에 항상 'X'를 추가할 수 있다.

이러헥 추가한 콘텐츠에는 독자적인 스타일 속성 지정이 가능한데,

기본적으로는 부모 DOM 의 속성을 상속받지만, 내부적으로 지정한 속성이 우선 적용된다.

:before과 :after 로 생성된 콘텐츠는 default 가 inline속성이므로 해당 li와 같은 줄에 있게 하고 싶으면 inline-block 이나 block으로 지정해주면 된다.

📌 삽질 모음

1) 클릭한 nodeId 의 dataset은 str이다

const deleteTodo = (idx) => {
    const todos = this.state.todoes;
    const newTodos = todos.filter((todo) => {
      console.log('eddddd', idx, todo.idx);
      return todo.idx !== idx;
    });
    console.log(idx);
    console.log('todos', todos);
    console.log('newTodos', newTodos);
    this.setState({
      todoes: newTodos,
    });
  };

이렇게 인덱스를 비교해서 삭제하려는데 아무리 filter를 해도 안되는 것이다? 이것때문에 오랜시간을 삽질했지면 결론은 두개의 type이 달라서였다.....

 const $node = e.target;
    const $viewnode = e.target.closest('.view');
    const { nodeId } = $viewnode.dataset;

    if ($node.className == 'destroy') {
      this.deleteTodoItem(nodeId);

이런식으로 nodeId를 dataset으로 넣어주고 있었는데, 이렇게 넣으면 nodeId의 타입이 string이라는 점이다!!!!!

이토록 간단한 작업을!!!!! 웃긴건 TodoList add할때도 이 문제때문에 parseInt 해놨는데 나중을 생각 안하고 지엽적인 부분에 해놓았더니 또 똑같은 문제에 걸렸던 것이다. 앞으로 코드를 구현할 때 이런 부분은 주의해야 겠다.

2) template literal 시 속성은 str으로!

초기 코드

     <li  class="${todo.state === 'completed' ? 'completed' : ''} ${
            todo.state === 'editing' ? 'editing' : ''
          }">
          <div class="view" data-node-id=${todo.idx} >
            <input class="toggle" type="checkbox" />
            <label class="label">${todo.content}</label>
            <button class="destroy"></button>
          </div>
          <input class="edit" value=${todo.content}/>
        </li>

input 과 lebel 에 동일하게 todo.content 를 넣어줫는데

input 의 value엔 자꾸만 띄어쓰기가 제외되는것이다?

문제는 바로 input의 vlaue를 str으로 넘겨주지 않은 것!

<input class="edit" value="${todo.content}"/>

해당부분을 이렇게 문자열로 바꿔주면서 정상 작동.

정말 사소한 실수였는데 오류가 발생해서 더 못찾았다...

📌 Refactoring

스피드한 구현을 하다보니 component마다 함수를 불러오는 위치가 달라서 정리가 필요했다.

기본적인 틀을 보면 TodoApp에서 onToggle이라는 함수를 다 구현하고 TodoList에서는 해당 함수를 인수로 받아서 사용하는 구조인데데

노드의 이벤트( $node addEventListener ) 가 한눈에 보이게하기 위해 따로 함수로 ( this.toggleTodoItem) 분리했지만

노드의 이벤트 안에서 로직을 다처리해 버려서 분리한 함수는 의미가 없어졌다.

아래처럼 클릭 이벤트가 하나면 상관 없지만

클릭한 노드에 따라서

이전 코드

//노드의 이벤트
$nodeTodoList.addEventListener('click', (e) => {

    const $node = e.target;
    
    if ($node.className === 'toggle') {
      const { nodeId } = $node.closest('.view').parentNode.dataset;
      this.toggleTodoItem(parseInt(nodeId));
    } 
    //중략



//따로 분리한 함수
this.toggleTodoItem = (nodeId) => {

    onToggle(parseInt(nodeId));
  };

아래와 같이 클릭 이벤트가 많아지면 복잡해진다.

 $nodeTodoList.addEventListener('click', (e) => {
    const $node = e.target;
    
    // 체크박스 클릭 시
    if ($node.className === 'toggle') {
    
    }
    // 삭제 클릭 시
    if ($node.className === 'destroy') {

    }
    // 편집 클릭 시
    if ($node.className === 'edit') {

    }
  });

개선 코드!

// 노드의 이벤트
$nodeTodoList.addEventListener('click', (e) => {
    const $node = e.target;

    if ($node.className === 'toggle') {
      this.toggleTodoItem($node);
    }
    if ($node.className === 'destroy') {
      this.deleteTodoItem($node);
    }

    if ($node.className === 'edit') {
      this.editTodoItem($node);
    }
  });


// 따로 분리한 함수
this.toggleTodoItem = ($node) => {
    const { nodeId } = $node.closest('.view').parentNode.dataset;
    onToggle(parseInt(nodeId));
  };

  this.deleteTodoItem = ($node) => {
    const { nodeId } = $node.closest('.view').parentNode.dataset;
    onDelete(parseInt(nodeId));
  };

  this.editTodoItem = ($node) => {
    if ($node.className === 'edit') {
      const { nodeId } = $node.parentNode.dataset;
      $node.addEventListener('keydown', (e) => {
        //Enter key 입력
        if (e.keyCode === 13) {
          onEdit(parseInt(nodeId), true, $node.value);
        } //esc key 입력
        else if (e.keyCode === 27) {
          onEdit(parseInt(nodeId), false, '');
        }
      });
    } else {
      const { nodeId } = $node.closest('.view').parentNode.dataset;
      if ($node.className === 'label') {
        onEdit(parseInt(nodeId), false, '');
      }
    }
  };

이렇게 분리함으로써 클릭 이벤트가 일어났을 땐 어떤 함수들이 쓰이는지 한눈에 보이게 변경할 수 있었다.

📌 filter 를 구현하기 위한 상태관리 공사

처음 filter를 구현할 땐 다음과 같은 로직으로 생각했다.

1) 각 버튼을 눌렀을 때 todo 데이터 maping

2) todo data 교체

그러다 필터링 한 data와 원본 data를 한 곳에서 관리할 수 없었다.

원본 data가 필터링 되면서 기존 data가 날라가는 대불상사가 일어나고..

이 투두리스트는 한번 완료안한 일이 뭔지 확인하면 완료한 일이 영영 사라져 못보게 되는 휘발성 todolist가 되버린다.^^

처음 코드 (휘발성)

const filterTodo = (filterType) => {
    const todos = this.state.todoes;
    const tempTodos = todos.slice();
    
    //전체보기
    if (filterType === 'all selected') {
      this.setState({ todoes: todos });
      
    } 
    
    // 완료한 일
    else if (filterType === 'completed') {
      const completedTodos = tempTodos.filter(
        (todo) => todo.state === 'completed'
      );
      this.setState({
        todoes: completedTodos,
      });
    } 
    
    //해야할 일
    else if (filterType === 'active') {
      const decompletedTodos = tempTodos.filter(
        (todo) => todo.state !== 'completed'
      );
      this.setState({
        todoes: decompletedTodos,
      });
    }
  };

이렇게 세가지 일들이 벌어질 때의 상태를 한 곳에서 보관한 결과

한번 필터링을 하면 원본 데이터는 사라진다..^^

따라서 나는 isFilter와 같은 flag 존재를 만들어서

isFilter === true 이면 필터링 된 결과를 렌더링

isFilter === false 라면 원본 데이터를 렌더링

하도록 변경하기로 결심했다.

📌 개선을 위한 노력

1) 메세지 및 class data const 로 분리

export const FILTER_TYPES = {
  ALL: 'FILTER_TYPES.ALL',
  COMPLETE: 'completed',
  ACTIVE: 'active',
};

export const TODO_ITEM_CLASS = {
  TOGGLE: 'toggle',
  DESTROY: 'destroy',
  EDIT: 'edit',
  LABEL: 'label',
  VIEW: 'view',
};

export const TODO_FILTER_MENU = {
  ALL_MENU: '전체보기',
  ACTIVE_MENU: '해야할 일',
  COMPLETE_MENU: '완료한 일',
};

기존 코드

  $nodeTodoList.addEventListener('click', (e) => {
    const $node = e.target;

    if ($node.className === 'toggle') {
      this.toggleTodoItem($node);
    }
    if ($node.className === 'destroy') {
      this.deleteTodoItem($node);
    }

    if ($node.className === 'edit') {
      this.editTodoItem($node);
    }
  });

변경 코드

  $nodeTodoList.addEventListener('click', (e) => {
    const $node = e.target;

    if ($node.className === TODO_ITEM_CLASS.TOGGLE) {
      this.toggleTodoItem($node);
    }
    if ($node.className === TODO_ITEM_CLASS.DESTROY) {
      this.deleteTodoItem($node);
    }

    if ($node.className === TODO_ITEM_CLASS.EDIT) {
      this.editTodoItem($node);
    }
  });

메세지와 class 데이터는 const에서 한번에 관리하여 변경이 일어날 시 동시에 변경될 수 있도록 유지보수가 쉽게 변경했다.

📌 localStorage 적용해보기

처음 localStorage를 도입했을 때, TodoApp이 생성되기 전에 localStorage를 불러와서 에러가 발생했다.

TodoApp

export default function TodoApp($app) {
  // localStorage.clear();

  const initialDtate = {
    todoes: [
      {
        idx: 0,
        content: 'hiEvery One',
        state: '',
      },
      {
        idx: 1,
        content: 'Im Tami',
        state: '',
      },
    ],
    todoesFiltered: [],
    filterState: FILTER_TYPES.ALL,
    todoesCount: '0',
  };
  const localData = JSON.parse(localStorage.getItem('state'));
  const viewData = localData ? localData : initialDtate;
  this.state = viewData;

이렇게 TodoApp내부에서 localStorage를 처음 가져옴으로써 해결했다.

localStorage 성공!!

local의 this.state로만 관리하던 데이터는 새로고침 후엔 사라졌지만

localStorage로 관리함으로써 새로고침해도사라지지 않게 데이터 관리가 가능해졌다.!!

'🍿 Project' 카테고리의 다른 글

FE 프로젝트 시 선택하는 기술스택들 - yarn, emotion, materail UI... (0)	2021.12.19
[SidePJ] Issue-Cracker 4부 - v0.1.0🍪 데굴데굴 굴러가는 이슈크래커 (0)	2021.07.10
[SidePJ] 깃허브 Issue Cracker 3부 - Recoil 상태관리의 시작 (0)	2021.07.09
[SidePJ] 깃허브 Issue Cracker 2부 - Material UI 와 style-components의 대결 + 오류 해결 (0)	2021.06.29
[SidePJ] 깃허브 Issue Cracker 1부 - 프로젝트 시작 (0)	2021.06.29

[☕️블랙커피Lv1] TodoList 작성기

따라서 Data를 관리하는 component와 Data를 뿌려줄 component를 분리시킬 필요가 있다.

📌 컴포넌트 형태로 변경

📌 체크한 todo 처리하기

📌 HTML 의 :before 과 :after 선택자

📌 삽질 모음

1) 클릭한 nodeId 의 dataset은 str이다

2) template literal 시 속성은 str으로!

📌 Refactoring

📌 filter 를 구현하기 위한 상태관리 공사

📌 개선을 위한 노력

1) 메세지 및 class data const 로 분리

📌 localStorage 적용해보기

localStorage 성공!!

'🍿 Project' 카테고리의 다른 글

댓글

티스토리툴바

[☕️블랙커피Lv1] TodoList 작성기

따라서 Data를 관리하는 component와 Data를 뿌려줄 component를 분리시킬 필요가 있다.

📌 컴포넌트 형태로 변경

📌 체크한 todo 처리하기

📌 HTML 의 :before 과 :after 선택자

📌 삽질 모음

1) 클릭한 nodeId 의 dataset은 str이다

2) template literal 시 속성은 str으로!

📌 Refactoring

📌 filter 를 구현하기 위한 상태관리 공사

📌 개선을 위한 노력

1) 메세지 및 class data const 로 분리

📌 localStorage 적용해보기

localStorage 성공!!

'🍿 Project' 카테고리의 다른 글

관련글

댓글

티스토리툴바