UseForm으로 회원가입만들기(2탄)

밍글·2023년 3월 15일
0

⌨️ 개요

저번에는 react-hook-form을 이용하여 회원가입폼을 만들었었다. 이번에는 회원가입뿐만 아니라 로그인까지 이어져 home화면이 뜨는 것까지 구현을 해 보았다.

‼️참고‼️ : 로그인한 뒤의 home화면은 아직 완성이 되지 않았기 때문에 다음에 작성할 ReactQuill에디터를 띄우는 것으로 마무리를 하였다.

💻 완성된 모습

완성된 모습은 다음과 같다. 실제 이메일을 사용하여 인증번호를 진행하였기 때문에 진행속도가 다소 느렸었다🥲


📚진행과정

로그인 창 구현

먼저 로그인창을 구현하였다. 이 때 아이디찾기,비밀번호찾기,회원가입도 링크로 이동할 수 있는 버튼도 생성하였다. 이와 관련된 css는 이미지 버튼을 제외하고는 styled-components로 진행했다.

//Login.tsx
import axios from "axios";
import React, { useEffect, useState } from "react";
import { useForm } from "react-hook-form";
import { useNavigate, Link } from "react-router-dom";
//....
function LoginPage() {
    const regExpEm =
    /^[A-Za-z0-9_]+[A-Za-z0-9]*[@]{1}[A-Za-z0-9]+[A-Za-z0-9]*[.]{1}[A-Za-z]{1,3}$/;
  const regExgPw = /^(?=.*[a-zA-Z])(?=.*[!@#$%^*+=-])(?=.*[0-9]).{8,25}$/;

  const {
    register,
    handleSubmit,
    formState: { errors, isValid },
  } = useForm<{ email: string; password: string }>({ mode: "onChange" });
}

  const onSubmit = handleSubmit((data) => {
    fetch(`${API URL주소}/user/login`, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        email: data.email,
        passWord: data.password,
      }),
    })
      .then((res) => res.json())
      .then((res) => {
        if (res.isSuccess === true) {
          localStorage.setItem("login_token", res.result.jwt);
          localStorage.setItem("userIdx", res.result.userIdx);
          setIsLoggedIn(true);
          alert("로그인 되었습니다");
          navigate("/edit");
        } else {
          alert("이메일과 비밀번호를 다시 한 번 확인해주세요");
        }
      });
  });
//...

회원가입과 다른 부분(HandleSubmit)

회원가입에서는 axios로 handleSubmit을 실행하였을 때 500에러가 떴었다. 이를 해결하기 위해 여러 방법을 사용해봤지만 안되어서 watch랑 setValue를 이용했었다. 이번에는 fetch로 handleSubmit을 구현하게 되었다. fetch와 axios구분은 다른 포스트 글에서 작성할 예정이다🔥

handleSubmit?
handleSubmit이란 useForm의 내장된 함수 중 하나로써, form의 validation이 통과되었다면 form data를 받는 함수이다. 이 함수를 통해 form data를 server로 보낼 수 있다.
함수 구조 : ((data: Object, e?: Event) => Promise, (errors: Object, e?: Event) => void) => Promise

CSS관련 - 문제해결

실행하였을 때 문제는 없었지만 js코드에서는 문제없이 넘어갔던 코드가 tsx에서는 경고메시지가 떴었다. img관련 코드였는데 이를 해결하기 위해서 에러메시지를 복사하여 검색하였다.코드는 다음과 같다.

//login.tsx
  //....
            {show ? (
            <img
              src="/img/show.png"
              style={{ width: "18.33px", height: "15.27px" }}
              
            />
          ) : (
            <img
              src="/img/hide.png"
              style={{ width: "18.33px", height: "15.27px" }}
            />
          )}
  //...

✅해결방법 : img 요소에는 alt가 무조건 있어야 한다. 사실 alt를 작성하지 않아도 되고 js는 기준에 대해 유연하기 때문에 경고나 문제를 일으키지 않지만, 웹표준에 맞추려면 alt에 작성하는게 맞다고 한다.


마무리

이번 로그인&회원가입창을 통해 비교적 간단하지만, 다양한 변화가 있었다. useForm이라는 새로운 기능을 활용하였고, 기존의 프로젝트는 tailwind와 js를 사용했었는데 styled-components와 ts를 사용하게 되었다. 또한 fetch방식에서 axios방식으로 활용하는 방법도 배우게 되었다.(🔥tailwind나 axios vs fetch방식은 추후에 작성할 예정이다.🔥)
다음 포스팅에서는 추후에 작성할 것들을 얼른 포스팅한뒤에 ReactQuill에디터에 대한 설명과 customToolbar설정에 대해 다뤄보도록 하겠다.🧐


참고자료(회원가입때와 중복되지 않는 참고자료)
https://jaddong.tistory.com/entry/리액트에서-img-태그-버그-해결방법-alt-의-중요성

profile
예비 초보 개발자의 프로젝트와 공부 기록일지

0개의 댓글