TIL 61일차

오늘 목표했던 것 🗒

인스타그램 클론코딩 거의 완료 ✓

---

useHistory

react-router-dom 라이브러리의 기능 중 하나인 useHistory를 사용하여 서버와 통신 후, 로그인이 성공을 하게 되면 설정한 화면으로 넘어가는 것을 구현할 수 있었다.

import { Link, useHistory } from "react-router-dom";


const Component = () => {
const history = useHistory();
  ...
  
const handleSubmit = (e) => { // 로그인 버튼 클릭 시, 실행되는 코드

    fetch(`http://localhost:3000/${email}/${password}`)
      .then((response) => response.json())
      .then((result) => { // 유저가 전송한 데이터가 데이터베이스에 있는지 없는지, Boolean 값으로 응답되게 서버를 구현함.
        if (result === true) {
          history.push("/main"); //history.push를 사용하여 내가 원하는 경로 창으로 이동.
        }
      })
      .catch((error) => console.log("error", error));
  };  
}

useHistory 참고 링크

정규 표현식

정규 표현식을 사용하여 회원가입 페이지에서 유효성 검사를 할 수 있었다.
정규 표현식에 대해서 많이 알고 있지 못해서 아래 사이트를 참고하였다.
나중에 정규 표현식을 주제로 블로그 작성해봐도 좋을 것 같다.

https://designjava.tistory.com/79

const emailPattern = /^[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*.[a-zA-Z]{2,3}$/i;
const idPattern = /^[A-Za-z]{1}[A-Za-z0-9]{3,19}$/;
const pwPattern = /^(?=.*[a-zA-Z])(?=.*[!@#$%^*+=-])(?=.*[0-9]).{8,16}$/;
const userNamePattern = /^[가-힣]{2,4}$/;
const phonePattern = /(^02.{0}|^01.{1}|[0-9]{3})([0-9]+)([0-9]{4})/g;

ex) emailPattern.test(value) -> value 값이 사용 가능한 값이라면, true를 반환한다.

오늘 배운 것들

‣ 정규표현식
‣ useHistory

내일 할 일

‣ 리액트 공부