• frontend 폴더구조

├── README.md
├── next-env.d.ts
├── next.config.js
├── package.json
├── pages
│   ├── _app.tsx
│   ├── _document.tsx
│   ├── globals.css
│   ├── index.tsx
│   └── user
│       └── register.tsx
├── postcss.config.js
├── public
│   ├── next.svg
│   └── vercel.svg
├── tailwind.config.ts
├── tsconfig.json
└── yarn.lock

이번 포스팅은 회원가입 시 동작하기 때문에 register.tsx안에서 이루어집니다.

1. 유효화 함수 작성

1-1 정규식 작성

형식을 검사하는 정규식을 사용한 함수 3개(이메일,비밀번호,전화번호)를 작성하겠습니다.

function validateEmail(email: string): boolean {
    const emailRegEx = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    return emailRegEx.test(email);
  }

  function validatePassword(pwd: string): boolean {
    const passwordRegEx = /^[A-Za-z0-9]{8,20}$/;
    // 영어 대소문자와 숫자가 포함되어야 하며 8~20자 이내 비밀번호
    return passwordRegEx.test(pwd);
  }

  function validatePhone(phone: string): boolean {
    const passwordRegEx = /^[0-9]{3}-[0-9]{4}-[0-9]{4}$/;
    return passwordRegEx.test(phone);
  }
  // 정규식에 맞는지 검사를 boolean타입의 값을 반환합니다.

return된 값들을 가진 validate객체를 생성해 관리하겠습니다.

const validation = {
  isEmailValid: validateEmail(formData.email),
  isPasswordValid: validatePassword(formData.pwd),
  isPhoneValid: validatePhone(formData.phone),
}

현재 input창에 입력된 값들은 formData에 저장되고 그 값을 기준으로 검사합니다.

1-2. span태그 작성

이처럼 검사값에 따른 메세지를 적어주기 위한 span태그를 작성하겠습니다.

validation객체의 is~~Valid가 true일 경우 '올바른 형식입니다' 를 띄워주고 아닐경우엔 '형식이 올바르지 않습니다' 를 띄워주겠습니다.

<label htmlFor="pwd">Password</label>
				<input
					className='p-2 border border-gray-300 rounded-lg mb-4 focus:outline-none focus:border-gray-600 bg-persevi-grey text-black'
					id="pwd"
					type="password"
					placeholder="비밀번호"
		            onChange={onChange}
					required
				/>

기존의 비밀번호, 이메일, 전화번호 input태그입니다. label 태그밑에 span태그를 작성해주고 삼항연산자를 통해 조건부렌더링을 하겠습니다.

<label htmlFor="pwd">Password</label>
	      <span
          className={`${validation.isPasswordValid ? 'text-persevi-blue' : 'text-red-500'}`}>
          {validation.isPasswordValid ? '올바른 비밀번호 형식입니다.'
          : formData.pwd === '' ? ''
          :'비밀번호 형식이 올바르지 않습니다.'}
        </span>
				<input
					className='p-2 border border-gray-300 rounded-lg mb-4 focus:outline-none focus:border-gray-600 bg-persevi-grey text-black'
					id="pwd"
					type="password"
					placeholder="비밀번호"
          onChange={onChange}
					required
				/>

validation.isPasswordValid가 true일 경우엔 파란색이 적용되며 '올바른 비밀번호 형식입니다.'라는 문구가 출력됩니다. false일 경우엔 빨간색이 적용되며 '비밀번호 형식이 올바르지 않습니다.'라는 문가가 출력됩니다. 만약 input이 비어있다면 아무런 문구를 출력하지 않습니다.

이를 이메일과 전화번호 input에도 적용합니다.

1-3 Submit시 알람 띄우기

form태그에 onSubmit속성에 적용되고있는 함수에 추가해주겠습니다.

원래 작성되어있던 코드를 if문으로 감싸주면 됩니다.

원래 onSubmit함수

const onSubmit = (e: FormEvent<HTMLFormElement>) => {
      e.preventDefault();
        axios
          .post('http://localhost:3099/api/user/register', formData)
          .then(res => {
            setMsg(res.data.msg);
          })
          .catch(e => {
            console.log(e);
          }); 
		}

수정된 onSubmit함수

const onSubmit = (e: FormEvent<HTMLFormElement>) => {
      e.preventDefault();
      if (validation.isPasswordValid && validation.isEmailValid && validation.isPhoneValid) {
        axios
          .post('http://localhost:3099/api/user/register', formData)
          .then(res => {
            setMsg(res.data.msg);
          })
          .catch(e => {
            console.log(e);
          });
      } else {
      alert('비밀번호, 이메일, 전화번호 형식을 확인해주세요.')
      }
		}

비밀번호, 이메일, 전화번호 형식이 유효할 경우에만 요청을 보내고 아닐 경우에는 알람을 띄웁니다.

한번 테스트해보겠습니다.

2. 결과

일부러 틀린 형식을 입력했을 경우 span태그와 알람이 작동되며 화면이 넘어가지 않습니다.

이제 바른 형식을 입력해보겠습니다.

회원가입이 완료되었습니다. db를 확인해보겠습니다.

mysql> select * from user;
+---------+-----------+----------------+-----------+--------------------------------------------------------------+-----------+---------------+---------+------------+---------+------+-------+
| user_id | name      | email          | uid       | pwd                                                          | nickname  | phone         | address | birth      | banknum | bank | grade |
+---------+-----------+----------------+-----------+--------------------------------------------------------------+-----------+---------------+---------+------------+---------+------+-------+
|       1 | test      | test@test.com  | test      | $2b$10$EMI6bBM/r9x8DQOyz24qieGJxc8vE3.wi8/IC6mbHJ42kMcr2QKFu | test      | 010-1111-1111 | N/A     | 2024-01-01 | N/A     | N/A  |     0 |
|       2 | test2     | test2@test.com | test2     | $2b$10$ZSodDFSVrELLlTaw5Hghye4DoyIPjURaSwjz.rF/PANo/k11qHTZe | test2     | 010-2222-2222 | N/A     | 2023-12-31 | N/A     | N/A  |     0 |
|       3 | bumgu     | asdf@naver.com | bumgu     | $2b$10$VjfSdmup6hWtKncu.0XyEex9ep0eQ9m9fWYwPajVFzm0tnHzMJzVO | bumgu     | 010-1111-1111 | N/A     | 2024-01-01 | N/A     | N/A  |     0 |
|       4 | validTest | test@valid.com | validTest | $2b$10$xlrS7ZolXDx0vel8iuVGAuAqVm00HzUeyJJ7Ra.y1Urx41sq2c6xC | validTest | 010-1234-1234 | N/A     | 2024-01-01 | N/A     | N/A  |     0 |
+---------+-----------+----------------+-----------+--------------------------------------------------------------+-----------+---------------+---------+------------+---------+------+-------+

입력한 validTest가 잘 저장된것을 확인 할 수 있습니다.

이번 포스팅은 여기서 마치겠습니다. 감사합니다.