45일차 수업정리(HTML5

수업 정리

45일차 수업정리(HTML5 - 2 -)

Vita500cc 2020. 6. 10. 18:22

**HTML5**

1. form의 유효성검사

=> client의 데이터를 server에게 전송시 데이터의 유효성을 검사하고, 통과시 전송, 불통시 전송하지 않게 해야 함

- server에서만 유효성 검사시 불필요한 트래픽이 생성

=> client의 데이터 중에서 보안이 필요한 데이터의 유효성 검사를 서버에서만 수행해야 함

- client에서 검사 시 코드가 노출되기 때문에 보안의 의미가 없어짐

1) form의 사용목적

=> 여러개의 데이터를 웹 서버에게 전송 할 때, 묶어서 전송하기 위해 사용

=> 데이터는 입력을 받을 수도 있고 받지 않을 수도 있음

2) form 데이터의 유효성 검사

=> 폼의 데이터를 전송할 때 하기도 하고 입력을 하는 도중 또는 포커스가 변경될 때 수행하기도 함

=> 폼의 데이터를 전송할 때 유효성 검사는 스크립트를 직접 작성하기도 하고 HTML5의 속성을 이용하기도 함

- required : 필수

- pattern : 정규식

- maxlength : 최대길이

- min, max

=> email, id, nickname 중복검사 : 서버 데이터를 비교해야 하므로 입력중에는 잘 하지 않고 포커스가 떠날 때 수행

3) form의 유효성 검사 실습

=> 많이 사용하는 정규식

- 이메일 : /^[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*.[a-zA-Z]{2,3}$/i;

- 비밀번호(숫자, 영문자, 그리고 특수문자를 1개이상 포함한 8~15자리)

=> /^.*(?=^.{8,15}$)(?=.*\d)(?=.*[a-zA-Z])(?=.*[!@#$%^&+=]).*$/;
- 비밀번호(숫자, 영어소문자, 영어대문자, 그리고 특수문자를 1개이상 포함한 8~15자리)

=> /^.*(?=^.{8,15}$)(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[!@#$%^&+=]).*$/;

<body>
	<form action="server.jsp" method="post" id="myform">
		이메일<input type="text" id="email" name="email" required />
		<!-- email 유효성 검사 메시지 사용 영역 -->
		<span id="emailmsg"></span> <br /> 비밀번호<input type="password"
			id="userpw" name="userpw" maxlength="15" /> <span id="userpwmsg"></span>
		<br /> 별명<input type="text" id="nickname" name="nickname" /><br />
		<input type="submit" value="가입" />
	</form>
</body>
<script>
	var email = document.getElementById("email");
	var emailmsg = document.getElementById("emailmsg");
	
	var flagemail = false;
	var flagpw = false;
	
	email.addEventListener("focusout", function(event){
 		//ajax를 이용해서 서버에 요청을 해야 함
		
 		//email 정규식 만들기
		var emailreg = /^[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*.[a-zA-Z]{2,3}$/i;
		
		//정규식의 test 메소드에 문자열을 대입하면 정규식 존재시 true, 없을 시 false 리턴
		if(emailreg.test(email.value.trim()) == false){
			emailmsg.innerHTML = "형식에 맞지 않음";
			emailmsg.style.color = "red";
			email.focus();
		}else{
			if(email.value === 'ggangpae1@gamil.com'){
				emailmsg.innerHTML = "이미 사용중인 이메일 입니다.";
				flagemail = false;
			}else{
				emailmsg.innerHTML = "사용 가능한 이메일 입니다.";
				flagemail = true;
			}
		}	
	});
	
	var userpw = document.getElementById("userpw");
	var userpwmsg = document.getElementById("userpwmsg");
	userpw.addEventListener("keydown", function(event){
		//글자수가 8자 미만이면 약함
		if(userpw.value.length < 7){
			userpwmsg.innerHTML = "약함";
			userpwmsg.style.background="yellow";
			flagpw = false;
		}else{
			userpwmsg.innerHTML="강함";
			userpwmsg.style.background="red";
			flagpw = true;
		}
	});
	
	//폼객체 찾아오기
	var myform = document.getElementById("myform");
	
	//폼 객체 전송 할 때
	myform.addEventListener("submit", function(event){
		//폼의 데이터를 전송하지 않게 하려면
		//event.preventDefault()
		
		//email이 형식에 맞지 않으면 전송을 하지 않도록
		
/* 		//email 정규식 만들기
		var emailreg = /^[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*.[a-zA-Z]{2,3}$/i;
		//정규식의 test 메소드에 문자열을 대입하면 정규식 존재시 true, 없을 시 false 리턴
		if(emailreg.test(email.value.trim()) == false){
			emailmsg.innerHTML = "형식에 맞지 않음";
			emailmsg.style.color = "red";
			email.focus();
			event.preventDefault();
		} */
		if(flagemail == false || flagpw == false){
			event.preventDefault();
		}
		
	});
</script>

2. GeoLocation(위치 정보)

=> HTML5에서는 현재 위치를 가져다가 사용할 수 있는 API를 제공

1) 위치 정보를 얻어내는 방법

=> GPS를 이용

=> 라우터 정보를 이용

=> 기지국 정보를 이용

2) 위치정보 사용시에는 사용자의 동의를 얻어야 하고, 위치정보 저장시에는 사업자 허가를 별도로 내야함

3) 위치정보 사용 가능 여부 판단

=> window.navigator.geolocation의 값을 확인

4) 위치 정보를 1번 가져오는 메소드 : 비동기적으로 동작

=> nabigator.geolocation.getCurrentPosition(위치정보 가져오는데 성공시 호출 함수, 실패시 호출되는 함수, 옵션)

=> 성공시 호출되는 함수의 매개변수 객체의 멤버

- coords 속성(위치정보 객체)

- latitude : 위도

- longitude : 경도

- altitude : 고도

- accuracy : 정밀도

- altitudeAccuracy : 고도의 정밀도

- heading : 방향

- speed : 속도

- timestamp 속성 : 위치정보를 받아온 시간

=> 실패했을 때 호출되는 함수의 매개변수(에러객체)

- 이 객체의 code를 확인하면 위치정보를 가져오지 못한 이유를 알수 있음

3. 현재위치를 카카오 지도에 출력하기

1) 앱키

- native app : 안드로이드나 아이폰 앱

- rest api : 서버에게 데이터를 요청해서 받고자 할 때

- javascript : 웹에 바로 표시

- admin : 관리자 기능 사용

=> javascript 키 : f4f9d4a8dfd86e1d51188b599da81dbd

2) developer.kakao.com에서 할일

