55일차 내용 정리

채공부·2025년 8월 8일

JAVA & JSP & JavaScript

비밀번호 검증

  • signup.jsp 코드 추가
<div class="mb-2">
	<label class="form-label" for="pwd">비밀번호</label>
	<input class="form-control" type="password" name="pwd" id="pwd"/>
	<small class="form-text">특수 문자를 하나 이상 조합하세요.</small>
	<div class="invalid-feedback">비밀 번호를 확인 하세요</div>
</div>
<div class="mb-2">
	<label class="form-label" for="pwd2">비밀번호 확인</label>
	<input class="form-control" type="password" id="pwd2"/>
</div>

정규표현식에서 줄인 표현

  1. 특수문자가 아닌 한글자 : [a-zA-Z0-9_] ➜ [\w]

  2. 특수문자 한글자 : [^a-zA-Z0-9_] ➜ [\W]

  3. 숫자 한글자 : [0-9] ➜ [\d]

  4. 숫자가 아닌 한글자 : [^0-9] ➜ [\D]

  5. 공백 한글자 : [ ] ➜ [\s]

  6. 공백이 아닌 한글자 : [^ ] ➜ [\S]

// 함수를 미리 만들어서 
const checkPwd = ()=>{
			
	// 비밀 번호를 검증할 정규 표현식(특수문자 포함여부)
	const reg_pwd=/[\W]/;
			
	// 양쪽에 입력한 비밀번호를 읽어와서
	let pwd=document.querySelector("#pwd").value;
	let pwd2=document.querySelector("#pwd2").value;
			
	// 일단 is-valid 와 is-invalid 클래스를 제거를 먼저하고 
	document.querySelector("#pwd").classList.remove("is-valid", "is-invalid");
			
	// 일단 정규표현식을 만족하는지 확인해서 만족하지 않으면 함수를 여기서 종료
	// 만일 첫번째 비밀번호가 정규표현식을 통과하지 못하거나 또는 두번째 비밀번호가 정규표현식을 통과하지 못한다면
	if( !reg_pwd.test(pwd) || !reg_pwd.test(pwd2) ){
		document.querySelector("#pwd").classList.add("is-invalid");
		return;
	}
			
	if(pwd == pwd2){
		document.querySelector("#pwd").classList.add("is-valid");
	}else{
		document.querySelector("#pwd").classList.add("is-invalid");
	}
};

// 비밀번호 혹은 비밀번호 확인란에 입력 했을때 동일한 함수가 호출되도록 한다
document.querySelector("#pwd").addEventListener("input", checkPwd);
document.querySelector("#pwd2").addEventListener("input", checkPwd);

이메일 검증

<div class="mb-2">
	<label class="form-label" for="email">이메일</label>
	<input class="form-control" type="email" name="email" id="email"/>
	<div class="invalid-feedback">이메일 형식에 맞게 입력하세요.</div>
</div>
document.querySelector("#email").addEventListener("input", (e)=>{
			
	//이메일을 검증할 정규 표현식
	const reg_email=/@/;
			
	//입력한 문자열 읽어오기  (e.target 은 이벤트가 발생한 바로 그 요소의 참조값이다)
	const email=e.target.value;
			
	//일단 is-valid 와 is-invalid 클래스를 제거를 먼저하고 
	document.querySelector("#email").classList.remove("is-valid", "is-invalid");
			
	if(reg_email.test(email)){
		document.querySelector("#email").classList.add("is-valid");
	}else{
		document.querySelector("#email").classList.add("is-invalid");
	}
});

유효성 여부 관리

<button class="btn btn-primary btn-sm" type="submit" disabled>가입</button>
// 아이디 유효성 여부를 관리할 변수
let isIdValid = false;
// 비밀번호 유효성 여부를 관리할 변수
let isPwdValid = false;
// 이메일 유효성 여부를 관리할 변수
let isEmailValid = false;

const checkForm = () => {
	// 만일 아이디도 유효하고 그리고 비밀번호도 유효하고 그리고 이메일도 유효하다면
	if(isIdValid && isPwdValid && isEmailValid){
		// 전송 버튼에 disabled 속성을 제거하고
		document.querySelector("[type=submit]").removeAttribute("disabled");				
	}else{
		// 전송 버튼에 disabled 속성을 추가한다
		document.querySelector("[type=submit]").setAttribute("disabled", "");
	}
			
};
  • 함수에 코드 추가
