JavaScript 정리 11 | younggeun0.dev

2019년 웹 개발 과정에서 JavaScript로 회원가입 입력값과 주민등록번호 형식을 검증하며 작성한 학습 기록입니다. 브라우저 이벤트와 입력 검증 로직을 직접 연결하면서 클라이언트 코드의 실행 흐름을 익혔습니다. 오래된 예제와 표현이 포함되어 있으므로 당시의 학습 과정으로 참고해주세요.

회원가입 유효성 검증 - SSN 검증

어제 이어서 작업

document.getElementById("ssn1").addEventListtener("keyup",  moveToSsn2);
document.getElementById("ssn2").addEventListtener("keyup",  chkSsn);

ssn1이 6글자가 되면 ssn2로 이동

// 주민번호 앞자리에서 6글자가 입력되면 커서를 Ssn2로 이동
function moveToSsn2() {
     if(document.getElementById("ssn1").value.length == 6) {
           document.getElementById("ssn2").focus();
     }
}

ssn2가 7글자면 주민번호 검증알고리즘으로 검증, 성별, 생년월일, 나이 채울 것

//입력한 주민번호의 유효성 검증
function chkSsn(){
   //주민번호의 끝자리가 7자리인지
   var obj = document.joinFrm;
   
   if(obj.ssn2.value.length==7){
      if(obj.ssn1.value.replace(/[0-9]/g,"")!=""){
         alert("주민번호는 첫자리는 숫자로만 구성됩니다.");
         obj.ssn1.value="";
         obj.ssn1.focus();
         return;
      }//end if
 
      //주민번호 첫번째 자리가 숫자로 구성되어있는지?
      if(obj.ssn2.value.replace(/[0-9]/g,"")!=""){
         alert("주민번호 두번째 자리는 숫자로만 구성됩니다.");
         obj.ssn2.value="";
         obj.ssn2.focus();
         return;
      }//end if
 
      var ssn=obj.ssn1.value+obj.ssn2.value;
      
      // 주민번호 검증 알고리즘
      var flagNum=[2,3,4,5,6,7,8,9,2,3,4,5];
      
      var temp=0;
      //주민번호의 각 자리에 2,3,4,5,6,7,8,9,2,3,4,5 를 곱한 값의  결과를 모두 더해서
      //변수에 할당
      for(var i=0; i<flagNum.length; i++){
         temp+=ssn.charAt(i)*flagNum[i];
      }//end for
      //위에서 계산된 값을 11로 나눈 나머지를 11에서 빼고 그 결과를  10으로 나눈 나머지를
      //구한다.
      temp=(11-(temp%11))%10;
 
      //위에서 계산된 결과가 주민번호의 가장 마지막 자리에 일치한다면  유효, 그렇지않다면 무효.
      if(temp==ssn.charAt(12)){ 
 
         //성별체크
         var genderFlag= ssn.charAt(6);
 
         if(genderFlag %2==0){ // 짝수면 여자
            obj.gender[1].checked=true; // 라디오버튼 여자 체크
         }else{ // 홀수면 남자
            obj.gender[0].checked=true; // 라디오버튼 남자 체크
         }//end else
         
         var ssn_year=parseInt(ssn.substring(0,2));  //88
         var ssn_month=parseInt(ssn.substring(2,4)); //01->1
         var ssn_day=parseInt(ssn.substring(4,6));   //01->1
 
         //생년월일.
         if(genderFlag<=2){ //1900
            ssn_year=1900+ssn_year;
         }else if(genderFlag<=4){ //2000
            ssn_year=2000+ssn_year;
         }//end if
 
         //생년월일체크.
         var b_flag = false;
         for(var i=0; i< obj.b_year.length; i++){
            if(obj.b_year[i].value == ssn_year){ // 옵션에 생년이 존재
               obj.b_year[i].selected=true;
               b_flag=true;
               break;
            }//end if
         }//end for
 
         if(!b_flag){ //준비된 생년이 없을 때
            //옵션을 생성하여 추가하고
            obj.b_year.options[obj.b_year.length]= new  Option(ssn_year,ssn_year);
            //추가된 옵션을 선택해준다.
            obj.b_year[obj.b_year.length-1].selected=true;
         }//end if
         
         //월설정            
         obj.b_month[ssn_month-1].selected=true;
         //일설정
         obj.b_day[ssn_day-1].selected=true;
         
         //나이
         var date=new Date();
         obj.age.value = date.getFullYear()-ssn_year+1;
         
      }else{
         alert("잘못된 주민번호입니다.")
      }
   }//end if
}

회원가입 유효성 검증 - 필수 입력사항 체크

아이디, 비밀번호, 이름, 주민번호, 주소, 상세주소 입력 체크

document.getElementById("btnJoin").addEventListener("click",  nullCheck);