=> Application이 없으면 새로운 Application등록

=> javascript 키 확인

=> 플랫폼 버튼을 눌러서 web을 선택하고, 자신의 서버 url을 설정

- http://localhost:자신의 포트번호 (ex- http://localhost:9000)

- 실제 웹 서비스일경우 도메인을 설정

- 안드로이드나 IOS에서는 번들 아이디를 설정해야 함

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>위치정보 사용하기</title>
</head>
<body>
<!-- 	<div id="disp">위치정보 표시</div> -->
	
	<div id="map" style="width:500px;height:400px;"></div>

</body>
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=f4f9d4a8dfd86e1d51188b599da81dbd"></script>
<script>
	navigator.geolocation.getCurrentPosition(function(position){
		//현재 위치의 위도와 경도 찾기
		var lat = position.coords.latitude;
		var lon = position.coords.longitude;
		
		var container = document.getElementById('map');
		var options = {
			center: new kakao.maps.LatLng(lat, lon),
			level: 3
		};

		var map = new kakao.maps.Map(container, options);
		
	}, function(error){
		
	})
	
</script>
</html>

3. FileAPI

=> HTML5에는 로컬 파일에 대한 일고 쓰기 기능이 추가

=> 여러개의 파일을 한번에 선택할 수 있는 속성 : multiple속성이나 파일의 선택을 제한할수 있는 accept 속성의 input file type에 추가

4. Drag&drop API

=> 마우스를 이ㅏ용해서 드래그 앤 드랍 한 동작을 제어할 수 있는 API

=> DOM요소를 이동하는 것이 가능하고 탐색기나 파인더 같은 외부 프로그램에서 브라우저안으로 파일을 그래그 가능

5. 브라우저에 데이터 저장하는 법

