2주차 개발 노트

1. 회원가입 API 연결

const postRegisterAPI = async (data: PostUserData) => {
  const res = await fetch(`${process.env.NEXT_PUBLIC_SERVER_URL}/auth/signup`, {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify(data),
  });
  const result: CreateUserResponse = await res.json();
  if (result.statusCode >= 400) {
    throw new Error(result.message);
  }
  return result;
};

const mutation = useMutation(postRegisterAPI, {
  onSuccess: (data, variables) => {
    // success!
  },
  onError: (error, variables, context) => {
    // An error happened!
    // ...
  },
});

const userDataFormik = useFormik({
  // ...(중략)...
  onSubmit: async (values) => {
    if (applySubmit.authSelf && applySubmit.checkAllBox) {
      // ...
      mutation.mutate(newSubmitData);
    } else {
      // ...
    }
  },
})

2. password-find page form 및 UI 구현
   역시 formik을 활용 해서 form을 구현 했습니다.

3. password-new page form 및 UI 구현
   역시 formik을 활용 해서 form을 구현 했습니다.

4. 회원가입 logic 구현
   문자 인증 절차는 아직 백에서 구현되지 않았기에 임시적으로 front에서 번호를 입력받으면 일정시간 번호 전송버튼을 disabled 하고, 번호를 입력 받았다면 인증번호를 인증 할 수 있게 해 놓았습니다. 인증번호는 한번 보내면 버튼을 disabled 시켰으며, 다시 전화번호 인증을 시도하면 풀리게 했습니다.
   또한 상태에 따라 다른 모달 안내창이 뜹니다.

본인인증이 되지 않은 상태에서 회원 가입 할 수 없고 본인인증을 진행해 달라는 모달창이 뜹니다.

동의사항을 체크하는 4가지 체크박스는 모두 체크되지 않았다면 회원 가입 할 수 없고 동의사항을 확인해 달라는 모달창이 뜹니다.

이미 존재하는 이메일이라면

github

2주차.. 선택과 고민

트러블 슈팅이랄게 크게 없었어서 팀적으로 고민거리였던 것들을 적습니다.

🤔 고민

1. orval
   orval이 back에서 넘겨주는 데이터의 interface를 자동으로 생성! ...
   타입은 잘 받아왔습니다. 근데 뭔가 기능이 더 있는 것 같은데... 당장은 back 데이터의 interface 생성 기능만 사용하기로 했으니.. 라이브러리에 대해 좀 더 생각 해 봐야겠습니다.

2. CAPTCHA
   캡챠를 사용하게 되어서 v2와 v3중에서 고민하게 되었습니다.

선택

✅ CAPTCHA v3

v2는 업데이트가 중단, 하지만 v3보다 훨씬 많은 다운로드 수를 보였고, v3가 업데이트 되고 있는 상황이었습니다. 다운로드 수가 크게 차이를 보였지만.. 업데이트가 중단 되었기에 v3로 선택되었습니다.

회고

Register page 코드가 복잡해져서 분리시키는 작업과 회원가입에 필요한 logic이 구현 되었습니다.
회원가입 api가 연동 되었고(CAPTCHA 아직 미적용), post로 useMutation을 사용했습니다.
useMutation
뭔가 많이 한거 같았는데 결과물은 딱히 많지가 않네요. 회원가입 logic이 생각보다 시간을 잡아 먹었던거 같아요. 그래도 역시 의도한 대로 개발을 해 나가는 재미가 있었습니다.

KPT

주 한번씩 있는 KPT회고 진행을 맡게 되었는데 정말... 아무 주제로나 다양하게 얘기하게 되었습니다 :)
프로젝트 관련은 물론이고, 프로젝트 외적인 부분도 자유롭게 대화를 나눴습니다.

2주차 KPT에서 Action으로 넘어가게 된 사안으로는
1. 스크럼 시간에 각자 진행상황 이야기 하기
2. 고양이 사진 많이 올려주기..(?)

PR

PR을 올릴 때 코드리뷰가 이루어지고 있는데, front 동료분이 정말 잘 봐주셔서.. 같은 실수를 반복하지 않게 신경써야 겠습니다. (안 쓰는 코드 삭제해서 올리는 등 코드 정리해서 올리기)

번외

CAPTCHA를 테스트 중인 팀 동료분은 CAPTCHA가 develop환경에서 자꾸 디자인이 깨져 보이길래 소위 삽질(?)을 많이 하셨다고 하셨습니다. 찾아보니 develop환경과 deployment 환경에서 다르게 보인다고 하더군요... (CAPTCHA가 잘못했지..)

마무리

회고가 이런게 맞나 싶지만 의지가 꺾이지 않게 시작한 회고 작성 이므로 꾸준하게 작성하는 것을 목표로 가져가려고 합니다. 한 주 동안 열심히 하지 않으면 회고에도 적을게 없어지겠죠.
3주차 때에는 더 적을게 많았으면 좋겠다!!!

썸네일을 제작 해 주신 손생님 팀장님 https://velog.io/@blcklamb 감사합니다!