React 회원가입 APi 구현

프론트엔드를 공부하면 취업을 준비하는 신입 개발자 입니다.
이글은 제가 공부하면서 알게 된 정보를 정리 용도라는걸 미리 알려드립니다.

간략한 예시의 코드로 글을 작성해보겟습니다.

유효성 검사 API

유효성 검사

회원 가입을 하기 위해서는 우선 가입에 필요한 정보들을 사용자에게 받고
그 정보가 유효한지에 대한 검사를 진행 해야합니다.

1. onChange 이벤트를 사용 하여
   사용자 입력한 정보를 바탕으로 검사를 진행하게됩니다.

ex) 사용자 이메일 체크 인풋

 <Input
              required                   
              placeholder='goingbuying@gmail.com'
              value={email}
              onChange={(e) => onEmailCheck(e)}
            />
            {error}

onChabge 이벤트 코드입니다.

const onEmailCheck = (e) => {
    const value = (e.currentTarget.value) ?? '';
     setPassword(value);
     
     // 이메일 정규식 검사
    const emailRegex = /^[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*\.[a-zA-Z]{2,3}$/i;
    
      if (value === '') {
        setEmailMessage('이메일을 입력해주세요.');
        setValidation(!validation);
      } else if (!emailRegex.test(value)) {
        setEmailMessage('이메일 형식이 맞지 않습니다.');
        setValidation(!validation);
      } else {
        setValidation(validation);
        setEmailMessage('');
        getCheckEmailMessage(email);
      }
  };

• 코드의 유효성 검사를 통해 판단을 내려줄 Validation 이 필요합니다.
• 만약 조건에 맞지 않다면 표기를 해줄 error 메세지가 있어야합니다.
• 서버와 통신하여 유효한(중복) 검사를 해줄 API 가 필요합니다.

1. Validation

Validation의 경우 모든 형식이 맞다면 true 값을 줍니다.

2. error message

error message의 경우 리액트 조건부 랜더링을 이용하여 조건이 맞지 않을시 보여줍니다.

3. 서버와 통신하여 중복검사를 해줄 코드를 작성

 const getCheckEmailMessage () => {
   axios.post(`통신할 서버 URL` , {
     method: "post",
     headers: {
        // 서버 api 에서 명시해준 type 
        "Content-type": "application/json" 
     }
     params: {
        email : email ?? "",
     }
   })
   return axios
 }

회원 가입 API

회원 가입 API 를 작성

 const Signup = () => {
    axios.post({
      url: 연결할 서버의 URL,
      method: "post",
      headers: {
        "Content-type": "application/json" 
      },
      data: {
       // email의 value
        email: email ?? '',     
      })
      .then((res) => {
      // 모든 유호성 검사가 true 라면
         if (validation) {
         // 발급 받은 유저 정보 (토큰 등등)를 로컬스토리지에 담아준다.
 window.localStorage.setItem('signupResponseData', JSON.stringify(res.data));
          // 회원가입 완료 페이지로 이동 시켜준다.
          router.push('/join/complete');
        }
      })
    }
    return axios;
  },
};

작성한 API를 회원 가입 완료 버튼에 적용시켜줍니다.

 <button onClick={() => Signup()} />

최종 정리

• 유효성 검사 API 를 작성 해주어 서버에 중복된 아이디를 체크해줘야한다.

• 회원 가입 API 를 작성하여 모든 유효성 가입을 통과한다면 회원 가입을 시켜준다.