웹 스토리지
개요
전형적인 스토리지 시스템의 형태
- 웹서버를 통해 다량의 데이터를 저장하여 사용하였고, 만약 네트워크가 끊어진 경우에는 데이터를 사용할 수 없고, 항상 서버로부터 데이터를 읽어와야 했기 때문에 성능상의 문제점도 있었다.
- HTML5의 체제로 넘어와서는 서버 의존적이였던 형태를 탈피하기 시작했다.
- HTML5의 표준은 네트워크가 가능하지 않은 상태에서도 스스로 독립적으로 동작할 수 있는 웹 어플리케이션의 형태를 가능하게 만들었다.
웹 스토리지의 등장
- 쿠키는 클라이언트의 단편적인 정보만을 관리하는 데 국한되고, 문자열만 저장할 수 있다는 특성 때문에 데이터 관리 시스템으로써는 턱없이 부족하다.
- HTML5의 웹 스토리지는 이러한 쿠키에 대한 보안이라고 할 수 있다.
- 웹 스토리지는 웹 표준 API를 통해 데이터를 생성, 저장, 사용이 가능하다.
- 웹 스토리지와 쿠키의 특징을 간략하게 비교한 것이다.
- 웹 스토리지의 저장 프로세스는 크게 두 가지로 나눌 수 있다.
- 하나는 로컬 스토리지(Local Storage)이고, 또 하나는 세션 스토리지(Session Storage)인데, 두 개로 나눈 것은 데이터 정보가 세션 단위에서 관리할 것인지, 도메인 단위에서 관리할 것인지에 대한 차이이다.
웹 스토리지 데이터 저장 유형
- 로컬 스토리지 : 자동 로그인
- 세션 스토리지 : 입력 폼 정보, 비로그인 장바구니, 글쓰기 하다가 사용자가 창을 벗어난 경우 관련 내용 복구
웹 스토리지 API
- 웹 스토리지에는 기능적으로 로컬 스토리지와 세션 스토리지로 나누어지지만, 사용하는 API는 동일하다.
object{key:value} 타입으로 저장이 된다.
로컬 스토리지(Local Storage)
- 데이터 저장
웹 스토리지의 데이터는 키와 값을 한 쌍으로 관리한다.
<body>
키 : <input type="text" id="key">
값 : <input type="text" id="data">
<br><br>
<input type="button" onclick="saveData()" value="데이터 저장">
<br><br>
<div id="result"></div>
<script>
var key = document.getElementById("key");
var data = document.getElementById("data");
function saveData()
{
localStorage.setItem(key.value, data.value);
document.getElementById("result").innerHTML = "데이터 저장 완료";
}
</script>
</body>
key값을 불러오는 방식
var data = localStorage.getItem(key)
var data = localStorage.key;
var data = localStorage.[key];
<body>
키 : <input type="text" id="key">
값 : <input type="text" id="data">
<br><br>
<input type="button" onclick="saveData()" value="데이터 저장">
<input type="button" onclick="loadData()" value="데이터 읽기">
<br><br>
<div id="result"></div>
<script>
var key = document.getElementById("key");
var data = document.getElementById("data");
function saveData()
{
localStorage.setItem(key.value, data.value);
document.getElementById("result").innerHTML = "데이터 저장 완료";
}
function loadData()
{
document.getElementById("result").innerHTML = "";
for(var i = 0; i < localStorage.length; i++)
{
var myKey = localStorage.key(i);
document.getElementById("result").innerHTML +=
myKey + " : " + localStorage.getItem(myKey) + "<br>";
}
}
</script>
</body>
- 데이터 삭제
localStorage.removeItem(key)
delete localStorage.key
delete localStorage[key]
세션 스토리지(Session Storage)
- 로컬 스토리지와 세션 스토리지의 비교
두 스토리지는 사용방법은 같지만 동작 방식에는 차이가 있다.
도메인 : 사이트 하나가 하나의 도메인이 된다.
크롬 브라우저의 로컬 스토리지가 존재하는 것이 아니라 구글, 네이버의 로컬 스토리지가 각각 다름.
세션 스토리지는 브라우저 단위로 존재함.
- 세션스토리지 API
웹 워커
1개의 프로세스, 적어도 1개의 스레드
개요
웹 워커란
- 자바스크립트 코드를 백그라운드에서 실행시키기 위한 기술
- 기존 웹표준에서는 멀티 스레드가 지원되지 않음.
- 멀티스레드란 여러 작업을 동시에 수행하는 것을 뜻함.
- 웹워커가 멀티스레드 역할을 한다.
웹 워커의 생성 및 사용법
- 워커의 생성 방법 - HTML 페이지 안에서 Worker라는 객체를 통해 생성
- new 연산자를 통해 객체 생성, 전달인자로 worker.js를 넘겨주어야 한다.
백그라운드에서 실행시키기 위한 기술
-
워커 객체를 통해 제공되는 메소드와 이벤트
-
postMessage() 메소드
postMessage() 메소드에 메시지를 전달인자로 넘긴다.
이 메시지는 워커로 전달된다. -
onmessage 이벤트
postMessage() 메소드에 의해 전달된 메시지를 event로 받는다.
postMessage()를 통해 메시지를 전달한 곳으로 다시 메시지 전달 가능.
이벤트가 발생하면 실행되는 콜백함수. 콜백함수에는 전달인자가 꼭 들어온다.
- 워커의 동작 구조
HTML5 메인 문서와 웹워커 사이에 postMessage() 메소드를 통해서 서로 양방향 메시지를 주고 받을 수 있다.
웹 워커 API 사용하기
웹 워커 미적용 코드
- 웹 워커를 적용하지 않는 코드이다.
- 수행시간은 5초로 하는 워커 미적용 수행 버튼 생성
- 또 하나의 버튼 '깨어날 시간' 생성
- '워커 미적용 수행' 버튼 클릭 시 5초간 다른 곳으로 포커스 이동 불가
- 5초간 반복을 계속하는 것이다. 즉, 자원을 독점하는 시간이다.
<body>
<button onclick="stopOperation()">워커 미적용 수행</button>
<button onclick="awake()">깨어날 시간</button>
<div id="result"></div>
<script>
function stopOperation()
{
var endTime = new Date().getTime() + 5000;
while(new Date().getTime() < endTime){};
document.getElementById("result").innerHTML = "일어날 시간입니다.";
}
function awake()
{
alert("일어날 시간");
}
</script>
</body>
웹 워커 적용 코드
- 일반 응용 프로그램의 멀티스레드 기법과 같다.
- 자원의 독점 문제를 해결하기 위해 웹에서는 웹 워커가 존재한다.
- 웹 워커 파일을 물리적으로 만든다.
worker = new Worker("worker.js");코드를 통해 객체 생성 시 worker.js 파일을 가져온다.- postMessage() 함수를 통해 워커로 메시지를 보낸 후, worker.onmessage = function(event) 이벤트를 등록하여 워커로부터 들어오는 메시지를 수신한다.
- 오래 걸릴만한 기능을 worker.js 웹 워커에 작성
스레드 : 비동기방식
요청이 들어올 때마다 처리가 되면 좋겠지만 시간이 오래 걸리는 요청을 처리하기 위해 기다려야 하는 경우 , 빨리 처리 가능한 일을 먼저 처리하고 오래 걸리는 작업을 별도로 처리함
비동기와 동기를 구분하는 방법
함수를 호출 했을 때 리턴값이 없어도 다음 시퀀스에 영향을 주지 않는다면 비동기
리턴값이 있어야 다음 시퀀스로 진행할 수 있는 경우 동기
웹 워커 에러 처리
-
코드의 양이 많아져 복잡도가 증가하면 이에 대한 오류를 검출하기 쉽지 않다.
-
이에 웹 워커는 에러를 확인하고 에러 정보를 리턴하는 이벤트를 제공한다.
-
onerror 이벤트 사용법
-
error 이벤트를 통해 얻을 수 있는 정보
웹 워커 종료
- 웹 워커 종료 메소드
오프라인 웹 어플리케이션
개요
오프라인 웹 어플리케이션을 사용해야 하는 이유
- 기존 웹 사이트 단점 - 네트워크가 물리적으로 연결되어 있어야 한다.
오프라인 웹 어플리케이션 이점
- 인터넷이 지원되지 않는 환경에서 사용 가능
- 메일은 기본적으로 인터넷 연결 시 확인 가능하지만, 웹 어플리케이션 기반이라면 오프라인에서도 내용 확인 가능
- 웹 사이트 접속 시 매번 서버 요청하지 않고, 캐시된 리소스를 사용한다. 응답성도 향상되고, 네트워크 부하도 줄일 수 있다.
어플리케이션 캐시란
-
어플리케이션 캐시란 인터넷 연결 없이 오프라인에서도 웹 사이트를 사용할 수 있도록 리소스를 캐시하는 것.
-
리소스의 요소 : HTML, CSS, javascript, 이미지, 파일, 폰트 등
-
리소스를 서버로부터 가져오는 것이 아니라 캐시되어있는 리소스를 이용.
-
오프라인 어플리케이션의 대표 사례가 구글 메일인 gmail 오프라인이다.
-
네트워크 연결이 없는 상황에서도 메일의 내용을 확인할 수 있다.
어플리케이션 캐시와 임시 인터넷 파일의 차이점
- 웹 브라우저에는 임시 인터넷 파일인 캐시가 있다.
- 로컬에 다운로드 한 리소스에 접근한다는 점에서 공통점이 있다.
오프라인 사용 여부
- 캐시는 오프라인 상에서는 동작하지 않는다.
- 어플리케이션 캐시는 오프라인 상에도 잘 동작한다.
리소스 파일 체크 방법
- 캐시는 리소스 파일을 일일히 체크한다.
- 어플리케이션 캐시는 매니페스트의 문서를 보고 변경 사항을 체크한다.
캐시 항목의 설정
- 캐시는 우리가 별도의 설정을 하지 않아도 알아서 동작한다.
- 어플리케이션 캐시는 캐시할 리소스, 제외할 리소스 등을 설정할 수 있다.
오프라인 웹 어플리케이션 API 사용하기
캐시 매니페스트 작성
- 캐시 매니페스트는 캐시할 리소스 파일을 정의한 설정 파일이다.
캐시 매니페스트는*.manifest로 저장하는 것이 관례다.
CACHE MANIFEST라는 문자열로 시작한다.
캐시 매니페스트 추가 전
-
appCache.html, appCache.css, appCache.js 세 개의 파일이 존재하고, appCache.html문서에서 각각의 css와 js 파일을 로딩하는 형태.
-
오프라인에서 이 파일을 열려고 한다면 '페이지를 표시할 수 없습니다' 표시
캐시 매니페스트 추가 후
= 세 개의 파일을 캐시 매니페스트에 추가한 형태
- manifest = "cache.manifest" 설정으로 페이지가 호출되면 캐시는 동작한다.
- 브라우저는 manifest 속성에 지정된 캐시 매니페스트를 자동으로 다운로드하여 파일에 작성된 캐시하고자 하는 모든 리소스들을 캐시한다.
캐시 매니페스트 사용 시 주의점
- 내가 캐시하고 싶은 리소스 파일만 매니페스트에 지정했다면, 지정되지 않은 리소스 파일은 캐시되지 않을 것이다.
- 대신 문제점은 다시 해당 웹사이트에 접속 시 아예 리소스를 받아오지 못하는 문제점이 생긴다.
- 캐시만 안 하겠다는 것이지 목록에서 빼는 것은 아니다.
- 캐시하지 않으려면 캐시 매니페스트 파일의 NETWORK; 항목에 추가해야 한다.
테스트 시나리오
- 최초 웹 사이트에 접속하여 캐시 매니페스트의 시나리오대로 리소스를 받는다.
- 두 번째 접속 시에는 오프라인 상태에서 웹 사이트가 제대로 동작하는지 확인
-
웹 서버를 동작시킨다. 그리고 우리가 작성한 리소스 파일(html, js, js, 이미지) 및 manifest 파일을 웹 서버 위치인 htdocs에 넣어놓는다.
-
웹 브라우저를 실행시키고, 로컬서버로 접속해 우리가 작성한 웹 페이지가 정상적으로 수행되는지 확인한다.
-
웹 서버를 중단시킨다. (웹 서버가 원격에 위치하고 있다면 랜선을 뽑아 네트워크를 끊어도 같은 효과이다.)
서버와 클라이언트가 한 PC에 공존하고 있기 때문에, 웹 서버를 중단시켜야 네트워크가 끊어진 효과를 얻을 수 있다. -
다시 웹 브라우저를 실행시키고, 로컬 서버로 접속한다.
웹 페이지가 정상적으로 수행되는지 확인한다.
작성하기
- CACHE 섹션
- 캐시 매니페스트의 중요한 섹션으로 로컬에 캐시될 항목들을 지정
- 이 섹션에 명시되어있는 파일들은 가장 처음 로드 후 캐시에 저장
- NETWORK 섹션
- 이 파일들은 무조건 온라인 상에서만 읽을 수 있다.
- 오프라인에서는 읽을 수 없다.
- FALLBACK 섹션
- 대체할 리소스를 지정하는 용도의 섹션
- 리소스 로딩 실패 시 대신 로딩할 파일을 지정
실행 결과
- 웹 서버에 접속하여 온라인으로 리소스 데이터를 브라우저에 출력
- 캐시 매니페스트를 통해 파일들이 로컬에 캐시됨
offapp.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>회원가입 페이지</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<s1>
<div id="wrapper">
<form>
<table border="0" cellpadding="3" cellspacing="1" bgcolor="#6CAEFC" align="center">
<tr>
<td bgcolor="#B6CFF1" align="center">
<b>사용자 프로필 사진</b>
</td>
<td bgcolor="#FFFFFF">
<img src="gosim.png">
</td>
</tr>
<tr>
<td bgcolor="#B6CFF1" align="center">
<b>사용자 이름</b>
</td>
<td bgcolor="#FFFFFF">
<input type="text" name="id" size="15">
</td>
</tr>
<tr>
<td bgcolor="#B6CFF1" align="center">
<b>희망 아이디</b>
</td>
<td bgcolor="#FFFFFF">
<input type="text" name="id" size="15">
</td>
</tr>
<tr>
<td bgcolor="#B6CFF1" align="center">
<b>닉네임</b>
</td>
<td bgcolor="#FFFFFF">
<input type="text" name="nickname" size="15">
</td>
</tr>
<tr>
<td bgcolor="#B6CFF1" align="center">
<b>비밀번호</b>
</td>
<td bgcolor="#FFFFFF">
<input type="password" name="pw" size="15">
</td>
</tr>
</table>
<br>
<center>
<!-- <a href="message.html">회원가입</a> -->
<input type="button" value="회원가입">
</center>
</form>
</div>
</s1>
</body>
</html>cache.manifest
CACHE MANIFEST
#version 1.0
CACHE:
offapp.html
style.css
gosim.png
NETWORK:
FALLBACK:style.css
s1 {
font-size : 14pt;
font-family: 굴림;
}
bitnami 설치 후 htdocs 폴더에 파일들을 옮기고 로컬서버로 한 번 접속한 후, apache서버를 끈 후 다시 접속하면 저장된 캐시로 인해 서버가 꺼져도 정상적으로 접속된다.
