JSP를 배워보자!!(유효성 검사)

안녕하세요 여러분~~

오늘은 유효성 검사에 대해 말씀드리겠습니다

유효성 검사라니 말이 복잡해 보이실 수 있지만 좀 더 쉽게 예를 들어 설명해 보자면 회원가입을 할 때에 보면 연락처는 xxx-xxxx-xxxx 이런 형식을 띄고 있잖아요? 그런데 이게 대부분의 사용자는 이렇게 연락처를 쓸 수도 있겠지만 사용자가 실수로 xxx-xxxxx-xx 이런 식으로 쓰고선 전송 버튼을 눌렀는데 그냥 그 데이터가 서버로 갔다고 해볼까요?? 아니면 이렇게 잘못된 데이터도 통과가 되는 것을 본 해커가 서버를 해킹할 수도 있겠죠?

상상만으로 끔찍하겠죠?

바로~야근하는거예요...상사한테 닦이고 예,,,

그래서 프로그램에 어떠한 제한을 두고 어떤 사용자가 사용하더라도 사용자가 개발자의 의도에 맞게끔 사용하게 하는 방법이라고 그렇게 이해하자고요 우리ㅎㅎ

 

그럼 빠르게 한번 유효성 검사 살펴 보겠습니다

 

일단 유효성 검사를 만약에 사용자가 전송한 데이터를 서버에 보낸 뒤에 서버에서 유효성 체크를 하면 사용자가 많아질수록 서버 컴퓨터는 엄청난 부담을 가지게 될 수밖에 없습니다. 한 번에 수천 명이 사용하는 사이트인데 서버 컴퓨터가 그 수천 명의 유효성 검사를 다 한다고 하면 엄청나게 부담을 받겠죠? 이런 게 쌓이면 서버가 다운될 수도 있고요

그래서 클라이언트(사용자)의 컴퓨터에서 웹 브라우저가 스스로 유효성 검사를 하게끔 유도해야 합니다 

그래서 오늘은 아주 야매로 자바스크립트 코드를 볼 것인데요

걱정 안 하셔도 되는 게 자바스크립트에 기본적인 문법은 자바랑 매우 흡사했습니다.

자 지금까지 제 jsp포스팅을 읽어오신 분들은 이 소스코드가 어떤 식으로 이루어지는 것이고 어떻게 출력될 것인지 알 것이라 믿습니다 아주 간단한 코드입니다 그렇죠? 

여기서 오늘 봐야 할 것은 27번째에 있는 "onclick"속성입니다

자바스크립트는 클라이언트(사용자) 사이드 언어입니다

jsp는 서버 사이드 언어인데 위와 같이 작성한 태그와 자바 코드들을 서블릿으로 변환한 후 서버에 처리하는데 그 결과를 HTML로 만들어서 반환하는 언어입니다 이때 JSP내에 자바스크립트 코드가 있다면 JSP가 서블릿으로 변환될 때 자바스크립트 코드를 HTML처럼 있는 그대로 클라이언트에게 보내는 것이죠

 

자 위 굵은 글씨를 이해하셨다면 클라이언트 컴퓨터에서 유효성 검사를 하도록 유도한다라는 말이 성립이 되는 것이죠 ㅎㅎ그래서 jsp안에 유효성검사를 위해 쓰는 자바스크립트 코드를 핸들러 함수라 합니다

그리고 유효성 검사에는 크게 두 가지 방식이 있습니다

기본 유효성 검사: form페이지에 입력된 데이터의 값의 존재 유무 검사

데이터 형식 유효성 검사 :  form페이지에 입력된 데이터 값이 특정 패턴에 적합한지 여부를 검사해서 정규표현식을 사용

기본 유효성 방식에 경우에는 간단하게 if문으로 잡을 수 있겠지만 데이터 형식 유효성 검사는 if문으로 잡기엔 너무 복잡하고 하나의 항목에 엄청나게 많은 조건식이 달릴 수도 있겠죠?

그래서 정규표현식이라는 기호들을 사용해서 간편하게 데이터 형식에 데이터를 유효성 검사하는 것입니다

바로 코드부터 보시죠

자 위 코드는 자바스크립트 코드입니다 첫 번째 사진의 회원가입을 위한 JSP코드와 동일한 파일이고 그 밑에 <script> 태그를 사용해서 자바스크립트 코드를 작성할 공간을 만든 것이죠 차근차근 설명을 드리겠습니다 주석도 꼭 참고해서 봐주세요!

 

31번에 function이 있습니다. 그리고 onclick속성에 값과 같은 값으로 function에 선언돼있습니다. 마치 오버 로딩처럼요

이렇게 위 jsp코드와 자바스크립트 코드를 연동시켜 놓은 다음 이 function안에서 유효성 검사를 하는 코드들이 작성되고 있습니다

 

정규표현식은 정말 깊은 파트라서 좀 더 깊게 공부하고 싶으신 분은 관련 서적을 찾아보시면 좀 더 깊게 알아보실 수 있을 것입니다

var는 자바스크립트에서 변수를 선언할 때 데이터 종류 상관없이 "var 변수명"으로 선언합니다

그래서 간단하게 34에 있는 regExpId변수의 데이터만 보고 넘어가겠습니다

일단 어떤 데이터 형식을 제한할지에 대한 범위와 공간이 있어야겠죠 그래서 두 개의 슬래시 사이에 그 범위를 지정해야 합니다 "//"여기 사이예요

"^"는 ~패턴으로 시작하는지 로 읽으시면 됩니다

그래서 해석해보자면 a-z는 영어 소문자 범위 A-Z는 대문자 범위 ㄱ-ㅎ는 자음ㅏ-ㅣ는모음 가-힣은 한글 문자입니다

그래서 ^를 붙여서 해석하자면 문자로 시작하는지를 체크하고 있는 것입니다

이런 식으로 쭉 데이터 유효성 검사 범위를 지정해주고 있습니다(주석을 참고해주세요!)

그리고 사용자가 서버에 보내는 요청 파라미터의 값을 스크립트로 가져오려면 아래와 같은 함수를 사용해야 합니다

document. 폼 이름. 입력 양식 이름. value

근데 매번 선언할 때마다 위와 같이 하면 불편하니 고정적인 값인 (document. 폼 이름)을 form변수에 선언해서 가독성을 높이고 있습니다

그리고 43번부터 47번까지는 데이터를 가져오는 변수 선언들입니다

 

그리고 48번부터 if문을 보면 위 변수에 선언한 데이터 양식이 아니라면 "alert"에 문구를 출력하고 select() 함수로 해당 input 태그로 입력 커서가 이동하게끔 설정을 한 뒤에 잘못된 데이터가 서버에 보내지면 안 되니 return으로 다시 돌려보내고 있습니다

 

어때요 여러분 유효성 검사에 대해서 말씀드려봤습니다 ㅎㅎ

긴 글 읽어 주시느라 고생하셨습니다.

오늘도 이 글을 읽어주셔서 감사합니다

 

추천 부탁드려요~!