콘솔에 찍어보는 초간단 Todo 리스트 프로젝트

<aside> ☝ 목차

</aside>

1. todo 리스트를 담을 todos 배열 생성

let todos = [];

2. addTodo 함수 생성

기본 로직

1. addTodo의 파라미터로는 content를 받을 것
2. todo 객체를 생성
3. id는 배열의 길이 + 1로 설정
4. content의 내용은 인자의 content가 됨
5. completed는 기본적으로 false로 설정
6. todos 배열에 만든 todo 객체를 push
7. 콘솔에 보여주기 위해서 displayTodos() 함수 호출 (아직 만들지 않았음)

function addTodo(content) {
  const todo = {
    id: todos.length + 1,
    content: content,
    completed: false,
  };
  todos.push(todo);
  displayTodos();
}

3. displayTodos 함수 생성

기본 로직

1. 콘솔에 계속 출력을 해볼테니 먼저 ‘현재 todos ‘ 라는 내용을 출력
2. todos 배열에 forEach를 활용해서 콘솔에 아래와 같은 양식으로 출력 1: content - ✅ 2: content - ❌

function displayTodos() {
  console.log('현재 todos ');
  todos.forEach((todo) =>
    console.log(`${todo.id}: ${todo.content} - ${todo.completed ? '✅' : '❌'}`)
  );
}

displayTodos를 구현 했으니 addTodo를 활용해서 아래 내용을 추가해보면

addTodo('자바스크립트 공부');
addTodo('리액트 공부');
addTodo('HTML/CSS 공부');

콘솔에 출력되는 모습은 아래와 같다

현재 todos 1: 자바스크립트 공부 - ❌ 2: 리액트 공부 - ❌ 3: HTML/CSS 공부 - ❌

4. deleteTodo 함수 생성

기본 로직

1. 우리는 배열의 filter를 활용할 것
2. 삭제하고자 하는 Todo를 유일하게 식별할 수 있는 것은 id임
3. deleteTodo 함수에 id를 인자로 받아서 제거하고자 하는 id를 제외한 새로운 배열을 생성
4. 현재 todos 리스트를 새로운 배열로 재할당
5. displaytodos함수를 호출

function deleteTodo(id) {
  todos = todos.filter((todo) => todo.id !== id);
  displayTodos();
}