TodoList 수정사항 체크하기

기본적인 TodoList의 CRUD기능을 모두 구현하고 다시 코드를 확인해보고 기능 동작을 확인해보며 버그는 없는지, 내가 실수한 것은 없는지 돌아봤다.

Todo데이터를 받아오고 세부사항을 보여주고 수정, 삭제를 하는 기능은 모두 headers Authorization에서 로그인 또는 회원 가입하면서 발급된 token으로 인증이 필요하다.

근데 로컬 스토리지에서 token을 삭제해서 token이 없는데도 상세보기, 수정하기, 삭제하기가 모두 가능했다. 왜 그런지 이해가 안 간다.

일단 코드를 추가해서 token이 없으면 todo를 받아오지 않도록 했다.

// 수정 전
  useEffect(() => {
    getTodo();
  }, []);

// 수정 후
  useEffect(() => {
    token && getTodo();
  }, []);

코드를 추가하기 전에는 token을 지워도 기능들이 동작했고 새로고침을 해도 마찬가지였다. 저렇게 코드를 추가해주니까 새로고침을 하면 token이 없어서 기능이 안 되긴 하더라. 근데 진짜 왜 이런 거지?
일단 수정사항을 모두 체크해보고 하나하나 수정하고 리팩토링해보자

+ 9/27 추가
token 검증을 useEffect안에서 할게 아니라 axios 리퀘스트 로직 자체에서 처리해줘야 할 것 같은데...🤔

+ 9/28 추가
생각해보니... token을 컴포넌트 안에서 localStorage.getItem('token')이렇게 받아오고 있는데, 내가 임의로 개발자도구 Application에 들어가서 토큰을 지우더라도 리액트 자체는 다시 렌더링이 안된 상태고 여전히 토큰을 가지고 있겠지. 그래서 오류없이 동작하는 게 맞는 것 같다. 음 그래서 토큰을 로컬스토리지에 저장하지 않는 것인가?!! 이건 간단한 앱이라서 로컬스토리지를 사용한 것이고, 실 서비스에서는 당연히 로컬에 저장안하겠지?

💁🏻‍♀️기본 구현 요구사항

이메일과 비밀번호 유효성 확인

• 이메일 조건 : 최소 @, . 포함 ⭕️ (9/24)
• 비밀번호 조건 : 8자 이상 입력 ⭕️ (9/24)
• 이메일과 비밀번호가 모두 입력되어 있고, 조건을 만족해야 제출 버튼이 활성화 ⭕️ (9/24)
• 다음번에 로그인 시 토큰이 존재한다면 루트 경로로 리다이렉트 ⭕️ (9/22)
• 어떤 경우든 토큰이 유효하지 않다면 사용자에게 알리고 로그인 페이지로 리다이렉트
  (+ token 검증 단계가 필요함)

TodoList

• 한 페이지 내에서 새로고침 없이 데이터가 정합성을 갖추도록 구현 ⭕️ (9/25)
  - 투두 작성 시 실시간으로 반영 (새로고침해서 반영되는 것이 아님) ⭕️ (9/25)
  - 투두 삭제 시 실시간으로 반영 (새로고침해서 반영되는 것이 아님) ⭕️ (9/25)
• 개별 Todo를 조회 순서에 따라 페이지 뒤로 가기를 통하여 조회

💁🏻‍♀️수정하고 싶은 디테일 (생각나는 대로 추가하고 수정할 예정)

• 삭제 버튼 클릭했을 때 알림 모달 띄우기 ⭕️ (9/26)

• 로그아웃 버튼 컴포넌트 만들어서 로그인 되었을 때 보이고 로그아웃했을 때 사라지도록하기 ⭕️ (9/22)

• 새로고침하면 초기화 되는 현상 (dispatch로 token 저장해둔거 초기화됨) ⭕️ (9/24)

• 로그인, 회원가입 시 에러났을 때 왜 에러났는지 사용자에게 알려주기 ⭕️ (9/25)
  - 오류 메시지 alert로 띄우기

• todo 작성, 제출 후 input 창 비우기 ⭕️ (9/25)

• todo 삭제 후 다른 todo 클릭했을 때 삭제한 todo가 1초 뜬 후 클릭된 todo가 보이는 깜박임 현상

• 하나의 모듈(소스코드)은 오직 하나의 액터(사용자 혹은 이해관계자)에 대해서만 책임져야 한다. ⭕️ (9/26)
  (클린아키텍쳐 - 로버트 C.)
  - 함수 각각으로 분리하기

  // 유저 입력 값을 가져오는 함수
  const userDataHandler = (event) => {
   if (event.target.type === 'email') {
     setEmail(event.target.value);
   }
   if (event.target.type === 'password') {
     setPassword(event.target.value);
     setIsButtonValid(true);
   }
  };
  

• 수정 이벤트에서 state값을 동일한 title, detail변수를 쓰고 있어서 undo 버튼을 클릭해도 내용이 수정되는 문제 ⭕️ (9/27)

💁🏻‍♀️수정하고 싶은 CSS 디테일

• todo가 존재하지 않을 때 뜨는 문구 ⭕️ (9/25)
• 반응형 코드