** 📌유효성 검사 (JavaScript + 서버 측 검사 병행) **

사용자 입력값을 정확하게 검증하여 안정적이고 안전한 웹 서비스 만들기

JavaScript와 Java(Servlet)의 유효성 검사 병행 처리 흐름 완전 정리

---

🧩 목차

1. 유효성 검사란?
2. 클라이언트 vs 서버 유효성 비교
3. JavaScript 유효성 검사 예제
4. 서버 측 유효성 검사 예제
5. 병행 처리 흐름도
6. 실전 예제 흐름
7. 기술 면접 대비 핵심 요약
8. 마무리 요약 + Notion 작성 팁

---

✅ 1. 유효성 검사란?

항목	설명
정의	사용자의 입력값이 빈값, 형식 오류, 범위 오류 없이 정상인지 확인하는 절차
목적	서비스의 안정성 확보, 보안 문제 방지 (SQL Injection, 잘못된 입력 차단 등)
적용 위치	클라이언트(JavaScript) + 서버(Servlet) 양쪽 모두에서 진행 필요

---

✅ 2. 클라이언트 vs 서버 유효성 검사 비교

구분	클라이언트 측 (JS)	서버 측 (Servlet)
검사 위치	브라우저	서버 내부
속도	빠름 (입력 즉시 반응)	상대적으로 느림
보안성	낮음 (JS 꺼짐 가능)	높음
필수 여부	편의성 중심	보안상 반드시 필요

📌 둘 다 함께 사용해야 함!

→ JS는 빠르고 편리한 확인용, 서버는 진짜 필수 보안 방어용!

---

✅ 3. JavaScript 유효성 검사 예제✍️

📄 form.jsp

<script>
function validateForm() {
  const title = document.getElementById("title").value;
  const content = document.getElementById("content").value;

  if (title.trim() === "") {
    alert("제목을 입력하세요!");
    return false;
  }
  if (content.trim() === "") {
    alert("내용을 입력하세요!");
    return false;
  }
  return true;
}
</script>

<form action="save" method="post" onsubmit="return validateForm()">
  제목: <input type="text" name="title" id="title"><br>
  내용: <textarea name="content" id="content"></textarea><br>
  <input type="submit" value="저장">
</form>

---

✅ 4. 서버 측 유효성 검사 예제 (Servlet)

📄 SaveServlet.java

protected void doPost(HttpServletRequest req, HttpServletResponse resp)
    throws ServletException, IOException {

  req.setCharacterEncoding("UTF-8");

  String title = req.getParameter("title");
  String content = req.getParameter("content");

  // 유효성 검사
  if (title == null || title.trim().equals("") ||
      content == null || content.trim().equals("")) {
    resp.setContentType("text/html;charset=UTF-8");
    PrintWriter out = resp.getWriter();
    out.println("<script>");
    out.println("alert('제목과 내용을 모두 입력하세요.'); history.back();");
    out.println("</script>");
    return;
  }

  // 통과 시 DB 저장 로직 수행
  BoardDTO dto = new BoardDTO();
  dto.setTitle(title);
  dto.setContent(content);

  BoardDAO dao = new BoardDAO();
  dao.insert(dto);

  resp.sendRedirect("list");
}

---

✅ 5. 병행 처리 흐름도 🧭

[사용자 입력]
 ⬇ (onsubmit 시 JS 검사)
[JavaScript 유효성 검사]
 ⬇ (통과 시 서버 요청)
[Servlet doPost()]
 ⬇
[서버 유효성 검사 재확인]
 ⬇
[DB 저장 or 오류 메시지 출력]

---

✅ 6. 실전 예제 흐름 요약

단계	파일	역할
1	form.jsp	JavaScript로 필수값 검사 (빈칸 확인 등)
2	onsubmit="return validateForm()"	false 반환 시 전송 중단
3	SaveServlet.java	입력값 null/빈칸 재확인 (보안상 필수)
4	통과 시 → DTO 저장 → DAO 호출 → DB 저장
5	실패 시 → alert() 후 history.back(); 으로 폼으로 되돌림

---

✅ 7. 기술 면접 대비 핵심 요약 💬

질문	요점 정리
유효성 검사는 왜 해야 하나요?	입력값 오류 방지, 보안 유지, 사용자 편의 향상
JS만 검사하면 안 되나요?	JS는 꺼질 수 있음 → 반드시 서버에서도 검사 필요
Java에서 null/빈 문자열 체크는?	`== null
유효성 검사 실패 시 처리 방식은?	alert() + history.back() 또는 오류 페이지 리디렉션

---

✅ 8. 마무리 요약 🧠

• 🧹 JS는 빠른 필터, Servlet은 강력한 방어
• ❌ 검사 누락 시 잘못된 값 저장 또는 보안 이슈 발생
• ✅ 필수 입력값은 클라이언트+서버 모두에서 점검해야 안전함
• 💡 유효성 검사 통과 후에만 DTO → DAO → DB로 연결