TIL) 웹 유효성 검사, 관심사 분리

 

유효성 검사

사이트에서 원하는 조건에 맞게 반드시 형식을 맞춰 입력해야 하는 경우

 

• 특정 값은 반드시 입력해야 합니다. (아이디, 이메일, 비밀번호, 이름, 전화번호 등)
• 비밀번호는 n 자릿수 이상이어야 하고, 숫자나 특수문자를 반드시 포함해야 합니다.
• 비밀번호와 비밀번호 확인란에 입력된 문자가 동일해야 합니다.
• 신용카드의 경우, 입력한 신용카드의 번호가 유효해야 합니다.

 

유효성 검사의 목표

작동이 가능한 MVP(Minimum Viable Product)를 만들어 내는 것

MVP : 최소 기능 제품(Minimum Viable Product, MVP)는 고객의 피드백을 받아 최소한의 기능(features)을 구현한 제품

 

 

DOM 기초 실습을 통해, 구체적인 사용법을 익힐 수 있다.
 - querySelector를 활용하여, HTML 엘리먼트 정보를 가져올 수 있다.
 - oncilck, onkeyup 속성이나 addEventListener 메서드로 이벤트 핸들러 함수를 HTML 엘리먼트에 적용할 수 있다.
 - 이벤트 핸들러 함수에서 이벤트가 발생한 곳의 정보를 확인할 수 있다.
 - 이벤트 핸들러 함수로 유효성 검사를 실행할 수 있다.
유효성 검사에 필요한 기술 요소를 익힐 수 있다.
 - 유효성 검사에 필요한 HTML 엘리먼트, CSS 속성이 무엇인지 알 수 있다.
   - 엘리먼트가 화면에 표시되거나 사라지게 만들 수 있다. (display: none)
 - 유효성 검사에서 활용할 수 있는 정규 표현식의 기초 사용법에 대해 익힐 수 있다. (advanced)
관심사 분리를 적용하거나, 유효성 검사 함수를 따로 분리해서 설계할 수 있다. (advanced)

 

 

---

---

css 파일과 class를 조합하는 것이 현업에서 많이 쓰인다. 

 

자바스크립트를 이용해서 스타일을 직접 조작할 수 있는데 왜, 보통 CSS 클래스를 이용해서 간접적으로 바꾸는 것을 권장할까??

그 이유는!

 

1.디자인의 디테일한 요소가 자바스크립트 코드에 담기는 것을 방지하기 위해

2. 따로 클래스를 이용하면, 해당 디자인을 디자이너가 쉽게 바꿀 수 있기 때문에

3. CSS는 디자인, 자바스크립트는 로직에 집중할 수 있게 하기 위해

 

즉, "관심사 분리 때문이다"

Separation of concerns - Wikipedia

 

 

---

 

 

이벤트 속성(onclick)에 이벤트 핸들러를 등록할 때에는 함수 그 자체로 등록해야 한다. 함수 실행을 등록하는 것이 아니다.

 

x

function handler() {
  console.log('버튼이 눌렸습니다!');
}

btn.onclick = handler();

o

function handler() {
  console.log('버튼이 눌렸습니다!');
}

btn.onclick = handler;