🚀 Start

지금까지는 로그인, 회원가입 기능을 JWT를 사용한 토큰 방식으로 구현하였다. 하지만, 이번에는 세션,쿠키를 사용해보는 시간을 갖었다.

👍 Sessoin + cookie = ?

나는 지금까지 쿠키와 세션의 차이와 대립만이 있고 서로 대체만 가능한 기술로 알고 있었지만, 둘은 상호 보완을 하는 기술이라는 것을 알게 되었다.

쿠키의 최대 단점은 브라우저에 저장되기 때문에 보안에 취약하다는 점이 있고, 세션은 서버에 정보를 저장하지만 지속적인 요청이 필요하며 쿠키보다 속도가 느리다.

따라서 세션을 사용하면서 쿠리를 사용하게 되는 방식을 갖게 된다. 서버에서 생성한 쿠키를 클라이언트단에서 저장하였다가 인증 요청시 서버에 해당 쿠키를 전송하면 서버에서는 해당 값에 대한 세션이 존재하는지만 확인해주면 된다.

💡 참고하자!
👉 쿠키 2부: 세션은 쿠키가 필요해~
👉 [EXPRESS] 📚 express-session 미들웨어 & Session Store 사용법 정리
👉 인증 방식 : Cookie & Session vs JWT

⭐️ SignUp & LogIn

✅ 로그인, 회원가입 페이지 + Custom Input hook

⭐️ client
|
├── 🗂 pages
│    ├── 📄 Login.tsx
│    └── 📄 Signup.tsx
│
└── 🗂 hooks
     └── 📄 useInput.tsx

👉 SignUp

const SignUp = () => {
  // 2️⃣ 인증된 회원정보 가져오기
  const { data: userData } = useSWR('/api/users', fetcher);
  	...

  // 1️⃣ 작성한 회원정보 서버에 요청
  const onSubmit = useCallback((e: React.FormEvent<HTMLFormElement>) => {
      e.preventDefault();
       ...
      axios
          .post('/api/users', { email, nickname, password })
          .then(() => {...})
          .catch(error => { ....});
      }
    },
    [email, nickname, password, mismatchError]
  );
  
  // 3️⃣ 사용자 데이터 존재시 아래페이지로 즉시 이동
  if (userData) {
    return <Navigate replace to="/workspace/sleact" />;
  }


  return (
   	  <Form onSubmit={onSubmit}>
      		<Input ... onChange={onChangeEmail}/>
       		<Input ... onChange={onChangeNickname} />
            <Input ... onChange={onChangePassword} />
      		<Input ... onChange={onChangePasswordCheck}/>
          
            // 유효성 검증 & 에러 핸들링
            {mismatchError && <Error>비밀번호가 일치하지 않습니다.</Error>}
            {!nickname && <Error>닉네임을 입력해주세요.</Error>}
            {signUpError && <Error>이미 가입된 이메일입니다.</Error>}
            {signUpSuccess && <Success>회원가입되었습니다! 로그인해주세요.</Success>}
        
           <Button type="submit">회원가입</Button>
      </Form>
 );
};

👉 LogIn

const LogIn = () => {
  // 2️⃣ 인증된 회원정보 가져오기
  const { data, error, mutate } = useSWR('/api/users', fetcher);
  
  // 1️⃣ 가입한 회원정보 서버에 요청
  const onSubmit = useCallback((e: React.FormEvent<HTMLFormElement>) => {
      e.preventDefault();
     
      axios.post('/api/users/login', { email, password },{withCredentials: true}
        )
        .then(response => { mutate()}); // 업데이트
        .catch(...);
    },
    [email, password]
  );

  // 3️⃣ 사용자 데이터 존재시 아래페이지로 즉시 이동
  if (data) {
    return <Navigate replace to="/workspace/sleact/channel/일반" />;
  }

  return (
    
      <Form onSubmit={onSubmit}>
          <Input ... onChange={onChangeEmail}/>
       	  <Input ... onChange={onChangePassword}/>
          
          // 유효성 검증 & 에러 핸들링
          {logInError && <Error>이메일과 비밀번호 조합이 일치하지 않습니다.</Error>}
       
          <Button type="submit">로그인</Button>
      </Form>
    
  );
};

export default LogIn;

👉 useInput

✅ 재사용되는 컴포넌트로 들어오는 데이터에 대해 제네릭 타입을 통한 타입 추론 설정

type ReturnTypes<T> = [
  T,
  (e: ChangeEvent<HTMLInputElement>) => void,
  Dispatch<SetStateAction<T>>
];

const useInput = <T>(initialData: T): ReturnTypes<T> => {
  const [value, setValue] = useState(initialData);
  const handler = useCallback((e: ChangeEvent<HTMLInputElement>) => {
    setValue(e.target.value as unknown as T);
  }, []);
  return [value, handler, setValue];
};

export default useInput;

🎥 GIF

✅ 회원가입

✅ 로그인/로그아웃