HTML5에 유용한 API가 여럿 추가가 되었다. 일부는 브라우저에서 지원하지 않기도 하지만 매우 유용한 것들이 많다.
Geolocation
LocalStorage, SessionStorage
FIle
Geolocation API(GPS)
앱 중에는 위치 기반 서비스가 있고, 모바일 폰에서 웹에서 접근하는 사용자의 위치를 가져올 수 있다. (사용자의 허용을 해야함)
네이버 홈페이지에 가서 다음 소스를 실행시켜보자.
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
alert(position.coords.latitude + ' ' + position.coords.longitude);
console.log(position);
}, function(error) {
console.error(error);
}, {
enableHighAccuracy: false,
maximumAge: 0,
timeout: Infinity
});
} else {
alert('GPS를 지원하지 않습니다');
}
}
getLocation();
|
그러나 wiki 나 google은 위 코드를 실행시 다음의 에러가 발생한다.
자세히 알진 않지만 무언가 보안 설정이 있는 것 같다.
altitude: 고도 - 값이 없다. (기계 자체가 측정하지 않는 값이면 안줄수 있나보다. 위도도 측정하나?)
latitude: 위도
longitude: 경도
speed: 해당값은 null로되어 있지만, navigation.geolocaation.watchPosition함수를 사용하면 위치값이 나오는 것같다. (잘 안댐..)
LocalStorage, SessionStorage
HTML5에서는 웹에서 사용하는 각종 정보를 저장할 수 있는 여러 방안 제공한다.
http가 stateless기 때문에 context를 담아두거나 사용자가 필요한 정보를 저장해 두는 것은 유용하다.
로컬 스토리지와 세션 스토리지의 차이점은 탭 도는 창을 닫고 열었을 때 데이터를 유지하자 않하냐 입니다.
탭 또는 창을 닫았을 때 사라지는 것은 세션입니다. 용도에 맞게 사용하시면 되고, 비밀번호 같은 민감한 정보를 저장하지 않는 편이 좋습니다.
왜냐하면, 보안상의 이유입니다. 브라우저의 window 객체는 외부에서 접근 할 여지가 있기 때문입니다.
로컬 스토리지와 세션 스토리지 모두 Storage 를 상속하여 구현하였기 때문에 공통 메소드가 많습니다.
window.locaStorage.setItem('synap', '사이냅');
window 생략 가능
localStorage.setItem('synap');
localStorage.setItem('sky', '하늘');
localStorage.removeItem('sky');
localStorage.clear();
localStorage.setItem('object', JSON.stringify(obj));
저장할 때는 객체 형태로 저장할 수 없기 때문에 toString()한 형태로 저장된다.
|
세션 스토리지도 사용법이 거의 동일 하므로 생략
File
파일 API는 필수로 다루게 될 API입니다. 브라우저마다 조금의 차이는 있지만 대체적으로 다 표준으로 구현이 되어 있습니다.
통째 코드를 한 번에 실행시켜보면서 이해하시면 좋겠습니다.
코드를 보면 함수가 세개가 있습니다. logFile, readAsText, readAsDataURI입니다.
<!DocType html>
<html>
<head>
<meta charset="utf-8">
<title>File Apis</title>
</head>
<body>
<input type="file" id="upload" multiple/>
<textarea id="text-area"></textarea>
<img src="" id="image"/>
</body>
<script>
var upload = document.getElementById('upload');
upload.onchange = logFile;
function logFile(e) {
const files = e.target.files;
console.log(files);
console.log(files[0]);
}
function readAsText(e) {
const fileReader = new FileReader();
fileReader.readAsText(e.target.files[0]);
fileReader.onload = function(e) {
const textArea = document.getElementById('text-area');
textArea.value = e.target.result;
}
}
function readAsDataURL(e) {
const fileReader = new FileReader();
fileReader.readAsDataURL(e.target.files[0]);
fileReader.onload = function(e) {
const image = document.getElementById('image');
image.src = e.target.result;
}
}
</script>
</html>
|
logFile은 단순히 인풋으로 들어온 파일 객체를 출력합니다. 이것을 보면 파일의 데이터가 어떻게 들어가 있는지 확인 하실수 있습니다.
e.target.files는 여러 파일이 들어가 있습니다. 이 예제에는 하나의 파일이 있고 하나의 파일을 로그로 찍으면 name, type 등의 정보가 있네요.
현재 주석이 되어 있는 readAsText의 주석을 풀어주면 파일을 읽어서 text area에 보여줄 것입니다. 만약, 텍스트 파일이 아니거나 인코딩이 utf8이 아니라면
이상한 문자들이 찍힐 수 있습니다.
다음 readAsDataURI로 읽어들이는 것은 이미지 파일을 읽는 방식 입니다. 이 방식은 선택한 파일을 base64 encoding하여 읽어 들인후 src에 넣어 이미지를 표현합니다.
img 태그의 src는 이미지 경로를 통해 이미지를 표현하기도 하지만 base64 encoding된 문자열을 이미지로도 표현할 수 있습니다.
이것 외에도 readAsArrayBuffer, readAsBinarytring등이 있습니다.
드래그앤드롭
우선, 코드부터 입력해봅시다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>drag and drop</title>
</head>
<body>
<p id="drag" draggable="true">드래그 아이템</p><br><br>
<div id="drop">드랍 영역</div>
</body>
<script>
document.getElementById('drag').ondragstart = function(e) {
console.log('drag start');
e.dataTransfer.setData('data', this.innerHTML);
e.dataTransfer.dropEffect = 'copy';
}
var dropArea = document.getElementById('drop');
dropArea.ondragover = function(e) {
e.preventDefault();
console.log('what is this');
e.dataTransfer.dropEffect = 'move';
}
drop.ondrop = function(e) {
console.log('something is dropped');
alert(e.dataTransfer.getData('data'));
}
</script>
</html>
위 코드는 드래그 앤 드롭의 가장 기본적인 코드입니다. HTML태그는 기본적으로 드래그 되지 않고,
속성 중 draggable이 true일 때 드래그 됩니다. 드래그하면 일반 태그가 마우스를 따라 움직입니다.
일반적인 UX/UI중 드래그하여 휴지통에 집어 넣는 것을 생각해봅니다.
파일을 마우스 왼쪽클릭으로 누른 상태로 이동을 하면 드래그 이벤트가 시작합니다.
위 코드에서도 ondragstart로 이벤트를 넣어주었습니다.
그리고 휴지통 영역 근처에 파일을 이동시키면 휴지통 뚜껑이 열린다든지 할 것입니다. 이 때 발생하는 이벤트가
ondragover이벤트 입니다. 그리고 마우스를 놓으면 파일이 휴지통으로 들어갑니다. 이때 발생하는 이벤트는
ondrop 입니다.
이번에는 파일 업로드 같은데서 지원하는 드래그 앤 드롭 처리입니다. 우선 코드를 보겠습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>file drag and drop</title>
</head>
<body>
<div style="border: 2px solid black; height:400px; width:423px;" id="drop">드랍 영역</div>
</body>
<script>
const drop = document.getElementById('drop');
drop.ondragover = e => e.preventDefault();
drop.ondrop = e => {
e.preventDefault();
const {items, files} = e.dataTransfer;
for (file of files) {
console.log(file.name, file.type);
}
if (!files) {
for (item of items) {
if(item.kind === 'file') {
console.log(item);
}
}
}
}
</script>
</html>
드랍 영역에 파일을 영역에 드랍해보세요. 콘솔로 파일에 대한 정보가 보이게됩니다. 생각보다 간단히 구현이 가능하네요.
여기서는 items와 files를 받아서 처리하였는데요, files는 file API를 사용해서 파일 처리를 하는 거구요, 구형 브라우저의 경우는
file API가 지원이 되지 않기 때문에 items에서 kind가 file인지 비교하여 처리를 하도록 되어 있습니다.
