Vanilla JS Toy 프로젝트 - 1. Form Validator (html편)
falconlee236
·2021. 12. 28. 19:51
주변 프로그래머들만 본다고 하더라도, Jquery 없이 자바스크립트를 전혀 활용하지 못하는 경우를 어렵지 않게 찾아볼 수 있다. 자바스크립트 그 본질을 깨닫지 못한 상태에서 편의성만을 위해 Jquery를 사용해 왔다는건 분명 문제가 있다.
출처: https://lipcoder.tistory.com/entry/바닐라-자바스크립트Vanilla-JS란 [기록공간])
본질을 깨닫지 못한다면, Jquery에서 제공하는 편의 기능들이 어떠한 의미에서 어떻게 구현되었는지 알 수 없게 될것이고, 이는 곧 개발하는데에 있어 큰 난관으로 다가올 수 있다.
(디버깅시 Jquery 내부 코드에서 문제가 생긴다면 이유를 파악하지 못할것이고, 결국에는 해결하지 못할 것이다.)
바닐라 자바스크립트 공부를 통해 그 본질을 먼저 깨닫고, 라이브러리 혹은 프레임워크를 사용해야 하는 이유가 이런 점에 있다.>
위에서 말한 것과 같이 자바스크립트의 동작 원리를 모르면 아무리 프레임워크를 쓴다고 해도 결국 한계에 부딪히기 때문에 순수 자바스크립트로만 웹 프로젝트를 몇개 할 것 같다. 아래에 있는 내용은 그 첫번째 프로젝트이다.
여기에 올라온 모든 프로젝트와 소스코드는 here 여기서 확인할 수 있다.
vanilla javascript Toy project 1. Form Validator
처음 깃허브 페이지에 들어가보면 readme가 있고 요구 사항은 다음과 같다.
- 타당성 검증 페이지를 만들자. 요구사항, 길이, 이메일, 그리고 페스워드 일치 여부를 확인하라.
- 제출 양식을 만들어라.
- 특정한 입력 아래 부분에 에러 메시지를 보여줘라.
- checkRequired() 함수는 입력으로 들어온 값이 옳은지 아닌지 확인한다.
- checkLength() 함수는 최소 길이와 최대 길이를 검사한다.
- checkEmail() 함수는 정규식을 사용해 이메일을 검증한다.
- checkPasswordsMatch() 함수는 페스워드가 일치하는지 확인한다.
완성된 최종 결과물은 다음 링크에서 확인할 수 있다.
링크
html문서 만들기 및 head, link, script 연결
일단 페이지를 만들기 위해서는 html파일이 필요할 것이다. 먼저 index.html을 만들어 보자.
vscode에서 단축키로 느낌표 !를 입력하면 html의 기본틀이 나온다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>먼저 이 창에 있는 탭이 Form Validator라고 되어있으므로 title tag를 바꾸고, 기본적으로 css와 js파일은 따로 만들어서 html코드에 삽입하기 때문에 head태그의 맨 뒤에 <link rel="stylesheet" href="style.css">를, body태그의 맨 뒤에 <script src="script.js"></script>를 넣는다.
<link>태그는 외부의 문서를 연결 시키는 태그이다. 주로 css파일을 연결하거나, 웹 폰트가 있는 주소로 연결할 때 사용한다.- herf 속성은 연결할 곳의 주소를 지정한다.
- rel 속성은 현재문서와 연결문서의 관계를 표시한다.
rel="stylesheet"이면 스타일시트로 연결할 때라는 뜻이고 이거 말고는 잘 안쓴다.
<script>태그는 자바스크립트 파일을 연결할때 사용하며, body태그의 맨 마지막에 넣는 것이 속도면에서 유리하다. 왜나면 DOM자료구조는 위에서부터 순차적으로 Node를 만드는데, 도중에 script태그를 만나면 DOM tree 만드는 것을 중단하고 js파일을 실행하러 가버리기 때문이다. 만약 js파일에서 변경이 잦은 문서라면 그만큼 DOM tree가 만들어지는 시간이 늦춰지는 것 이므로 속도면에서 손해를 볼 수 밖에 없다.
html의 body 구성하기
- 기본적으로 우리는 flex container를 사용할 것이기 때문에 가장 큰 요소를 div로 나누고 class를 container로 부여할 것이다. flex container에 대한 간단한 설명은 다음 포스트에서
- 제출 양식을 구성하려면
<form>태그를 사용하고 버튼을 누를 때나 인풋 필드에서 엔터를 입력할 때 폼 전송 이벤트가 발생되게 하려면<button>태그의 type="submit"속성을 사용해야 한다. - 여기까지 따라왔으면 body tag안에는 다음과 같은 코드가 있어야 한다. 이때 id값과 class값은 편한대로 임의로 하면 된다.
<body> <div class="container"> <form id="form" class="form"> <button type="submit">Submit</button> </form> </div> <script src="script.js"></script> </body>- form의 기본 구성요소를 보면 맨 위에 제목으로 보이는 "Register With Us"라는 문구가 보이고, 나머지 요소들은 총 4개의 블록으로 쪼갤 수 있다는 것을 느낄 수 있을것이다. 그리고 이 블록들은 안에 있는 text만 다르지 다 비슷한 element로 이루어져 있기 때문에 통일된 양식을 사용할 수 있다고 생각할 수 있다.
- 통일된 양식이라는 뜻은 같은 클래스 값을 가져서 비슷한 형태로 만든다는 뜻이다.
- 먼저 각 블록의 위쪽에 있는 회색 텍스트를 클릭하면 바로 input박스로 커서가 이동하는데 이 기능을 사용하려면
<label>태그를 사용한다.- for 속성은 연결하고 싶은 input tag의 id값을 입력한다.
- input박스에 있는 기본적으로 써있는 안내글을 표시하려면 placeholder 속성을 사용한다. 이 안내글은 실제 값이 아니라서 커서가 앞에 있기 때문에 사용자가 입력하면 지워진다.
- input박스에서 잘못된 입력을 제출하면 아래부분에 오류 메시지가 작게 뜬다. 이때 작은 text를 쓰고 싶을 때는
<small>태그를 사용한다. text가 나온다고 해서 잘못 만들었다고 생각하지 말자. css에서 visible 속성을 사용하면 숨김 여부를 선택할 수 있다.
여기까지 따라왔으면 기본적인 html파일 구성은 완료했다. 최종 html코드는 다음과 같다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>From Validator</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<form id="form" class="form">
<h2>Register With Us</h2>
<div class="form-control">
<label for="username">Username</label>
<input type="text" id="username" placeholder="Enter username">
<small>Error message</small>
</div>
<div class="form-control">
<label for="email">Email</label>
<input type="text" id="email" placeholder="Enter email">
<small>Error message</small>
</div>
<div class="form-control">
<label for="password">Password</label>
<input type="password" id="password" placeholder="Enter password">
<small>Error message</small>
</div>
<div class="form-control">
<label for="password2">Confirm Password</label>
<input type="password" id="password2" placeholder="Enter password again">
<small>Error message</small>
</div>
<button type="submit">Submit</button>
</form>
</div>
<script src="script.js"></script>
</body>
</html>'VanillaJS' 카테고리의 다른 글
| Vanilla JS Toy 프로젝트 - 2. Movie Seat Booking - CSS편(1) (0) | 2022.02.13 |
|---|---|
| Vanilla JS Toy 프로젝트 - 2. Movie Seat Booking (html편) (0) | 2022.02.10 |
| Vanilla JS Toy 프로젝트 - 1. Form Validator (javascript편) (0) | 2022.01.09 |
| Vanilla JS Toy 프로젝트 1. Form Validator - CSS편(2) (0) | 2022.01.07 |
| Vanilla JS Toy 프로젝트 1. Form Validator - CSS편(1) (0) | 2022.01.03 |