function nullCheck() {
   var obj=document.joinFrm;
   
   if(obj.id.value ==""){
      alert("아이디는 필수 입력!!!");
      obj.id.focus();
      return;
   }
   if(obj.pass1.value ==""){
      alert("비밀번호는 필수 입력!!!");
      obj.pass1.focus();
      return;
   }
   if(obj.pass2.value ==""){
      alert("비밀번호 확인은 필수 입력!!!");
      obj.pass2.focus();
      return;
   }
   if(obj.name.value ==""){
      alert("이름은 필수 입력!!!");
      obj.name.focus();
      return;
   }
   if(obj.ssn1.value ==""){
      alert("주민번호 첫자리는 필수 입력!!!");
      obj.ssn1.focus();
      return;
   }
   if(obj.ssn2.value ==""){
      alert("주민번호 두번째자리는 필수 입력!!!");
      obj.ssn2.focus();
      return;
   }
   if(obj.zipcode1.value ==""||obj.zipcode2.value  ==""||obj.addr1.value ==""){
      alert("주소를 검색해 주세요");
      return;
   }
   if(obj.addr2.value ==""){
      alert("상세주소는 필수 입력!!!");
      obj.addr2.focus();
      return;
   }
   //입력값이 모두 입력되었으면 서버로 전송
   obj.submit();
   
}//nullCheck

canvas

도형을 그리거나 이미지를 다룰 때 사용
2D 그래픽을 지원, 브라우저에 플러그인이 없어도 그래픽 묘사가능
- canvas로 Flash가 없어도 움직이는 영상을 제작 가능
audio나 video 태그처럼 모든 브라우저에서 지원하지 않을 수 있다
canvas태그는 css로 width나 height를 주지 않는다.
- 태그에 직접 입력
사용 예

<body>
<canvas id="can" width="500" height="500"></canvas>
<br/>
<input type="button" value="사각형" class="btn" id="rect"/>
<input type="button" value="이미지" class="btn" id="img"/>
<input type="button" value="선" class="btn"id="line"/>
</body>

window.onload=function(){
     document.getElementById("rect").addEventListener("click",  drawRect)
     document.getElementById("img").addEventListener("click",  drawImg)
     document.getElementById("line").addEventListener("click",  drawLine)
}//function

function drawRect() {
     //1. canvas 얻기
     var can= document.getElementById("can");
 
     //2. 2d 그래픽을 그릴 수 있는 객체 얻기
     var ctx=can.getContext("2d")
 
     //초기화: 그래픽 객체를 초기화 (x, y, 넓이, 높이)
     ctx.clearRect(0,0,can.width, can.height); 
 
     //4. 색변경 :속성 fillStyle="rgb(R,G,B)"
     // fillStyle="rgba(R,G,B,alpha(투명도))"
     ctx.fillStyle="rgb(255,0,0)";
 
     //3. 지정한 좌표에 사각형 그리기fillRect(x,y,w,h)
     ctx.fillRect(10,10,80,40);
 
     //4. 색변경 :속성 fillStyle="rgb(R,G,B)"
     // fillStyle="rgba(R,G,B,alpha(투명도))"
     ctx.fillStyle="rgb(255,0,0,0.2)"//투명도 0.0~1까지 설정
     ctx.fillRect(40,40,80,40);
}

function drawImg() {
     //1. canvas 얻기
     var can= document.getElementById("can");
 
     //2. 2d 그래픽을 그릴 수 있는 객체
     var ctx=can.getContext("2d")
     ctx.clearRect(0,0,can.width, can.height);
 
     //3. 이미지 객체를 생성
     var img =new Image();
 
     //4. 이미지 객체의 경로 설정: img.src="이미지 경로"
     img.src="../common/images/img.png";
 
     //5. 이미지의 크기대로 그린다
     // ctx.drawImage(이미지 객체,x,y)
     //ctx.drawImage(img,100,50);
 
     // 이미지 크기를 변경하여 그린다. 
     // HTML에서 이미지 크기 변경 시 자원을 많이 소모(비권장)
     // drawImgage(img객체, x, y, 넓이, 높이)
     ctx.drawImage(img,30,30,100,100);
}

function drawLine() {
     //1. canvas 얻기
     var can= document.getElementById("can");
 
     //2. 2d 그래픽을 그릴 수 있는 객체
     var ctx=can.getContext("2d")
     ctx.clearRect(0,0,can.width,can.height);//can 초기화
 
     //3. 선긋기 시작함수호출: ctx.beginPath()
     ctx.beginPath();
 
     //시작좌표: ctx.moveTo(x1,y1)
     ctx.moveTo(25, 50); //시작 좌표 재설정
 
     //끝좌표: ctx.lineTo(x1,y1)
     ctx.lineTo(150, 50); //끝좌표를 설정하여 선을 그린다
     ctx.lineTo(25, 150);// 위에서 설정된 좌표를 시작점으로 선을  그린다.
 
     //마지막선이 설정되지 않으면 자동으로 채워준다.
     
     ctx.moveTo(25, 50); // 좌표 시작점을 재설정
     ctx.lineTo(25, 150);// 재설정된 좌표에서 설정된 좌표로 선을 연결.
 
     ctx.stroke(); // stroke함수로 선을 긋는다.
 
     //3. 선긋기 끝 함수 호출: ctx.closePath()
     ctx.closePath();
}

