validation2 회원가입, 로그인 폼 만들기(validation 유효성 체크, React Hook Form) 구현목록 - React Hook Form를 사용해서 회원가입 폼 개선(유효성 검사 속성 및 에러메세지 추가) React Hook Form이란? React에서 Form을 쉽게 만들기 위해 사용하는 라이브러리. ✔️ 기존의 폼에서 입력해야하는 여러가지 번거로운 작업을 줄여준다.(value설정, 데이터 전송 관리 등) ✔️ 타입스크립트로 작성된 라이브러리로, 타입스크립트와 아주 잘 맞는다. ✔️ 사용하기 쉬운 유효성 검사, 적은 코드 결과 이메일, 비밀번호를 필수값으로 지정 이메일 - 패턴값 지정, 비밀번호 - minLength로 4글자 이상으로 지정 과정 1️⃣ React Hook Form 설치 npm install react-hook-form 2️⃣ useForm 불러오기(react-hook-form에서 .. 2024. 1. 21. 회원가입, 로그인 기능 구현(JWT) 로그인 및 회원가입 기능 : JWT를 통해 회원가입, 로그인을 구현하고 쿠키에 토큰들을 담아서 API를 보낼때 쿠키가 유효한지 확인하는 미들웨어를 만들어서 보안성을 높였다. 회원가입 구현 1️⃣ users 데이터 베이스 생성 2️⃣ 프론트 페이지에서 axios 통신으로 아이디, 비밀번호 데이터 값을 보내주면 users 데이터베이스에 저장 → 이미 존재하는 아이디(이메일)인지 확인하는 작업 필요 → 비밀번호 암호화 과정 추가(bcrypt) -> 문자열 확인? 아이디, 비밀번호 양식 확인하는 코드 추가해야함 ⬇️ register.ts import express, { Request, Response, NextFunction } from "express"; import { Users } from "../mode.. 2024. 1. 21. 이전 1 다음