Javascript(유효화 검사, 정규표현식)

Javascript(HTML form)

 

개요

HTML의 form을 이용하여 정보를 받아들여 서버로 전송을하게 되는데, 이 과정에서 입력된 정보가 유요한 정보인지 체크하는 것을 form validation 이라고 한다. 주소를 입력해야하는 창에 사용자가 자신의 이름을 입력한다면 그것은 우리가 기대한 값이 아니다. 그러한 것을 체크하는 과정을 form validation 이라고 부른다.

유효한 데이터를 수집하지 않으면, 복수의 동명의 유저네임등으로 인한 혼란이 발생할 수 있고 심하게는 악성 유저가 일종의 코드를 우리의 데이터에 삽입하여 해킹에 취약해지는 점도 발생할 수 있다.

 

정규표현식 : regular expressions (regex or regexp)

한국어로는 정규표현식이라고 하는 개념인데, 우리가 문자열을 패턴으로 인식하여 오류를 찾아낼 수 있는 것처럼 컴퓨터에게 그러한 패턴을 입력시키는 언어를 regular expressions라고 말한다.

 

클라이언트 사이드 유효화 (Client side validation) - HTML

위에서 말한 것처럼 우리가 원하는 정보가 입력되었는지 체크하는 과정을 유효화라고 하는데, 서버에 전달되기 전 웹사이트 단계에서 이러한 입력을 원천적으로 검사해서 차단하는 것을 클라이언트 사이드에서 유효화한다고 한다.

요즘의 HTML에서는 이러한 기능을 일부 지원하는 빌트인 속성들이 있는데 대표적으로 required가 있다. 이렇게 먼저 유저와 상호작용하며 잘못 입력된 값이 있으면 즉각적으로 피드백을 주기 때문에 백엔드로 정보를 보낼 시간이 필요 없어 보다 빠르고 직관적이다.

required가 쓰인 예시는 아래와 같다.

 

<form action="" method="POST">
      <label for="text">Enter your name here:</label>
    	**<input id="name" name="name" type="text" required minlength="3" maxlength="100">**
      <br><br>
      <label for="number">Enter your age here:</label>
      **<input type="number" name="age" id="age" required min="1" max="123">**
      <br><br>
        <label for="code">Best place to learn to code: (hint: starts with a "C")</label>
  **<input id="code" name="code" type="text" required pattern="[cC]odingCamp"> 
//여기서 정규표현형을 볼수 있다. CodingCamp 혹은 codingCamp를 둘 다 입력할 수 있다.** 
      <br><br>
      <input type="submit" value="Submit">
    </form>

만약 값을 잘못 입력하면 아래와 같은 창이 뜬다.

 

 

클라이언트 사이드 유효화 (Client side validation) - JavaScript

HTML만으로 모든 유효화를 커버할 수 없기 때문에 자바스크립트의 역할이 필요하다. 자바스크립트코드를 직접 짜서 구동하는 방법도 있고 라이브러리를 끌어와서 사용할 수도 있다.

다음과 같은 바닐라 자바스크립트 기반의 라이브러리도 있고 (링크)

자바스크립트 기반의 parsley

리액트 기반에 사용할 수 있는 유효와 라이브러리도 있다.(링크)

리액트 뷰 등은 가상 DOM을 활용하기 때문에 바닐라자바스크립트와는 다른 라이브러리를 사용하는 것으로 이해하고 있다.

 

Back-end Validation 백엔드 사이드 유효화

웹 사이트나 애플리케이션의 프런트 엔드 검증이 아무리 완벽해 보이더라도 백엔드 또는 서버 측에서도 검증을 완료해야 한다. 예를 들어, 악의적인 사용자는 브라우저에서 JavaScript를 해제할 수 있다. 사용자가 요청을 제출한 후 서버에 도착하기 전에 데이터가 변경되는 중간자 공격의 가능성도 있다. 일반적으로 백엔드는 수신하는 데이터를 신뢰해서는 안 된다.

백엔드사이드에서는 사용자측에서 확인할 수 없는 코드를 작성할 수 있기 때문에 , 악의적인 유저들의 접근으로부터 안전하게 방어할 수 있다.

서버측에서 입력을 검증하는 두 가지 방법이 있다.

1. 사용자가 여전히 프론트엔드에서 데이터를 입력하는 동안, 서버에 비동기적 요청을 통해 사용자가 제출하기 이전에 이미 사용자에게 피드백을 보낼 수 있다. 이는 위에 나온 프론트엔드 방식보다는 느리기 때문에 사용자 경험의 관점에서 고칠 부분이 많을 수 있다. .
2. 양식이 이미 제출된 이후에 데이터의 유효성과 안정선을 확인하는 것이 중요하다. 마지막 방어수단이 되고 데이터베이스에 실제로 추가하기 전에 데이터의 유효성과 안정성을 확인하는 단계이다.

 

 

요약

• 최근의 웹사이트들은 HTML form을 활용해서 유저의 정보를 수집한다.
• 위의 form을 통해 수집된 정보들을 유효한지 검사하는 것이 웹사이트를 안전하고 확실하게 구동시키는데 매우 중요하다.
• 정규표현식은 텍스트에서 찾고자하는 패턴이 있는지 정의하는 일련의 문자열이다. 인풋값을 검사하는데 매우 중요하다.
• 위 작업을 위한 HTML 빌트인 메소드들이 있다.
• 만들어진 복잡한 클라이언트 사이드 유효화검사는 자바스크립트로 실행가능하다.
• 서버로의 비동기적 요청으로 인해 백엔드 사이드에서의 유효화 검사가 form이 제출되기 전에 가능해진다.
• 마지막의 백엔드 사이드의 유효화검사가 매우 중요하다.

 

+참고 )

 HTML의 <label> 태그는 <input> 태그의 활용을 도와주고, label영역을 클릭하면 input영역으로 초점(focus)이 맞춰진다(실제로 클릭해보면 입력창에 바로 입력할 수 있게 커서가 뜸) label 태그의 for 속성과 input 태그의 id를 일치시켜서 둘을 연결 시킬 수 있음 

 

이러한 기능은 input 태그의 속성 중 radio나 checkbox 등 작은 크기의 선택지를 줄 때 유용함. 사용자가 단순히 글자만 클릭해도 체크박스가 체크되게 할 수 있음 .

 

예시 

<label for="example">예시입니다.</label>
<input type="checkbox" id="example">

 

 label로 input 태그를 감싸면 for 를 쓰지 않아도 연결된다. 

 

<label><input type='text' >이렇게 하면 연결됨</label>