자바스크립트 Validation && dataset

본 포스팅에서는 3주차 과제를 하면서 보충이 필요하다고 느껴졌던 validation과 dataset에 다루려 합니다. 각각의 아티클로 다루기에는 생각보다 분량이 적어 한꺼번에 넣겠습니다🙄

📌 Validation

state를 갖는 컴포넌트의 경우, initialState를 받는 부분과 setState 함수에서 nextState를 받는 부분에서 state에 대한 validation을 추가해주세요.

일단 돌아가게 코드를 짜는데 집중하는 내게 validation은 굉장히 생소한 단어였다. Validation. 우리나라 말로 번역하자면 검증. validation을 추가하는 조건에 대한 사족 때문에 어렵게 다가왔지만, 막상 조사해보니 그렇게 어려운 개념은 아니었다.

validation에 대해 짧게 요약하자면, 입력값에 대한 검증이다.
validation을 통해 원하는 값을 받는지 확인할 수 있고, 더 나아가 특정 함수나 API에서 입력받는 값이 유효한 값인지를 파악하여 추후 발생할 수 있는 오류를 사전에 방지하고, 코드의 재사용률을 높힐 수 있는 것이다.

validation의 예시로는 회원가입 시 이메일 형식이 맞는지 파악하는 것이나 입력받는 값이 array인지 text인지 파악하는 것 등이 있겠다.

📌 Dataset

todolist 강의 중 태그 안에 data-id를 넣어 id값을 가져오는 것을 볼 수 있었다. 이는 HTML5 부터 도입된 HTML의 data-* 문법으로, 태그 안에 data-로 시작하는 속성값을 넣고 불러올 수 있다.

💻 Dataset 사용법

data-*문법의 사용법은 간단하다. 태그 안에 data-💬로 시작하는 값을 넣고, 불러올 때는 원하는 태그를 getElementById 등을 통해 불러온 후 dataset.💬 으로 불러오는 것이다. 아래의 코드를 본다면 쉽게 이해할 수 있다.

// data 속성 넣기
<article
  id="electriccars"
  data-columns="3"
  data-index-number="12314"
  data-parent="cars"> 
	...
</article>
// data 속성 불러오기
var article = document.getElementById('electriccars');

article.dataset.columns // "3"
article.dataset.indexNumber // "12314"
article.dataset.parent // "cars“

💻 Dataset 사용 시 주의할 점

• data-*을 통해 입력한 정보는 접근 보조 기술이 접근할 수 없다. 따라서 검색 크롤러가 읽지 못하며, 당연한 얘기지만 보여줘야 하는 값을 넣으면 안된다.

• JS 데이터 저장소에 비교적 저조한 성능을 가지고 있으며, 구형 익스플로러 같이 지원하지 않는 브라우저가 있다.

참고사이트 MDN 데이터 속성 사용하기