document.querySelector("#userName").addEventListener("input", (e)=>{
	// 현재까지 입력한 아이디를 읽어온다.
	const inputId = e.target.value;
	// "영문자 소문자로 시작하고 5글자~10글자 이내로 입력" 이 검증조건을 만족했는지 여부를 알아낸다
	const reg = /^[a-z].{4,9}$/;
	// 만일 정규 표현식을 통과 하지 못했다면 
	if(!reg.test(inputId)){
		e.target.classList.remove("is-valid");
		e.target.classList.add("is-invalid");
		//사용할수 없는 아이디라는 의미에서 false 를 넣어준다.
		isIdValid=false;
		checkForm();
		return; //함수를 여기서 종료하기 
	}
	// fetch() 함수를 이용해서 get 방식으로 입력한 아이디를 보내고 사용가능 여부를 json 으로 응답받는다.
	fetch("check-id.jsp?inputId="+inputId)
	.then(res=>res.json())
	.then(data=>{
		// 일단 is-valid , is-invalid 클래스를 제거하고
		e.target.classList.remove("is-valid", "is-invalid");
		// data 는 {canUse:true} 또는 {canUse:false} 구조의 object 이다
		if(data.canUse){ //사용가능 하다면
			e.target.classList.add("is-valid");
			// 사용할수 있는 아이디라는 의미에서 true 를 넣어준다
			isIdValid = true;
		}else{//사용가능 하지 않다면 
			e.target.classList.add("is-invalid");
			//사용할수 없는 아이디라는 의미에서 false 를 넣어준다
			isIdValid = false;
		}
		checkForm();
	});
});
// 함수를 미리 만들어서 
const checkPwd = ()=>{
			
	// 비밀 번호를 검증할 정규 표현식(특수문자 포함여부)
	const reg_pwd=/[\W]/;
			
	// 양쪽에 입력한 비밀번호를 읽어와서
	let pwd=document.querySelector("#pwd").value;
	let pwd2=document.querySelector("#pwd2").value;
			
	// 일단 is-valid 와 is-invalid 클래스를 제거를 먼저하고 
	document.querySelector("#pwd").classList.remove("is-valid", "is-invalid");
			
	// 일단 정규표현식을 만족하는지 확인해서 만족하지 않으면 함수를 여기서 종료
	// 만일 첫번째 비밀번호가 정규표현식을 통과하지 못하거나 또는 두번째 비밀번호가 정규표현식을 통과하지 못한다면
	if( !reg_pwd.test(pwd) || !reg_pwd.test(pwd2) ){
		document.querySelector("#pwd").classList.add("is-invalid");
		isPwdValid = false;
		checkForm();
		return;
	}
			
	if(pwd == pwd2){
		document.querySelector("#pwd").classList.add("is-valid");
		// 비밀번호가 유효하다는 의미에서 true 를 넣어준다
		isPwdValid = true;
				
	}else{
		document.querySelector("#pwd").classList.add("is-invalid");
		// 비밀번호가 유효하지 않다는 의미에서 false 를 넣어준다
		isPwdValid = false;
	}
	checkForm();
};
document.querySelector("#email").addEventListener("input", (e)=>{
	//이메일을 검증할 정규 표현식
	const reg_email=/@/;
			
	//입력한 문자열 읽어오기  (e.target 은 이벤트가 발생한 바로 그 요소의 참조값이다)
	const email=e.target.value;
			
	//일단 is-valid 와 is-invalid 클래스를 제거를 먼저하고 
	document.querySelector("#email").classList.remove("is-valid", "is-invalid");
			
	if(reg_email.test(email)){
		document.querySelector("#email").classList.add("is-valid");
		isEmailValid = true;
	}else{
		document.querySelector("#email").classList.add("is-invalid");
		isEmailValid = false;
	}
	checkForm();
});

blur

  • 포커스를 잃었을 때 발생하는 이벤트
document.querySelector("#userName").addEventListener("blur", (e)=>{

HTTP 상태 코드별 에러 페이지 맵핑

➜ forward 이동시킬 때 페이지

  • web.xml 코드 축가
<error-page>
	<error-code>404</error-code>
	<location>/error/404.jsp</location>
</error-page>
<error-page>
	<error-code>500</error-code>
	<location>/error/500.jsp</location>
</error-page>
<error-page>
	<error-code>403</error-code>
	<location>/error/403.jsp</location>
</error-page>
  • SecurityFilter 의 isWhiteList 메소드에 코드 추가
// 에러 페이지
if(path.startsWith("/error")) return true;
  • 404.jsp 생성
<div class="container text-center py-5">
	<h1 class="display-3 text-danger">404</h1>
	<h2 class="mb-3">페이지를 찾을 수 없습니다</h2>
	<p class="text-muted mb-4">요청하신 페이지가 존재하지 않거나 이동되었을 수 있습니다.</p>
	<a href="<%= request.getContextPath() %>/" class="btn btn-primary btn-lg">메인 페이지로 이동</a>
</div>

  • 500.jsp 생성
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8" isErrorPage="true"%>
<%--
	isErrorPage = "true" 속성을 추가하면 exception 객체를 사용할 수 있다
	exception 객체에는 예외의 정보가 들어 있다
 --%>
  <%
 	// 에러 메세지를 얻어낼 수 있다
 	// String errMsg = exception.getMessage();
 %>
<div class="container text-center py-5">
	<h1 class="display-3 text-danger">500</h1>
	<h2 class="mb-3">서버 내부 오류가 발생했습니다</h2>
	<p class="text-muted mb-4">잠시 후 다시 시도해 주세요.</p>
	<% if (exception != null) { %>
		<div class="alert alert-warning text-start mx-auto" style="max-width: 600px;">
			<strong>오류 메시지:</strong> <%= exception.getMessage() %>
		</div>
	<% } %>
	<a href="<%= request.getContextPath() %>/" class="btn btn-primary btn-lg">메인 페이지로 이동</a>
</div>

  • 403.jsp 생성
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8" isErrorPage="true"%>
<div class="container text-center py-5">
	<h1 class="display-3 text-danger">403</h1>
	<h2 class="mb-3">접근이 거부되었습니다</h2>
	<p class="text-muted mb-4">이 페이지에 접근할 권한이 없습니다.</p>
	<% if (exception != null) { %>
		<div class="alert alert-warning text-start mx-auto" style="max-width: 600px;">
			<strong>오류 메시지:</strong> <%= exception.getMessage() %>
		</div>
	<% } %>
	<a href="<%= request.getContextPath() %>/" class="btn btn-primary btn-lg">메인 페이지로 이동</a>
</div>

profile
채공부
학원 공부 내용 정리
이전 포스트

54일차 내용 정리

다음 포스트

56일차 내용 정리

0개의 댓글