1) WebStoread

=> key-value형태로 데이터를 저장

=> Local Storage와 Session Storage 2가지가 존재

2) WebSQL

=> 브라우저 안에 관계형 데이터 베이스를 이용하여 약탈

3) indexed DB

=> Index와 Key-Value를 이용해서 데이터를 저장

6. 브라우저에 데이터를 저장하는 이유 - 앱 안에 데이터를 저장하는 이유

=> 앱 안에 데이터를 저장하여 사용하면 빠르게 사용할 수 있고 트래픽이 발생하지 않는 다는 장점이 있지만 여러 사용자가 데이터를 공유할 수 없고, 앱을 삭제하면 데이터가 소명

=> 여러 사용자가 공유하고 데이터를 바 ㄴ영구적으로 보관하려면 서버에 데이터를 저장

: -서버에 데이터를 저장하여 사용하면 트래피깅 발생하고 네이트워크가 되지 않으면 사용할 수 없음

=> 어떤 데이터를 빠르게 사용할 목적으로 처음부터 앱안에서 저장하면 앱을 설치하는 기간이 길어지게 됨

7. 브라우저 안에 Key-valus형태의 데이터를 저장하기 위한 API

1) 종류

=> LocalStorage : 브라우저에 저장후 종료했다가 재실행하여 동일한 도메인 접속시 데이터가 남아있는 저장소

=> SessionStorage : Session은 하나의 윈도우의 개념으로 현재 윈도우가 유지되는 동안 데이터를 저장하기 위한 곳

- 윈도우를 종료하고 재접속시 내용이 사라짐

- 웹프로그래밍에서 로그인 정보를 저장하는 용도로 많이 사용

- 세션은 현재 윈도우에서 새로운 윈도우를 만나면 복제가 되어 전달됨

- 복제가 되었기 때문에 이전 윈도우의 세션과 현재 윈도우의 세션은 다른 세션

2) 사용

=> 데이터 저장 및 수정 : 스토리지이름.key = value

- key는 중복될 수 없기 때문에 이전에 사용한 key이름이면 데이터는 수정, 사용한적 없는 key면 데이터 추가

=> 데이터 삭제 : delete 스토리지이름.key

=> 전체 데이터 삭제 : 스토리지이름.clear()

3) 용도

=> localstorage는 비회원의 장바구니나 아이디 저장 등에 이용

=> sessionstorage는 사용자의 위치 추적이나 로그인 여부등을 저장하는데 많이 이용

4) 브라우저에 저장하면 근본적으로 자신의 도메인에서만 접근이 가능

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>웹 스토리지</title>
</head>
<body>
	<fieldset>
		<legend>웹 스토리지 이용</legend>
		key<input type="text" id="k"/>
		value<input type="text" id="v"/>
		<input type="button" value="삽입" id="insertbtn" />
		<input type="button" value="삭제" id="removebtn" />
		<input type="button" value="윈도우추가" id="addwindow" />
	</fieldset>
	<fieldset>
		<legend>데이터</legend>
		<select id="list" size="10"></select>
	</fieldset>
</body>

<script>
	var k = document.getElementById("k");
	var v = document.getElementById("v");
	var insertbtn = document.getElementById("insertbtn");
	var removebtn = document.getElementById("removebtn");
	var list = document.getElementById("list");
	
	function show(){
		//세션 스토리지의 모든 내용을 list-select에 출력
		//list의 내용 초기화
		list.innerHTML = '';
		//sessionStorage의 목록을 순회하면서 list에 추가
		for(var i=0; i<sessionStorage.length; i+=1){
			var key = sessionStorage.key(i);
			//select에 option을 추가
			//Option의 첫번째 매개변수는 출력되는 값, 두번째 매개변수는 서버에 전달되는 값
			list.options[list.options.length] = 
				new Option(key + " : " + sessionStorage[key], key);
		}
	}
	
	//세션스토리지의 데이터를 출력하는 함수
	show();
	
	var addwindow = document.getElementById("addwindow");
	//addwindow 버튼을 누르면 현재 창을 복사하여 새로운 창을 생성
	addwindow.addEventListener('click', function(event){
		//현재창을 복제해서 새로운 창을 생성
		//세션을 복제해서 전달
		window.open(location.href);
	});
	
	//insertbtn 클릭시 k와 v에 입력된 값을 webstorage에 key와 value로 설정하여 저장
	insertbtn.addEventListener('click', function(event){
		//웹스토리지에 저장
		//속성을 [속성]으로 사용
		sessionStorage[k.value] = v.value;
		k.value="";
		v.value="";
		show();
	});
	
	//삭제버튼을 누르면 select에서 현재 선택한 항목을 삭제
	removebtn.addEventListener("click", function(event){
		//select에서 현재 선택한 항목의 인덱스 가져오기
		//선택이 안된 상태면 음수를 리턴
		var idx = list.selectedIndex;
		if(idx < 0){
			alert("선택을 하고 삭제하세요.");
		}else{
			//선택한 항목의 값을 가져오기
			var selectdata = list.options[idx];
			//가져온 항목의 값을 세션 스토리지에서 삭제
			delete sessionStorage[selectdata.value];
			show();
		}
	});