Storage

웹은 비연결성, 멱등성
- 비연결성
  - 접속자의 요청이 있을 때 서버와 연결하고 요청한 데이터가 응답되면 연결이 서버와 연결이 끊어진다.
  - 웹은 클라이언트가 필요할 때만 서버에 연결, 서버의 자원을 절약할 수 있다.
    - 저사양의 서버로도 많은 접속자를 처리가능
  - 게임은 서버와 계속 연결이 되어 있어야함,(연결성) 자원을 많이 점유한다.
  - 비연결성의 단점은 클라이언트의 상태를 알 수 없다.(몇 명이 접속했는지 모른다.)
  - 비연결성을 해결하기 위해 서버에서는 session과 cookie를 제공
    - session은 접속자의 정보를 서버측 메모리에 저장
    - 접속자의 정보를 접속자의 HDD에 파일로 저장하는 것이 cookie
    - storage는 cookie를 대체하기 위한 기술
      - session storage, local storage가 존재
HTML5에서 지원되는 저장객체
- 접속자의 정보를 접속자 브라우저에 저장하는 객체
- 비연결성인 웹에서 접속자의 정보를 저장가능
cookie는 객체는 저장 안되고 문자열만 저장 가능.
- 최대 크기가 4KB 파일로 생성이 된다.
Storage를 쓰면 브라우저의 저장소에 저장이 됨.
- 크롬 개발자도구 인스펙터에서 확인 가능
  - Application - Storage
  - 스토리지 값 직접 변경, 삭제 가능
- 쿠키와 저장공간이 다르다.
- 쿠키와 다르게 문자열뿐만 아니라 다양한 데이터를 최대 5MB까지 저장가능
- 키, 값의 쌍(KVP, key value pair, entity)으로 저장된다.

Sesstion Stroage
- 컴퓨터끼리의 연결을 session이라고 함.
- 접속자의 정보가 서버에 연결되어 있을 때만 유지된다.
Local Storage
- 서버와 연결이 끊어져도 접속자의 정보가 계속 유지가 된다.
스토리지 사용 예
- 로그인 유지
  - 로그인 된 상태가 서버측 세션에 저장됨
  - 그 상태를 내 브라우저 스토리지에 저장해 둠
  - Local Storage 사용하면 다음에 접속 시 로그인한 상태를 계속 사용가능
  - Session Stroage면 다음 접속 시 다시 로그인을 해야 함.
- 장바구니
  - 다음 접속했을 때도 상품 유지 Local Storage
  - 다음 접속 때 초기화 Session Storage
- 연결된 상태로 잠깐 쓸 땐 Session Storage
- 계속 정보를 유지할 땐 Local Storage
쿠키는 1년까지 유지됨
- Storage는 사용자가 지워야 사라진다.
사용법
- storage는 window객체의 자식으로 제공이 된다.

// 1. Storage 객체 얻기
var ls = window.localStorage;
var ss = window.sessionStorage;
 
// 2. 이름, 값 할당
ls.setItem("키","값");
ss.setItem("키","값");
 
// 3. 값 얻기
ls.getItem("키");
ss.getItem("키");
 
// 4. 값 삭제
ls.removeItem("키");
ss.removeItem("키");
 
// 5. 모두 삭제
ls.clear();
ss.clear();

storage 예제

<body>
<div id="output"></div>
<input type="button" value="SessionStroage값설정"  class="btn" id="s_set"/>
<input type="button" value="SessionStroage값얻기"  class="btn" id="s_get"/>
<input type="button" value="SessionStroage값삭제"  class="btn" id="s_remove"/>
     
<input type="button" value="LocalStroage값설정" class="btn"  id="l_set"/>
<input type="button" value="LocalStroage값얻기" class="btn"  id="<input type="button" value="LocalStroage값삭제" class="btn"  id="l_remove"/>
</body>

window.onload = function(){
     document.getElementById("s_set").addEventListener("click",  sSet);
     document.getElementById("s_get").addEventListener("click",  sGet);
     document.getElementById("s_remove").addEventListener("click",  sRemove);
     document.getElementById("l_set").addEventListener("click",  lSet);
     document.getElementById("l_get").addEventListener("click",  lGet);
     document.getElementById("l_remove").addEventListener("click",  lRemove);
}

