타입스크립트로 todolist 만들기

1. 프로젝트 생성

나는 yarn을 사용하므로

yarn create react-app my-app --template typescript
cd my-app
yarn start

폴더 구조

2. todolist 만들기

강의에서 실습했던 것들을 참고해서 만들어봐야겠다

App.tsx 파일에 만들면 된다.

 

있어야 할 기능

- 할 일 추가 submit

- 할 일 삭제 remove

- 할 일 수정 correct 

- 할 일 변경 change

 

*****

이런 오류가 뜨길래 뭘까,, 하고 어떻게 해도 고쳐지지 않아서 그냥 프로젝트를 다시 생성해서 코드를 붙여넣었는데 제대로 yarn start가 되었다.

"scripts": {
    "start": "tsc && node ./dist/index.js",
    "build": "tsc --build",
    "clean": "tsc --build --clean"
  },

아마 이걸 해서 그런 것 같다.

이걸 안했더니 오류가 안뜬다.

잊지 말자!!!!!!!

내가 전에 만든 리액트 투두리스트와 실습들을 참고해서 짜집기한 코드

 

실패작 1. 

취소를 눌렀을 때 완료로 바뀌지 않고 내용이 안뜬다.

그래서 여기서 바꾼 것은

1) "content"라고 따옴표가 있던 것들을 그냥 content 라고 넣었더니 내가 넣은 제목과 내용이 나왔다.

2) 취소버튼과 완료 버튼을 따로 생성했다. 둘 다 changeTodos함수로 관리하려니 전혀 관리가 안된다.

실패작 2. 제목을 뭐라고 쓰던 모두 New Todo Title과 New Todo Content라고 뜬다.

 

그리고 오류를 하나씩 고쳐갔다.

오류 1. 추가를 클릭했을 때 제목과 내용이 안뜨는 것 (enter키를 눌렀을 때만 뜬다.)

(e.key === "Enter" || e.currentTarget.nodeName === "BUTTON"

오류2. 인풋창 글씨가 추가한 후에 사라지지 않는다.

setTitle("");
    setContent("");

오류3. 완료누르면 done영역으로 가야하고 , 취소 누르면 working영역으로 가야한다.

<h2>Working...</h2>
      {todos
        .filter((todo) => !todo.isDone)
        .map((todo) => (
          <div key={todo.id}>
            <>
              <h3>{todo.id}</h3>
              <h4>{todo.title}</h4>
              <h5>{todo.content}</h5>

              <button onClick={() => handleRemoveTodo(todo.id)}>삭제</button>
              <button onClick={() => handleDoneTodo(todo.id)}>완료</button>
            </>
          </div>
        ))}
      <h2>Done</h2>
      {todos
        .filter((todo) => todo.isDone)
        .map((todo) => (
          <div key={todo.id}>
            <>
              <h3>{todo.id}</h3>
              <h4>{todo.title}</h4>
              <h5>{todo.content}</h5>

              <button onClick={() => handleRemoveTodo(todo.id)}>삭제</button>
              <button onClick={() => handleCancelTodo(todo.id)}>취소</button>
            </>
          </div>

이런식으로 바꿔줬다. working영역과 done영역을 나눠서 썼더니 됐다.

- 유효성 검사

제목과 내용 중에 한 칸이라도 작성하지 않으면 추가가 안되게 하고 싶다.

function handleAddTodo(
    id: number,
    title: string,
    content: string,
    isDone: boolean
  ): void {
    if (title.trim() === "" || content.trim() === "") {
      alert("제목과 내용을 모두 작성해주세요.");
      return;
    }
    const newTodo: Todo = { id, title, content, isDone };
    setTodos((prev) => [...prev, newTodo]);
    setTitle("");
    setContent("");
  }

공란이면 alert창이 뜬다

 

-스타일 컴포넌트까지 적용한 결과물