[Week4/mission] 첫 커스텀 훅 만들어보기, 로그인 / 회원가입 기능 구현해보기 (feat. 유효성 검사)

[leetaesk]

✏️ 작업 내용

#️⃣ 연관된 이슈

#20

📷 작업 결과

작업 결과 사진을 업로드해주세요.

week4-mission1.mp4

week4-mission2.mp4

week4-mission3.mp4

💡 함께 공유하고 싶은 부분

해당 주차를 공부하면서 함께 이야기하고 싶은 주제를 남겨주세요.

(어려웠던 부분과 해결 과정, 핵심 코드, 참고한 자료 등)

Signup 페이지에서 input을 컴포넌트화하려 했는데 react-hook-form에서 커스텀 컴포넌트를 사용하려면 register가 아닌 controller를 사용해야 한다고 해서 써봤습니다. 간단한 사용법만 있는 페이지 공유드릴게요 :)
https://toby2009.tistory.com/56

그리고 Nav에서 Link를 컴포넌트로 빼다가 NavLink라는 것을 알았습니다. react-router-dom에서 지원해주는건데 isActive를 활용하면 params나 location 없이도 링크를 추적해서 boolean을 뱉어준다고 하네요
https://velog.io/@exceed96/React-Link-NavLink

🤔 질문

해당 주차 워크북을 공부하면서 궁금했던 질문들을 남겨주세요.

✅ 워크북 체크리스트

• 모든 핵심 키워드 정리를 마쳤나요?
  
• 핵심 키워드에 대해 완벽히 이해하였나요?
  
• 실습/미션을 수행하였나요?
  

✅ 컨벤션 체크리스트

• pr 제목을 컨벤션에 맞게 작성하였나요?
  
• pr에 해당되는 이슈를 연결하였나요?
  
• 적절한 라벨을 설정하였나요?
  
• 코드리뷰를 요청하기 위해 reviewer를 등록하였나요?
  
• 닉네임/main 브랜치의 최신 상태를 반영하고 있나요?
  

[duwlsssss]

고생하셨어요!!

[duwlsssss]

tailwind랑 NavLink랑 같이 쓰기 너무 좋아보이네요!

[duwlsssss]

ref의 역할은 뭔가여??

[S-Gihun]

고생 많으셨습니다 !

[S-Gihun]

  const handleNext = async (fieldsToValidate: (keyof FormFields)[]) => {
    const valid = await methods.trigger(fieldsToValidate);
    if (valid) {
      setStep((prev) => prev + 1);
    }
  };

이 코드 참고해보시면 좋을 거 같습니다.