Today 요약

1. 피드백 답변하기

1. What I did?

1. 1 피드백 답변하기

에러 처리

• validation 메세지를 한 곳에서 관리한다? 어떻게 관리하라고 하는 걸까?

  • 단순하게 원하는 UI에서 메세지만 출력하는 건데 메세지를 상수로 빼내서 관리하는 것 말고 따로 어떻게 더 관리해야 하는 걸까? 처음에는 이렇게만 생각했었다.

  • 하지만 메세지를 띄우기 위해서 진행했던 유효성 검사 로직들이 있었고, 그 로직들을 useError에서 한 번에 관리하고 원하는 컴포넌트에서 원하는 validation 메세지만 가져와 사용할 수 있도록 하는 방식을 사용해봤다.

    const useError = () => {
      const authContext = useContext<AuthContextProps | null>(AuthContext)
    
      const { email, password } = authContext
    
      const [btnDisabled, setBtnDisabled] = useState(false)
    
      const isValidEmail = email.indexOf('@') !== -1
      const isValidPassword = password.length >= 8
    
      useEffect(() => {
        setBtnDisabled(!isValidEmail || !isValidPassword)
      }, [isValidEmail, isValidPassword])
    
      if (!authContext) {
        return null
      }
    
      return { btnDisabled, isValidEmail, isValidPassword }
    }
    
    export default useError

accessToken 관리

• accessToken이 존재하면 회원가입, 로그인 페이지에서 투두페이지로 리다이렉션 될 수 있도록 하는 요구사항이 있었는데, 그 부분을 해결할 때 각 페이지 컴포넌트가 마운트 될 때 accessToken이 존재하는지 확인하고 리다이렉션 할 수 있도록 했었다. 하지만 멘토님 피드백으로는 각 컴포넌트에서 검증해서 처리하는 것보다Context로 관리되고 있기 때문에 전역에서 먼저 체크해서 토큰이 존재할 때 리다이렉션 될 수 있도록 하는 것이 좋다라는 것 같다. (내가 명확하게 이해하고 있지 못하는 것일수도 있음.. 컴포넌트에서 마운트 될 때 체크하는 부분이 정상적으로 동작하지 않을 수도 있다고 생각한다고 했다.) 그리고 한 가지 더 토큰을 가지고 오는 것 자체가 localStorage에서 가지고 오고 있다. 이는 브라우저의 기능만을 사용하고 있는 코드이고 그 경우에는 useEffect에서 같이 관리하는 것이 좋고 그래서 Context에서 같이 관리하는 것이 좋다라고 이해했다. (멘토링 날에도 이 부분이 제일 어려웠다. 녹화한 영상을 계속 돌려보는데도 아직 명확하게 어떤 의도인지 제대로 이해하지 못한 것 같다.)

• 그래서 결국 각 컴포넌트에서 리다이렉션 하던 코드는 전부 제거하고 Context에서만 체크하는 걸로 변경해보았다. useEffect 안에서 토큰을 가지고 오고 원하는 url 경로일때, 토큰이 존재하는지 확인해서 로그인, 회원가입 페이지라면 투두페이지로 리다이렉션 될 수 있게 해보았다.

  const navigate = useNavigate()
  
  const path = window.location.pathname
  
  useEffect(() => {
    const accessToken = localToken.get()
    const authPath = ['/signin', '/signup']
  
    if (accessToken) {
      if (authPath.includes(path)) {
        navigate('/todo')
      }
    }
  }, [path, navigate])

• 이쯤에서 드는 의문점은 3가지다.

  • 첫째, 토큰이 유효한지 검증하는 로직이 필요하다는 피드백이 있었지만, 토큰의 유효성은 보통 서버에서 체크한 뒤에 넘겨주는 것 아닌가 하는 궁금증 때문에 일단 그 부분은 구현하지 않고 슬랙에 질문 해놓은 상태다.
  • 둘째, 각 컴포넌트에서 useEffect로 리다이렉션 잘 되던걸 Context에서 처리할 필요성(예를 들어 토큰을 Context에서 관리하지 않고 각 컴포넌트의 useEffect 안에서 처리해도 되지 않는가)에 대해서 명확하게 설명할 수 있어야 하는 데 그렇지 못한다는 것이다.
  • 셋째, 브라우저에서 동작하는 코드들을 useEffect안에서 처리해야 하는 이유에 대해서도 답하지 못한다는 것이다.

• 이번 멘토링 때 너무 수동적으로 피드백을 받아들이는 것 같다는 이야기도 있었다. 그냥 당연하게 그 코드가 거기에 있는 게 대충 좋을 것 같으니까가 아니라 내가 설명할 수 없는 건 제대로 설명할 수 있을 때까지 이해하고 해결되지 않는 의문점들에 대해서는 오랫동안 고민해보자. 그리고 그 과정에서 다른 사람이 이렇게 했으니까가 아니라 내 기준을 확실하게 정하자. 그리고 그 가운데 잘못된 기준을 잡고 있었다면 다시 빠르게 수정해나가는 식으로 공부하자.