function sSet() {
     // 세션스토리지에 값 설정
     // 스토리지는 문자열만 저장할 수 있는 쿠키와 다르게 다양한 데이터를 저장가능
     window.sessionStorage.setItem("name", "노진경"); // string
     window.sessionStorage.setItem("age", 20); // number
     window.sessionStorage.setItem("flag", true) // boolean
}
 
function sGet() {
     var divNode = document.getElementById("output");
     var output="<ul>";
     //세션스토리지에 값을 얻어와서 div출력
     var ses=window.sessionStorage;
     var name= ses.getItem("name");
     var age= ses.getItem("age");
     var flag= ses.getItem("flag");
     output+="<li>이름: "+name+"</li>";
     output+="<li>나이: "+age+"</li>";
     output+="<li>flag: "+flag+"</li>";
     
     divNode.innerHTML= output;
}
 
function sRemove() {
     //window.sessionStorage.removeItem("name");
     //window.sessionStorage.removeItem("age");
     //window.sessionStorage.removeItem("flag");
     sessionStorage.clear(); //모든값 지우기
}

function lSet() {
     // 로컬스토리지에 값 설정
     window.localStorage.setItem("name", "김희철") // string
     window.localStorage.setItem("age", 25) // number
     window.localStorage.setItem("flag", true) // boolean
     window.localStorage.setItem("addr", "서울시 동작구  동작동")
}
 
function lGet() {
     var divNode = document.getElementById("output");
     var output="<ul>";
     //로컬스토리지에 값을 얻어와서 div출력
     var los=window.localStorage;
     var name= los.getItem("name");
     var age= los.getItem("age");
     var flag= los.getItem("flag");
     var addr= los.getItem("addr");
     output+="<li>이름: "+name+"</li>";
     output+="<li>나이: "+age+"</li>";
     output+="<li>flag: "+flag+"</li>";
     output+="<li>주소: "+addr+"</li>";
     
     divNode.innerHTML= output;
}
 
function lRemove() {
     localStorage.removeItem("name");
     localStorage.removeItem("age");
     localStorage.removeItem("flag");
     localStorage.removeItem("addr");
}

JSON

JSON은 JavaScript Object Notation의 약자
- 원래 JavsScript에서 값을 저장하기 위해 사용하는 데이터형으로 시작됨
- 하지만 주로 이기종 언어간 데이터 전달용으로 사용된다.
데이터를 XML처럼 JSON으로도 전달가능
- XML보다 코드량 적다.
- 파싱비용이 XML보다 적다.
- 네트워크 트래픽이 줄고 속도가 빨라지고 전력소모량이 준다.
- 공공데이터는 XML과 JSON으로 모두 제공된다.
다양한 데이터를 저장할 수 있다.
- XML은 마크업 언어로 문자열 데이터만 저장가능
- JavaScript에서 발생하는 number, string, boolean, JSON안에 JSON을 넣어 보낼 수 있음.
- JSON을 배열로 만들 수도 있다.
간단한 문법으로 사용가능
JSON은 이름와 값의 쌍으로 구성
- 이름으로 값을 조회할 수 있다.
- 이름은 '로 감싼다.
- 값은 형에 따라 '또는 "를 직접 사용
JSON은 두가지 형태로 사용가능
- JSONObject 와 JSONArray
- closure의 형태가 JSONObject와 같다.
JSONObject
- JSON 형태의 문자열을 생성 후 eval()을 사용하여 객체를 만듦

// 1. JSONObject 형태의 문자열을 만들고
var data = "{ '이름' : '값', '이름2' : '값2', ... }";
 
// 2. eval()로 문자열을 JSONObject로 생성
var json_obj = eval("("+data+")");
 
// 3. 이름으로 값을 얻음
json_obj.이름;

JSON 사용 예

<body>
     <div id="output"></div>
     <input type="button" value="JSONObject 사용" class="btn"  id="btn"/>
</body>

window.onload=function(){
     document.getElementById("btn").addEventListener("click",  useJson);
}
 
function useJson() {
     // JSON: JavaScript Object Notation
     // 1. JSONObject 형태의 문자열을 생성
     var data=
     "{'name':'김건하','age':30,'job':'뛰어난  자바개발자','flag':true,'pubDate':'2019-02-19'}";                
 
     // 2. eval 함수를 사용하여 JSONObject객체를 생성한다.
     var json_obj = eval("("+data+")");
     
     //3. 값얻기
     var output= document.getElementById("output");
     output.innerHTML="이름: "+ json_obj.name+"<br/> 나이:  "+json_obj.age
           +"<br/>job: "+json_obj.job+"<br/>flag :"  +json_obj.flag+"<br/>생성일: "+json_obj.pubDate;
}

회원가입 유효성 검증 - SSN 검증

회원가입 유효성 검증 - 필수 입력사항 체크

canvas

Storage

JSON

댓글