</script>
</html>

=> 위의 코드를 여러개를 삭제하도록 수정

- select에 multiple 속성을 multiple로 설정시 여러개 선택가능

- select

8. WebWorker

=> 자바 스크립트를 가지고 응용프로그램을 개발하기 어려웠던 이유 중 하나는 스레드가 없었기 때문

- 스레드가 없어 오랜시간이 걸리는 작업을 수행시 프리징현상 발생

=> HTML5에서 스레드처럼 백그라운드에서 작업을 수행할 수 있도록 추가한 API로 UI와 별개로 동작하는 작업을 백

그라운드에서 수행 할 수 있도록하여 오랜시간이 걸리는 작업을 하더라도 UI의 프리징 현상을 방지

=> WebWorker는 별도의 자바스크립트 파일에 작성해야 함

1) Worker의 생성

=> var 워커 변수 = new Worker(자바스크립트 파일의 경로);

2) Worker에게 작업을 지시

=> 워커변수.postMessage(데이터) -> 워커파일에 message 이벤트가 발생

=> message 이벤트 처리를 위한 함수의 매개변수.data 호출시, postMessage 호출시 넘겨준 데이터를 읽을 수 있음

3) 워커파일에서 작업이 끝나면 수행할 동작

postMessage(데이터)를 호출

=> 워커변수가 있는 쪽에 message 이벤트가 발생하고, 함수의 매개변수.data 호출시 전달한 데이터를 읽을 수 있음

4) Message가 붙는 메소드가 존재시 sendMessage는 바로, postMessage는 다른작업이 없을 때 처리해달라는 요청

9. Math ML

=> HTML5에 추가된 API로 XML을 이용해서 수식을 표현

=> 현재는 firefox에서만 사용 가능

10. Off-Line API

=>Application Cache를 이용하여 모듈을 캐싱하거나 항상 새로 받아오도록 설정할 수 있음

11. Web Communication API

=> 자신의 도메인 내의 데이터나 외부 도메인의 데이터를 가져와서 사용하는 것

=> 종류 : ajax, WebSocket

=> WebPush는 커뮤니케이션 API는 아니지만 통신 방식

=> http(https-ajax가 여기 포함) 통신은 연결형 통신(TCP)이기는 하지만 1회성

- webSocket은 TCP통신이면 명시적으로 close하지 않으면 연결이 계속 유지

tip!

1. 프로젝트 제작시 한번 로그인하면 페이지를 이동해도 로그인이 해제되지 않도록 생각해서 제작

2. 함수나 메소드를 만드는 이유

=> 함수나 메소드는 별도의 메모리 영역을 만들어서 수행

- 하나의 프로그램이 너무 커질것 같으면 분할하여 작성해야 메모리를 효율적으로 사용

=> 동일한 코드를 여러 곳에서 사용하는 경우 코드를 여러번 만들면 유지보수 시 비효율적이므로 함수를 사용

=> 서로 다른 역할의 코드를 하나의 영역에 작성시 코드 읽기가 어려워 지므로 유사한 역할의 코드를 묶어 가독성

을 높이기 위해 함수 작성

3. 웹 브라우저 하나로 다 할 수 있게

저작자표시 (새창열림)