frontend

[frontend] 간단한 실습을 통한 로그인 유효성 검사

cominuna 2025. 3. 19. 21:16

1. 유효성 검사란? 

유효성 검사는 사용자가 입력한 값이 서버로 넘어가기 전에 올바른지 확인하는 과정입니다.

왜 프론트엔드 유효성 검사가 중요할까요?

  • 사용자 경험 향상: 즉각적인 피드백 제공합니다.
  • 서버 부하 감소: 불필요한 요청을 줄여 서버 부담 감소시킵니다.
  • 네트워크 비용 절감: 잘못된 데이터 전송 방지합니다.

왜 백엔드 유효성 검사도 필수일까요?

  • 데이터 무결성 보장: 잘못된 데이터 저장 방지합니다.
  • 보안 강화: 악의적인 공격 방어 (예: SQL Injection, XSS 등)합니다.
  • 비즈니스 로직 적용: 백엔드에서만 검증 가능한 로직 처리합니다.

유효성 검사 기준

  • 필수 입력 필드 확인
  • 데이터 형식 검증 (예: 이메일 형식, 숫자 범위 등)
  • 일관성 체크 (예: 비밀번호 확인 일치 여부)
  • 특정 조건 만족 (예: 최소/최대 길이, 패턴 일치 여부)

2. 유효성 검사 작동 원리

유효성 검사는 클라이언트 측과 서버 측에서 모두 수행됩니다.

클라이언트 측 유효성 검사

클라이언트에서 먼저 입력 데이터를 검사하여 잘못된 요청을 미리 확인합니다.

+------------------------+
|  사용자가 폼에 데이터 입력   |
+----------+-------------+
           |
           v
+------------------------+
|    입력 데이터 수집        |
+----------+-------------+
           |
           v
+------------------------+
|     유효성 검사 규칙 적용   |
|     (정규 표현식, 조건문)   
+----------+-------------+
           |
           v
+------------------------+
|   유효성 검사 통과 여부 확인 |
+----------+-------------+
           |                |
           |                v
           |       +------------------------+
           |       |   유효하지 않은 경우       |
           |       |   사용자에게 피드백 제공    |
           |       | (알림 메시지)            |
           |       +------------------------+
           |
           v
+------------------------+
|     유효한 경우 폼 제출    |
|     (서버로 데이터 전송)   |
+------------------------+

서버 측 유효성 검사

클라이언트에서 1차 검증 후 서버에서도 유효성을 다시 확인한다.

+------------------------+
|     서버에서 데이터 수신    |
+----------+-------------+
           |
           v
+------------------------+
|     유효성 검사 규칙 적용   |
|    (서버 측 규칙)         |
+----------+-------------+
           |
           v
+------------------------+
|   유효성 검사 통과 여부 확인 |
+----------+-------------+
           |                |
           |                v
           |       +------------------------+
           |       |   유효하지 않은 경우       |
           |       |  에러 메시지 반환         
           |       |  (클라이언트로)           |
           |       +------------------------+
           |
           v
+------------------------+
|      유효한 경우 데이터 처리 |
|    (회원가입 등)          |
+------------------------+

 

클라이언트 측 유효성 검사 (JavaScript)

1.사용자 입력 데이터 수집

:사용자가 폼에 데이터를 입력하면, 자바스크립트를 통해 해당 데이터를 수집합니다

const email = document.getElementById("email").value;
const password = document.getElementById("password").value;
const confirmPassword = document.getElementById("confirmPassword").value;

 

2.유효성 검사 규칙 적용

:정규 표현식이나 조건문을 사용하여 입력 데이터가 규칙을 충족하는지 확인합니다.

function validateEmail(email) {
    // 이메일 정규 표현식을 const 키워드로 선언하여 재할당 방지
    const re = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
    // 이메일을 소문자로 변환한 후 정규 표현식과 일치하는지 확인
    return re.test(String(email).toLowerCase());
}

 

validateEmail 함수는 정규 표현식을 사용하여 이메일 형식이 올바른지 확인합니다.

re.test(String(email).toLowerCase())는 입력된 이메일이 정규 표현식에 맞는지 검사합니다.

 

3.유효성 검사 통과 여부 확인

:유효성 검사를 통과했는지 확인하고, 통과하지 못한 경우 피드백을 제공합니다.

if (!validateEmail(email)) {
    alert("올바른 이메일 형식을 입력해주세요.");
    event.preventDefault();
}

 

 

4.유효한 경우 폼 제출

: 모든 유효성 검사를 통과하면 폼을 제출하고, 데이터를 서버로 전송합니다.

document.getElementById("signupForm").addEventListener("submit", function(event) {
    if (/* 모든 검사 통과 */) {
        // 폼 제출
    } else {
        event.preventDefault();
    }
});

서버 측 유효성 검사 (Node.js)

1.서버에서 데이터 수신

:클라이언트에서 전송한 데이터를 서버에서 수신합니다.

클라이언트가 POST 요청으로 전송한 데이터를 req.body에서 추출합니다.

app.post('/signup', (req, res) => {
    const { name, email, password, confirmPassword } = req.body;
});

 

2.유효성 검사 규칙 적용

:서버 측에서 동일한 유효성 검사 규칙을 적용하여 입력 데이터가 유효한지 확인합니다.

유효하지 않은 이메일 형식이면 400 Bad Request 상태 코드와 함께 에러 메시지를 반환합니다.

