[TWIL] 사전 프로젝트를 하며 알게 된 몇 가지 - 최종편

1편과 2편에 이어 최종편으로 마무리해보려 한다. 
프로젝트를 하면서 만난 에러 모음 및 회고는 언제 포스팅할 수 있으려나..🥲
 

1. 비밀번호 유효성 검사

필요한 유효성 검사: 최소 8자, 하나 이상의 문자와 하나의 숫자 

// 8~20 글자
let regExp = /^[a-zA-Z0-9]{8,20}$/

// 8 글자만 검사 통과 
let regExp = /^[a-zA-Z0-9]{8}$/

// 8 글자 이상
let regExp = /^[a-zA-Z0-9]{8,}$/

 
🔽 최종적으로 작성한 checkPassword 함수
 

 
 

2. request header의 Authorization

인증 토큰을 서버에 보낼 때 요청 헤더의 authorization에 실어서 보냈다. 여러 곳에서 post 요청을 보내야 했기에 먼저 다음과 같이 postFetch 함수를 작성했다.
 

 
그리고 실제 요청을 해야 하는 곳에서 다음과 같이 postFetch를 호출했다.

    // * question POST 요청
    const QUESTION_POST_URL = `${process.env.REACT_APP_URL}/questions`;
    const res = await postFetch(QUESTION_POST_URL, newData, accessToken);
    const location = res.headers.get('Location'); 
    
    if (res) {
      navigate(location);
    }

 
 

3. response header의 status code와 location

로그아웃 post 요청 후 프론트 코드에서 작성한 리다이렉션이 아닌 엉뚱한 곳으로 이동하는 일이 생겼다. 찾아보니 post 요청 후 상태 코드가 302이 떴는데, 300번대 상태코드가 뜨면 response header에 있는 location으로 자동으로 리다이렉트 되는 거였다. 
 
서버에 로그아웃 post 요청 후에 200번대 상태 코드를 보내달라하고, 다음과 같이 로그아웃 핸들러를 구현했다.

  const handleLogout = async () => {
    const LOGOUT_POST_URL = `${process.env.REACT_APP_URL}/logout`;
    const res = await postFetch(LOGOUT_POST_URL);

    if (res) {
      setIsLoggedIn(false);
      setTokens({
        accessToken: '',
        refreshToken: ''
      });

      navigate('/');
    }
  };

 

4. useContext

질문/답변 게시판 구현을 하면서 상태 관리 라이브러리를 사용할 정도의 필요성을 크게 못 느껴서 useContext hook을 사용했다. props drilling을 한다고 해도 두세번 이상 내려가지 않는 컴포넌트 구조라 props drilling으로도 해결 가능했지만, useContext 를 사용하니 custom hook으로 필요한 로직을 분리해 내는게 훨씬 편해졌다.
 

5. custom hook

프로젝트를 하면서 custom hook을 어떤 경우에 사용해야 하는지 확실히 알게 되었다. useState, useEffect, useContext 등 react hook을 사용하는 로직이 공통적으로 반복되어서 분리해야 할 때 커스텀 훅을 작성하니 코드가 많이 간결해지고 가독성도 훨씬 좋아졌다. 
아래는 프로젝트에서 사용한 hooks을 모은 코드이다. 각 hook마다 로직을 짤 때 고민들이 고스란히 담겨 있는데, 이에 대한 썰들은 다음 포스팅에서 하나하나 풀어갈 기회(라고 쓰고 시간이라고 읽는다)가 있기를 🙏🏼
 
🔽 useLoginLogic : 로그인 페이지와 회원가입 페이지에서 동일한 로직을 빼내서 구현
 

 
🔽 useCheckLogin
 

 
🔽 useAccessToken
 

 
🔽 useLocalStorage