오류

1. styled-component 타입 오류

props를 styled-component에 넘겨 줄 때 타입을 선언해주지 않아서 오류가 났다.

• 원래 코드

export const Text = styled.div`
  flex: 1;
  font-size: 21px;
  color: #495057;
  ${({ done }) =>
    done &&
    css`
      color: #ced4da;
    `}
`;

• 고친 코드

export const Text = styled.div<{ done: boolean }>`
  flex: 1;
  font-size: 21px;
  color: #495057;
  ${({ done }) =>
    done &&
    css`
      color: #ced4da;
    `}
`;

자세한 내용은 이 글에 정리했다.

2. 타입 오류

localStorage를 사용해서 to do list를 관리했는데 string 형식으로 저장되어 있는 localStorage의 값을 JSON으로 변환하는 과정에서 JavaScript에서는 잘 됐지만 TypeScript를 사용하니 오류가 났다.

• 오류 내용

  'string | null' 형식의 인수는 'string' 형식의 매개 변수에 할당될 수 없습니다.
  'null' 형식은 'string' 형식에 할당할 수 없습니다.

• 원래 코드

const myStorage = localStorage.getItem("todoList");
const initialTodos = JSON.parse(myStorage);

• 고친 코드

const myStorage = localStorage.getItem("todoList");
const initialTodos = JSON.parse(myStorage || "[]");

3. to do list의 id 값 오류

id 값이 내 맘대로 늘어나질 않는 오류가 있었다.

• 오류 내용
  아이디 값이 아래와 같이 저장됐다.
  
• 원래 코드

const maxId = initialTodos
    ? initialTodos.map((todo: { id: number }) => {
        const num = [];
        num.push(todo.id);
        return Math.max(...num);
      })
    : 1;
const nextId = useRef(maxId);

• 고친 코드

 const num: number[] = [];
  initialTodos &&
    initialTodos.map((todo: { id: number }) => {
      num.push(todo.id);
    });
  const maxId = num.length ? Math.max(...num) : 0;
  const nextId = useRef(maxId + 1);

개선, 추가 할 사항

1. 상태 관리 라이브러리 사용해보기(완)

• Redux, recoil을 사용해보자.

2. 할 일 편집, 모두 완료 기능 추가

깃허브