@types/to-do-app 에러 해결 과정 (2)

@types/to-do-app 에러 해결 과정 (2)

5) Props 객체 Type 지정

• props 객체에 타입지정을 해주라고 한다.

  • todoItem은 정해진 데이터 구조가 있으니 interface를 사용해서 재사용이 가능하다.

  • 다른 개발자의 레포에서 봤던 것처럼 /models/TodoItem.ts 를 생성해 Interface를 선언했다.

    

  • ✅ 이후 아래와 같이 Todo.tsx 의 props 객체에 타입을 지정해주었다.

    function Todo({
      todoItem,
      todoList,
      setTodoList,
    }: {
      todoItem: TodoItem;
      todoList: TodoItem[];
      setTodoList: Function;
    }) {

• 인터페이스가 어떤 기능들이 있는지 아직 모르는데, 일단 예제를 따라해보았더니 문제는 해결되었다.

6) /api/todo.ts 에서의 token 에러

export const API = {
  getTodoList: async function (token: string | undefined) {
    const uri = `${baseUrl}/todos`;
    const options = {
      headers: { Authorization: `Bearer ${token}` },
    };

    const response = await request(uri, options);
    return response;
  },

  postTodo: async (token: string | undefined, bodyData = {}) => {
    const uri = `${baseUrl}/todos`;
    const options = {
      method: 'POST',
      headers: {
        Authorization: `Bearer ${token}`,
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(bodyData),
    };

    const response = await request(uri, options);
    return response;
  },

  putTodo: async (token: string | undefined, bodyData = {}) => {
    const uri = `${baseUrl}/todos/${bodyData?.id}`;
    const options = {
      method: 'PUT',
      headers: {
        Authorization: `Bearer ${token}`,
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(bodyData),
    };

    const response = await request(uri, options);
    return response;
  },

• 위 코드와 같이 string | undefined로 했더니 에러가 없어졌다.
• 그런데 갑자기 드는 생각이 … 이렇게 땜질로 하나씩 고치는게 맞는건가? 라는 생각이 들기 시작했다.
  • 의심스럽지만 이렇게라도 해보는게 의미있는 작업이 아니겠나? 라는 생각으로 계속 해본다. 일단 한 싸이클 돌린 뒤 생각해보자.

7) Error 객체 타입 에러

• v.4.4 이전에는 Error 객체의 타입이 any였으나, 현재는 unknown으로 바뀌었다고 한다.
• Error 객체 타입 에러는 여러 방법으로 해결 할 수 있으나, 우선 이 프로젝트에선 any 로 해결하기로 한다.

catch (error: any) {
    console.error('API통신 실패 :' + error.message);
  }

8) request body에 빈값이 들어 갈 수 있도록 지정했던게 에러

• body를 안 담아 보낼수도 있지 않을까? 라는 생각을 했고, 그렇다면 undefined를 날리면서 별 문제 없도록 하자! 라는 의미로 {}을 디폴트로 했었다.
• 근데 타스에선 이걸 문제 삼고 있다. id를 number이거나 undefined라고 일단은 말해둬야겠다. 근데 그러려면 id만 담으면 안되고 실제 바디에 들어올 todoItem Interface를 지정하는게 훨씬 좋아 보인다.

postTodo: async (token: string | undefined, bodyData: TodoItem) => {
    const uri = `${baseUrl}/todos`;
    const options = {
      method: 'POST',
      headers: {
        Authorization: `Bearer ${token}`,
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(bodyData),
    };

    const response = await request(uri, options);
    return response;
  },

9) index.tsx 에서 document.getElementhById(’root’)가 에러 🤣

• 이게 뭔 웃긴 상황인가? 싶은데 ㅎㅎ 어쨌든 타입을 모르시겠단다.

• ✅ 해결 방법은 2가지 인데
  • 1) `const root = ReactDOM.createRoot(document.getElementById('root')!) ;` 이런 식으로 느낌표를 사용해서 해당 값이 null이 아니라 무조건 할당 되어있다고 말해주는 방법
  • 2) `const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);` 와 같이 정확하게 HTMLElement이다. 라고 알려주는 방법이 있다.
• 2가지 중 무엇이 더 좋은지는 정확히 알 수없지만 느낌 상으론 아래 방법이 더 확실하지 않나? 라는 생각이 든다.

2번째 마치며...

타입스크립트 적용이 쉬운 일은 아닌것 같다. 특히나 에러 메세지를 이렇게 기록하려니 더 오래 걸려서 작업량이 꽤 많다...

다음 프로젝트 부터는 포스팅 없이 해야겠다... 그래도 하던 건 끝까지 해야하니까 느려도 진행해야지 😅

다행인건 내일 완성된다면 이틀만에 마이그레이션에 성공한 것이니까.. 좋게 생각해야겠다. 얼른 타스로 다른 프로젝트도 해보고싶다!