function validateEmail(email) {
    const re = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
    return re.test(String(email).toLowerCase());
}

if (!validateEmail(email)) {
    return res.status(400).send('올바른 이메일 형식이 아닙니다.');
}

 

3.유효성 검사 통과 여부 확인

:유효성 검사를 통과했는지 확인하고, 통과하지 못한 경우 에러 메시지를 반환합니다.

if (password !== confirmPassword) {
    return res.status(400).send('비밀번호가 일치하지 않습니다.');
}

 

 

4.유효한 경우 데이터 처리

:유효성 검사를 통과한 데이터에 대해서만 회원가입 등의 처리를 진행합니다.

유효한 데이터라면 새 사용자를 생성하여 데이터베이스 또는 메모리 내에 저장합니다.

const newUser = { name, email, password };
users.push(newUser);
res.send('회원가입이 성공적으로 완료되었습니다.');

 

3.유효성 검사 종류

1.기본 유효성 검사

폼 페이지에 입력된 데이터 값의 존재 유무를 검사합니다.

예를 들어, 사용자가 필수 입력 필드를 비워두지 않았는지 , 필수 입력 필드가 비어 있지 않은지, 값이 너무 짧거나 긴지 등을 확인합니다.

if (document.frm.name.value == "") {
    alert("이름을 입력해주세요.");
    document.frm.name.focus();
    return false;
}

 

2.데이터 형식 유효성 검사

데이터 형식 유효성 검사는 입력 값이 특정 형식에 맞는지를 검증합니다.

정규 표현식을 사용하여 이메일, 전화번호, 비밀번호 등의 형식을 검사합니다.

예시:이메일 형식 검사

function validateEmail(email) {
    const re = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,}$/;
    return re.test(String(email).toLowerCase());
}

if (!validateEmail(document.frm.email.value)) {
    alert("올바른 이메일 형식을 입력해주세요.");
    document.frm.email.focus();
    return false;
}

 

4.간단한 실습: 회원가입 폼 유효성 검사

1.HTML - 회원가입 폼 만들기

아래는 간단한 회원가입 폼 코드입니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Signup Form</title>
</head>
<body>
    <form id="signupForm" action="http://localhost:3000/signup" method="POST">
        <label for="email">Email:</label>
        <input type="text" id="email" name="email" required><br>
        <label for="password">Password:</label>
        <input type="password" id="password" name="password" required><br>
        <label for="confirmPassword">Confirm Password:</label>
        <input type="password" id="confirmPassword" name="confirmPassword" required><br>
        <button type="submit">Sign Up</button>
    </form>
</body>
</html>​
  • required 속성을 사용해 필수 입력값으로 지정했습니다.
  • JavaScript를 이용해 입력값이 올바른지 검사할 예정입니다.

2. JavaScript - 유효성 검사 추가하기

사용자가 올바른 이메일을 입력했는지 확인하고, 비밀번호와 확인 비밀번호가 일치하는지 검사합니다.

document.getElementById("signupForm").addEventListener("submit", function(event) {
    const email = document.getElementById("email").value;
    const password = document.getElementById("password").value;
    const confirmPassword = document.getElementById("confirmPassword").value;

    // 이메일 유효성 검사 함수
    function validateEmail(email) {
        const re = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
        return re.test(String(email).toLowerCase());
    }

    if (!validateEmail(email)) {
        alert("올바른 이메일 형식을 입력해주세요.");
        event.preventDefault();
    } else if (password !== confirmPassword) {
        alert("비밀번호가 일치하지 않습니다.");
        event.preventDefault();
    } else {
        alert("유효성 검사를 통과했습니다!");
    }
});
  • validateEmail() 함수에서 정규 표현식(Regex) 을 사용해 이메일 형식을 검증합니다.
  • preventDefault()를 사용해 잘못된 입력이 감지되면 폼 제출을 막습니다.

3. Express.js 서버 - 데이터 받기 및 검증

백엔드에서도 데이터 유효성을 한 번 더 확인합니다.

const express = require('express');
const bodyParser = require('body-parser');
const app = express();
const users = [];

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));

// 이메일 유효성 검사 함수
function validateEmail(email) {
    const re = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
    return re.test(String(email).toLowerCase());
}

app.post('/signup', (req, res) => {
    const { email, password, confirmPassword } = req.body;

    if (!validateEmail(email)) {
        return res.status(400).send('올바른 이메일 형식이 아닙니다.');
    }

    if (password !== confirmPassword) {
        return res.status(400).send('비밀번호가 일치하지 않습니다.');
    }

    const newUser = { email, password };
    users.push(newUser);
    res.send('회원가입이 성공적으로 완료되었습니다.');
});

app.listen(3000, () => {
    console.log('서버가 3000번 포트에서 실행 중입니다.');
});
  • 백엔드에서도 이메일 형식 및 비밀번호 일치 여부를 다시 검증합니다.
  • 보안을 위해 실제 프로젝트에서는 비밀번호를 암호화(hash) 해야 합니다.
  • 서버는 3000번 포트에서 실행됩니다.

 

 

postman에서 확인해본 결과

'frontend' 카테고리의 다른 글

[frontend] 번들링에 대해 알아보기  (0) 2025.03.09
[frontend] MSW 알아보기!  (0) 2025.02.26
[frontend] virtual dom 이란?  (2) 2025.02.24

'frontend'의 다른글

  • 현재글[frontend] 간단한 실습을 통한 로그인 유효성 검사

관련글

티스토리툴바