Day17

axios

어제 밤에 계속 nodejs-React 연결에 대해서 찾아보고 axios에 대해서 찾아보았다. (16일차의 무수한 참고사이트..)
그리고 오늘 아침 테스트에 성공했다 ㅠ_ㅠ!!! 너무나 감격...

    const onClickSubmit = () => {
        axios.post("http://localhost:8080/signUp", {
            email: Inputs.email,
            nickname: Inputs.nickname,
            password: Inputs.password
        })
        .then((response) => {
            console.log(response.data.message)
        }).catch((error) => {
            console.log(error)
        })
    }

백엔드 로직은 좀 복잡해보이지만 front 상에서 어려운 점은 없었다!

회원가입 기능

이제 연결이 됐으니 기능을 만든다.
일단 가입성공했을 때 사용할 alert 라이브러리를 찾았다.

Alert
https://sweetalert2.github.io/#icons
Modal
https://evergreen.segment.com/components/dialog

빈칸을 경고해주는 require 기능의 존재를 알았다!!
pattern으로 입력한 값을 정규식으로 검증해줄 수도 있다.
그런데 oninvalid 속성은 안먹는다. 하.....지만 해결했다.

onInvalid={e => e.target.setCustomValidity('Enter User Name Here')}
onInput={e => e.target.setCustomValidity('')}

리액트에서는 이렇게 작성해야한다고 한다.

form 입력 형식을 다 지정해준 후, 가입에 성공하면 팝업을 띄우고 로그인페이지로 이동하기위해 navigation을 사용했다.

백엔드와 계속 교류하며 작업을 하니 맞춰갈 것도 정해야 할 것도 많았지만 백엔드의 구조도 이해할 수 있으면서 너무너무 유익하고 재미있었다😊
직접 코드를 같이 생각하면서 같이 만들어가는 느낌이 좋았다.

회원가입 페이지는 조건을 줄 게 많아서 골치가 좀 아팠지만 한번 경험했으니 다른 페이지들은 더 빨리 작업할 수 있겠지..?(제발)

---

참고 사이트
require 속성 사용법
HTML 태그 (Input태그 속성{pattern,required,autofocus,placeholder})
oninvalid attribute not rendering in React js
react 에서 navigate 사용하기 (useNavigate / Navigate)