Skip to content

Conversation

@twtwkim
Copy link
Collaborator

@twtwkim twtwkim commented Dec 7, 2024

요구사항

기본

  • 유효한 정보를 입력하고 스웨거 명세된 “/auth/signUp”으로 POST 요청해서 성공 응답을 받으면 회원가입이 완료됩니다.
  • 회원가입이 완료되면 “/login”로 이동합니다.
  • 회원가입 페이지에 접근시 로컬 스토리지에 accessToken이 있는 경우 ‘/’ 페이지로 이동합니다.
  • 회원가입을 성공한 정보를 입력하고 스웨거 명세된 “/auth/signIn”으로 POST 요청을 하면 로그인이 완료됩니다.
  • 로그인이 완료되면 로컬 스토리지에 accessToken을 저장하고 “/” 로 이동합니다.
  • 로그인/회원가입 페이지에 접근시 로컬 스토리지에 accessToken이 있는 경우 ‘/’ 페이지로 이동합니다.
  • 로컬 스토리지에 accessToken이 있는 경우 상단바 ‘로그인’ 버튼이 판다 이미지로 바뀝니다.

심화

  • 로그인, 회원가입 기능에 react-hook-form을 활용해봅니다.

주요 변경사항

  • 미션 요구사항에 따라 기존 스프린트 미션 8까지 작업했던 브랜치의 작업물을 베이스로 이번 미션 수행했습니다.
  • 로그인 / 회원가입을 위한 api 구성은 api.ts 파일에 작성했고, fetch 함수를 활용했습니다.
  • refresh token을 활용한 토큰 갱신은 jwt 토큰을 디코딩하고, 만료여부 확인하는 등의 몇가지 추가 로직을 통해 구현했습니다.(api.ts)
  • 토큰이 저장되어 있는지 여부를 Redux를 활용해서 상태 관리하여 활용했습니다.
  • React-hook-form은 처음 사용해봤는데, 상당히 간편했습니다. 기존의 form을 변경했습니다.

멘토에게

  • 지난 2번의 리뷰간 해주신 리뷰들의 내용을 이번 코드에서도 반영하고자 했지만, 너무 양이 방대해서 시간 관계상 차후에 진행하겠습니다.
  • 멘토링때 말씀해주신 것 처럼 fetch 함수를 활용해서 그런지 디코딩 하고, 비교하는 등의 로직이 생각보다 길었습니다. 찾아보다보니 jwt-decode라는 라이브러리도 있었으나 이번에는 사용하지 않았습니다.
  • 특정 api 요청시 토큰 만료기간을 비교해서 필요시 요청하는 방식을 활용하고자 했습니다.
  • Redux는 공식문서 참고해서 적용해봤는데, 기존 레거시 방식에서 배웠던 코드보다 훨씬 간결해졌다는 느낌을 받았습니다. 다만 숙련치 못해 주석을 많이 달아놨습니다. 양해 부탁드립니다..;;
  • 셀프 코드 리뷰를 통해 질문 이어가겠습니다.

@twtwkim twtwkim requested a review from jyh0521 December 7, 2024 12:57
@twtwkim twtwkim added the 매운맛🔥 뒤는 없습니다. 그냥 필터 없이 말해주세요. 책임은 제가 집니다. label Dec 7, 2024
Copy link
Collaborator

@jyh0521 jyh0521 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

고생하셨습니다~

import FAQ from "./components/FAQ";
import LoginPage from "./page/LoginPage";
import RegisterPage from "./page/RegisterPage";
import { useSelector } from "react-redux";
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

오 프로젝트 하기 전에 미리 리덕스를 활용해보시는군요. 좋습니다 👍

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

api 함수들이 점점 늘어나는데 각 함수마다 하나의 파일로 만들어두셔도 좋을 것 같습니다.

function Header() {
const [isDropdownVisible, setIsDropdownVisible] = useState(false);
const dispatch = useDispatch();
const count = useSelector((state: any) => state.counter.value);
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

state의 타입을 지정해줄 수 있으면 지정해보셔도 좋을 것 같습니다.

Comment on lines +14 to +16
const toggleDropdown = () => {
setIsDropdownVisible((prev) => !prev);
};
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

토글 함수는 몇번 본 것 같은데 훅 같은거로 만들어보면 어떨까요?

placeholder,
}: InputFieldProps) => {
const [isPasswordVisible, setIsPasswordVisible] = useState<boolean>(false);
const InputField = forwardRef<HTMLInputElement, InputFieldProps>(
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

forwardRef 잘 사용해주셨는데, 혹시 ref를 사용하는 경우가 있나요? 이번 PR에서는 안보이는 것 같아서요.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

아래 input 태그에서 ref를 사용했습니다!

<div className="input-pass-box">
<input
ref={ref}
className={`input-tag ${error ? "input-error" : ""}`}
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

clsx 같은 라이브러리를 활용해보시는 것도 좋을 것 같습니다.

@jyh0521 jyh0521 merged commit 90f1016 into codeit-bootcamp-frontend:React-김태완 Dec 9, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

매운맛🔥 뒤는 없습니다. 그냥 필터 없이 말해주세요. 책임은 제가 집니다.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants