첫 번째 프로젝트. 비밀번호 바꾸는 코드

나의 첫 2주짜리 프로젝트 만드는 과정에서 힘들었던 부분 중 하나로 비밀번호를 바꾸는 코드였다.

현재 홈페이지에서 많이 사용되는 특수문자를 넣는 방법부터 해서 유효성 검사까지.. 생각을 많이 했어야 한다.

일단 비밀번호를 바꾸거나 유효성 확인할 때 쓸 useState를 정했다

const MypageInformation = ({ accessToken }) => {
  // 비밀번호 변경 useState
  const [passwordInfo, setPasswordInfo] = useState({
    nowPassword: "",
    newPassword: "",
    newPasswordConfirm: "",
  }); //비밀번호 입력 창에 들어가는 것을 저장할 useState
  const [isPassword, setIsPassword] = useState(false);
  const [isPasswordConfirm, setIsPasswordConfirm] = useState(false);

  const [passwordMessage, setPasswordMessage] = useState(""); //비밀번호 검사 useState
  const [passwordConfirmMessage, setPasswordConfirmMessage] = useState("");

  const [requestSignOut, setRequestSignOut] = useState(false); // 모달 useState

  // const openModalHandler = () => {
  //   !모달 코드
  //   setIsOpen(!isOpen);
  // };

그다음 비밀번호 입력 창에 쓰는 것에 따라서 확인하여 경고창 넣기

const signOutRequest = () => {
    setRequestSignOut(!requestSignOut); //탈퇴 요청 시 모달 띄우기
  };

  const handleInputValue = (target) => (e) => {
    //비밀번호 바꾸는 코드
    setPasswordInfo({ ...passwordInfo, [target]: e.target.value });
    if (target === "newPassword") {
      const passwordRegex =
        /^(?=.*[a-zA-Z])(?=.*[!@#$%^*+=-])(?=.*[0-9]).{8,25}$/; //숫자+영문자+특수문자 조합으로 8자리 이상 사용 정규표현식
      let passwordCurrent = e.target.value;
      if (!passwordRegex.test(passwordCurrent)) {
        setPasswordMessage(`숫자+영문자+특수문자 조합으로
        8자리 이상 입력해주세요.
        사용 가능한 특수문자는 !@#$%^*+=- 입니다.`);
        setIsPassword(false);
      } else {
        setPasswordMessage("안전한 비밀번호입니다");
        setIsPassword(true);
      }
    } else if (target === "newPasswordConfirm") {
      if (e.target.value === passwordInfo.newPassword) {
        setPasswordConfirmMessage("비밀번호를 똑같이 입력했습니다");
        setIsPasswordConfirm(true);
      } else {
        setPasswordConfirmMessage("비밀번호가 틀립니다. 다시 확인해주세요!");
        setIsPasswordConfirm(false);
      }
    }
  };

이 코드로 비밀번호를 수정할 때 해당하는 값을 입력 받아서 그 값으로 비밀번호를 수정.

const changePassword = () => {
    //비밀번호 유효성 검사 통과 확인
    if (!isPassword || !isPasswordConfirm) return;
    axios //비밀번호 변경 시 서버에 요청
      .patch(
        "http://localhost:4000/user",
        {
          password: passwordInfo.newPassword,
        },
        {
          headers: {
            "Content-Type": `application/json`,
            authorization: `Bearer ${accessToken.accessToken}`,
          },
          withCredentials: false,
        }
      )
      .then(() => {
        alert("비밀번호 변경이 성공하였습니다"); //모달 만들기
      })
      .catch(() => {});
  };

비밀번호 유효성 검사 및 서버에 토큰과 함께 개인 정보를 보내 비밀번호를 수정한다.

return (
    <MyinfoDiv>
      <center>
        <MenuDiv>
          <Link to="/mypage">
            <MenubuttonContainer type="button" value="즐겨찾기 목록" />
          </Link>
          <Link to="/mypageinformation">
            <MenubuttonContainer type="button" value="정보수정" />
          </Link>
        </MenuDiv>
        <InputContainer>
          <Title>회원정보 수정</Title>
          <InputdetailContainer>
            기존 비밀번호
            <InputboxContainer
              type="password"
              placeholder="기존 비밀번호를 입력하세요"
              onChange={handleInputValue("nowPassword")}
            />
          </InputdetailContainer>
          <InputdetailContainer>
            비밀번호 변경
            <InputboxContainer
              type="password"
              placeholder="변경할 비밀번호를 입력하세요"
              onChange={handleInputValue("newPassword")}
            />
            <ErrorMessage>
              {passwordInfo.newPassword.length > 0 ? passwordMessage : ""}
            </ErrorMessage>
          </InputdetailContainer>
          <InputdetailContainer>
            비밀번호 변경 확인
            <InputboxContainer
              type="password"
              placeholder="변경할 비밀번호를 확인하세요"
              onChange={handleInputValue("newPasswordConfirm")}
            />
            <ErrorMessage>
              {passwordInfo.newPasswordConfirm.length > 0
                ? passwordConfirmMessage
                : ""}
            </ErrorMessage>
          </InputdetailContainer>
          <ButtonDiv>
            <ButtonContainer type="submit" onClick={changePassword}>
              확인
            </ButtonContainer>
            <ButtonContainer onClick={signOutRequest}>탈퇴하기</ButtonContainer>
          </ButtonDiv>
        </InputContainer>
        {requestSignOut ? (
          <Modal
            accessToken={accessToken}
            requestSignOut={requestSignOut}
            signOutRequest={signOutRequest}
          />
        ) : (
          ""
        )}
        {/* {<Modal />} */}
      </center>
    </MyinfoDiv>
  );
};

export default MypageInformation;

style component를 이용한 CSS 및 모달창 구현을 위한 마무리 작업.

클릭 시에 실행이 되도록 하였다.

무척 어렵다. 어렵지만 막상 이 상황에 부딪히니 역시나 어떻게든 하게 되었다.

지속적으로 노력하고 계속해서 만들어보자.

그것이 살 길이고 노력하여 실력을 키워 멋지게 일해보자