⌨️ 개요
저번에는 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-의-중요성
