스파르타코딩클럽 내일배움캠프 81일차

오늘 일과 간단 요약

1. 오전 스크럼
2. 비밀번호 재설정 form 리팩토링
3. alert 변경
4. 오후 스크럼
5. 프로필 수정 모달창 UI 수정

 

 

 

 

 

 

 

 

비밀번호 재설정 form 리팩토링

사실 리팩토링이라고 해서 그다지 거창하진 않다. 그냥 이전에 언급했던 react-hook-form 이라는 라이브러리를 사용해서 유효성 검사를 추가하고 form 코드를 변경했을 뿐...

 

 확실히 이전에 유효성 검사 하나하나 경우의 수를 따져가며 적었을 때보다는 코드가 훨씬 간결하고 편하다. 더 좋은 라이브러리, 혹은 custom hook을 만들어서 사용하는 방법도 있을 것 같지만 우선은 그렇다는 말이다..ㅋㅋㅋ 나중에 시간이 된다면 custom hook으로 useForm을 만들어서 사용해보고 싶다. 구글링해보면 그렇게 하면 form 자체가 간결해지는데, 지금은 라이브러리를 쓰지만 나중에는 직접 만들어봐야겠다.

 

 아무튼 원래 비밀번호 재설정할 때 이메일을 입력하는 input 창에는 아무런 유효성 검사가 포함되지 않았었다. 그냥 포함해봤자 아무것도 입력하지 않고 눌렀을 때 이메일 전송에 실패했다는 alert창 정도? 그것도 좋지만 이메일 형식이 아니면 아예 버튼이 비활성화 되도록 바꿨다.

 

	<input
                className="appearance-none border border-gray-400 w-full py-2 px-1 text-black placeholder:text-sm"
                {...register("email", {
                  required: "이메일을 올바르게 입력해주세요.",
                  pattern: {
                    value:
                      /^(([^<>()\[\].,;:\s@"]+(\.[^<>()\[\].,;:\s@"]+)*)|(".+"))@(([^<>()[\].,;:\s@"]+\.)+[^<>()[\].,;:\s@"]{2,})$/i,
                    message: "이메일 형식에 맞게 입력해주세요,",
                  },
                })}
                name="email"
                type="email"
                id="email"
                value={email}
                onChange={(event) => setEmail(event.target.value)}
                placeholder="아이디(이메일)을 입력해주세요"
                onKeyUp={(e) => {
                  if (e.key === "Enter") {
                    sendEmailBtn(e);
                  }
                }}
              />
              <div className="text-red-600 text-sm font-semibold mt-2 mb-6">
                {errors?.email?.message}
              </div>

 

 로그인/회원가입 email 유효성 검사랑 동일하다. 그냥 이렇게만 바꾸고 에러 메세지가 아래에 나오도록 바꿨다. 이렇게 바꾸고 나니까 이메일 형식이 아니면 아래에 바로 에러 메세지가 출력되었다. 확실히 이 라이브러리 깔끔하긴 하다.

 

이렇게 리팩토링한 뒤에는 회의를 통해 결정한 sweetAlert 라이브러리를 이용해서 alert창을 변경했다. 어제 프로필 수정할 때는 바꿨는데 비밀번호 재설정 한 뒤에 이메일로 전송되었다는 알람과 전송에 실패했다는 알람을 추가했다. 원래는 그냥 alert창이었는데 바꾸니까 훨씬 보기 좋긴 하다.

 

 이것도 스스로 custom 할수 있을 것 같긴 한데, 아직 시도를 안해봐서....ㅋㅋㅋㅋㅋㅋ 하면 할수록 라이브러리의 편리함을 느끼면서도 직접 구현해봤으면 하는 욕심도 생긴다.

 

await sendPasswordResetEmail(auth, email)
      .then(() => {
        Swal.fire({
          position: "center",
          icon: "success",
          title: "이메일에 링크를 전송했습니다",
          text: "전송된 링크를 클릭해 비밀번호를 재설정해주세요.",
          showConfirmButton: false,
          timer: 1500,
        });
        setSent(true);
        setSending(false);
        setModal(false);
      })
      .catch((error) => {
        Swal.fire({
          position: "center",
          icon: "error",
          title: "이메일 전송에 실패했습니다",
          text: "다시 시도해주세요.",
          showConfirmButton: false,
          timer: 1500,
        });
        setError(error.message);
        setSending(false);
      });

 

여기서 Swal.fire 이 부분이 alert 부분 코드이다. 커스텀하기도 쉽고 그냥 공식 문서에서 보고 그대로 변경하기만 되어서 시간이 엄청 오래 걸리지는 않았다.

 

 한 김에 로그인 성공, 로그아웃 성공 확인하기 위해 작성했던 alert창을 삭제하고 회원가입 성공했을 때만 이 alert 창으로 변경했다. 원래는 거의 모든 기능이 작동할 때마다 넣었었는데, 불필요한 걸 삭제하고 필요한 거에만 해야 하니까...중간중간 콘솔로그도 지웠다.

 

 

 

 

 

 

 

프로필 변경 모달 UI 수정

 어제 프로필 변경 모달창을 수정했었는데 오늘 디자이너님이 수정된 최종 시안을 주셔서 또 그거대로 바꾸는 작업을 했다. 

 

 이게 디자이너님이 주신 최종 시안이고 아래가 내가 구현한 UI이다.

 

 아직 global css를 정하지 않아서 각자 UI를 구현하고 있는데 중간 발표 이후에 주어진 2주간의 시간동안 대대적으로 UI 작업하는 시간을 가질 예정이다. 그래서 내가 구현한 UI 역시 좀 다르다.

 

 그리고 디자인해주신 대로 구현하려면 파일 선택 버튼이 옆으로 바뀌어야 하는데 그게 제대로 먹히지 않아서 우선은 아래로 두었다.전체적인 큰 틀은 일치하니까...이것도 나중에 좀 손볼게 있긴 한데 틀은 맞췄으니까...ㅎ

 

 튜터님이 지난번에 말씀해주셨는데 프로젝트에 필요한 폰트, 글자 크기, spacing 등등을 디자이너님이 주신다고 한다. 그리고 그 전체적인 틀에 따라서 UI를 구현하는게 편하다고 했는데 아직 우리는 최종 디자인이 나오지 않았고 global css 파일 역시 만들지 않아서....우선은 오늘까지가 기능 구현을 완료하기로 했던 날이라서 최종 UI는 나중으로 미뤄뒀다. 

 

 

 

 

 

 

 

 

 

짧은 일기

 벌써 기능 구현 완료를 약속한 날이다. 내일 오전 중에 배포하고 리드미 정리하고, 발표 자료를 만들것 같다. 발표도 매니저너님이 미리 7분 이상을 넘기지 말라고 말해주시고 시연 영상은 미리 찍어야 한다고 해서 그것도 내일 같이 진행할 것 같다. 이전 프로젝트는 거의 직전까지 버그를 해결하고 발표 자료를 만들 시간이 부족했었는데 이번엔 그래도 그때보다는 여유로워서 다행이다. 아, 여유롭다는 말 금지해야 하나. 좀 빠듯하다(!)

 

 중간 발표까지 잘 마무리하고 2주동안 최적화 작업도 잘 하면서 최종 프로젝트를 잘 마무리했으면 좋겠다. 그리고 그동안 나는 체력 관리 잘하기...셀프 약속....ㅎ