Auth/Todo 개선 중 트러블 슈팅

Sheryl Yun·2023년 5월 11일
0
post-custom-banner

1. 로그인 여부와 상관 없이 같은 뷰가 보이는 이슈

처음에는 이렇게 되어 있었다.

로그인, 회원가입, 로그아웃 버튼이 한번에 같이 있다.

로그인에 성공했을 때는 logout 버튼만 보여주고
로그인 전에는 signin, signup 두 개 버튼만 보여주고 싶었다.

그리고 로그인 전에는 todo 리스트를 보여주고 싶지 않았다.
(모든 todo api가 로그인 후 토큰이 있을 때만 작동)

수정

AuthService.js

스토리지에 토큰이 있는지 여부를 반환하는 islogin를 추가했다.

처음에 다른 signin, signup처럼 함수로 추가했다가

...
  islogin() {
    return this.tokenStorage.get();
  }
  ...

변수 형태를 갖게 하고 싶어서
클래스가 갖고 있는 상태로 선언해주었다.

 constructor(httpClient, tokenStorage) {
    ...
    this.islogin = this.tokenStorage.get();
  }

AuthContext.js

islogin을 함수로 내보낼 때는 다른 함수들처럼 .bind(authService)를 붙여야 했는데
변수로 바꾸고 나니 아래처럼만 해도 동작했다.
(constructor에 있는 걸 가져오는데 아래 코드가 맞는지는 모르지만 동작은 함)

 const islogin = authService.islogin;

  return (
    <AuthContext.Provider
      value={{
		...
        islogin,
      }}
    >
      {children}
    </AuthContext.Provider>
  );

Auth.jsx

뷰 컴포넌트로 와서

  const { signin, signup, logout, islogin } = useAuth();

useAuth()로 꺼내주고

	{islogin ? (
        <button onClick={logout}>logout</button>
      ) : (
        <>
          <button onClick={handleSignin}>signin</button>
          <button onClick={handleSignup}>signup</button>
        </>
      )}

jsx를 이렇게 수정했다.

islogin이 함수였을 때는 islogin() 이렇게 써줘야 했는데
반환 값이 boolean(원시 값)이고
복잡한 연산을 한 것도 아니니 함수까지는 필요하지 않을 듯 하다.

TodoContext.js

로그인 상태일 때만 useEffect에서 todo를 가져오게 했다.

  useEffect(() => {
    if (islogin) { // 추가
      todoService.get().then(setTodos);
    }
  }, [islogin, todoService, setTodos]); // 의존성 추가

결과

결과적으로 로그인을 했을 때는

이렇게 logout 버튼과 함께 todo 까지 보이고

로그인 상태가 아닐 때는

auth 관련한 두 버튼만 보여주게 되었다.

2. 로그인 여부가 바로 바로 반영되지 않는 이슈

위 이슈를 해결할 때 islogin 여부에 따라
해당 결과가 뷰에 바로바로 반영되지 않아서 매번 새로고침을 해야 하는 이슈가 있었다.

우선 어디를 건드려야 할 지를 살펴보았다.
AuthService 클래스에 있는 islogin 상태는 tokenStorage에 의존하고 있었다.

tokenStorage가 바뀌어야 트리거됨

(작성 중)

profile
영어강사, 프론트엔드 개발자를 거쳐 데이터 분석가를 준비하고 있습니다 ─ 데이터분석 블로그: https://cherylog.tistory.com/
post-custom-banner

0개의 댓글