2020.07.02 [TIL] 유효성 검사와 개발

유효성 검사

누구나 한번쯤은 웹사이트의 회원가입을 진행해보신 경험이 있을겁니다. 가입 과정을 거치다보면, 사이트에서 원하는 조건에 맞게 반드시 형식을 맞춰 입력해야 하는 경우가 생깁니다. 예를 들어 다음과 같은 경우가 있겠죠.

• 특정 값은 반드시 입력해야 합니다
• 비밀번호는 특정 자릿수 이상이어야 하며, 숫자나 특수문자를 반드시 요구하기도 합니다
• 비밀번호와 비밀번호 확인란이 동일해야 합니다
• 신용카드 넘버가 유효한지 확인하는 경우도 있습니다 (어디선가 구현해본 내용이죠?)

우리는 이미 <input> 태그 등을 통해 입력창을 만드는 방법을 배웠습니다. 이제 버튼을 클릭했을 때, (혹은 실시간으로) 그 입력값이 유효한지 아닌지 판단하는 JavaScript 함수를 연결시켜 봅시다. 이를 유효성 검사(form validation)라고 하며, 실제 개발 과정에서 정말 많이 부딪히는 문제 중 하나입니다.

이번 시간에는 유효성 검사를 직접 구현해봅니다. 버튼 클릭등의 이벤트를 발생시키고, DOM을 통해 값을 얻어내고, 함수를 연결시키는 과정을 연습해봅시다.

Achievement Goals

1. 단순 입력, 체크박스, 라디오 버튼 등의 입력을 받을 수 있는 HTML 태그를 만들고, JavaScript를 이용해 그 값을 얻어낼 수 있다.
2. 버튼 클릭 등의 이벤트가 발생했을 경우, JavaScript 함수가 실행되도록 만들 수 있다.
3. 함수 실행 결과에 따른, 화면상의 피드백(Visual feedback)을 구현해낼 수 있다.

Bare minimum requirement

(* 제출하지 않아도 되는 과제입니다)

• 최소 두 개의 <input> 태그와 한 개의 <button> 태그가 존재해야 합니다.
• <button>을 클릭했을 때, 유효성을 검사하는 함수가 불려야 합니다.
• 최소 한 개 이상의 화면상의 피드백이 있어야 합니다.
  • 예) "비밀번호가 다릅니다", "아이디를 반드시 입력하세요" 라는 메시지를 화면상에 표시

Advanced challenges

• 어떤 경우는, 버튼을 입력하지 않고도 유효성 검사가 진행되어 결과를 알려주는 경우도 있습니다. 어떻게 해야 할까요?
  • 검색 키워드: mdn keyup event

-------------------------------------------------------------------------------------------------------------------------

문제를 함수로 분리하기(1)

 

댓글창의 구조를 

 

객체가 키밸류로 나열해놓은것을 json 이라고 한다 javascript object notation

많은 시스템에서 js을 이용하여 만들었다.

 

005_transformEmployeeData 참조 할것. 

사원들의 정보를다른 형태로 변형 할 수 있는 함수!

 

 

 

그럼 객체를 HTML 엘리먼트로 바꿔주는 작업, 과연 어떻게 할 수 있을까요?

이제 필요한 것이 바로 DOM 지식입니다.

여기엔 우리가 이미 배웠던 내용들을 적용할 수 있습니다. 이 일을 위해 필요한 DOM 지식은 과연 무엇일까요?

일단, li나 div 같은 엘리먼트를 만들어야 합니다. 엘리먼트를 만들어야 그 안에 내용을 집어넣을 수 있으니까요. 그리고, 엘리먼트에 적절한 class 값을 부여해 주어야 합니다. 당연히 값도 채워넣고요.

마지막으로, 예제로 보시다시피, li 태그 아래에 자식으로 div 태그 등이 들어가므로, li 자식으로 div 를 붙이는 법도 알아야 합니다. 즉, 부모자식 관계를 만드는 법이죠.

같은 레벨로 div를 쭉 나열하지 않고, li 태그로 묶는 이유는 앞서 구조를 짜고 영역을 나누는 법을 설명할 때 충분히 했다고 생각합니다. 혹시 아직도 이 부분에 대해 이해가 되지 않는다면, 프론트엔드 개발 Workflow 1을 다시 공부하고 오시기 바랍니다.

어쨌든, 필요한 DOM 지식을 리스트업 해보았고, 이를 직접적으로 DOM 메소드로 옮기면 화면의 코드와 같습니다. 위에서부터,

• 엘리먼트 생성
• class 부여
• 내용 채우기
• 부모에 자식 엘리먼트 붙이기

를 나타내는 DOM 메소드입니다.

이제 해당 내용을 makeCommentElement라는 함수에다 담겠습니다. printComment는 어디가고 갑자기 이 새로운 함수를 도입했는지 궁금할 수도 있겠습니다. printComment가 변환 + 출력을 전부 담당한다면, makeCommentElement는 변환만 다룬다고 생각하시면 되겠습니다.

우리가 배운 내용을 바탕으로 간단하게 makeCommentElement 함수를 작성해보았습니다. 함수의 입력과 출력을 잘 살펴보시기 바랍니다.입력이 객체, 출력이 li 엘리먼트입니다.

<template>이라는 태그를 이용하는 방법도 존재합니다. 이는 이런 다소 복잡한 DOM 메소드를 보다 간편하게 만들어줍니다. 이는 지난 DOM 강의를 참조하시기 바랍니다.

자 이제 makeCommentElement 함수의 작성은 완료했고, printComments 의 변환 + 출력 과정 중 변환 과정을 완료했습니다. 그럼 출력 과정도 마저 만들어야겠지요.

댓글 출력은 어디로 하나요? 댓글들이 담긴 영역, 즉 "읽기 영역"이 있겠죠. 우리는, 댓글 하나하나 즉 li.comment 엘리먼트를 읽기 영역 엘리먼트에 자식으로 붙일 필요가 있습니다. 이로서, 우리는 printComments의 변환 + 출력 과정을 코드로 작성할 수 있게 되었습니다.

정리를 해보면, 목적에 맞게 함수가 만들어지고, 그에 따라 적절하게 문제 분해를 했음을 볼 수 있습니다. 한층 읽기 쉬운 코드가 되었지요.

하루아침에 이런 깔끔한 코드를 작성하는 것은 쉽지 않습니다. 처음에는 돌아가게 만드는 것만으로도 굉장한 도약입니다. 처음엔 하나의 함수에 "일단 돌아가게끔" 작성해서 메소드 그 자체를 충분히 연습합니다.

차차 여러분들이 함수 분리가 익숙해지고, 작업 단위가 분명해지면 함수를 적절하게 나누어서 작성하는 것이 좋습니다. 가장 좋은 방법은 하나의 함수가 한 가지 작업만 하는 것입니다. 그렇게 되면, 유닛 테스트도 가능해집니다.

이 시간에는, 댓글 등록이나, 추천/비추천을 구현하는 법을 다루진 않았습니다. 그러나, 이 정도로도 프론트엔드 개발 과정, 특히 DOM을 다루는 과정을 충분히 맛보았으리라 생각됩니다. 나머지도 여러분들이 문제를 나누고, DOM을 적용해서 코드를 만들어보시기 바랍니다.

 

 

다른 사이트 보면서 공부도해봅니다.

https://velog.io/@bbodela/0408-2

TIL 8일차 #0408 -2