웹 개발자 알아두면 쓸데없는 지식

HTML5 데이터 저장

- Cookie

- Web Storage

- Indexed DB

- WebSQL DB

 

https://developer.mozilla.org/ko/docs/Learn/JavaScript/Client-side_web_APIs/Client-side_storage

Client-side storage - Web 개발 학습하기 | MDN

 

크롬  Sqllite  파일 : C:\사용자\계정명\AppData\Local\Google\chrome\userData\Default\LocalStorage

IE XML파일 :C:\사용자\계정명\AppData\Local\Microsoft\InternetExplorer\DOMStore

 

https://docs.python.org/ko/3/library/sqlite3.html

sqlite3 — SQLite 데이터베이스용 DB-API 2.0 인터페이스 — Python 3.10.5 문서

https://www.sqlite.org/index.html

SQLite Home Page

 

 

https://developer.mozilla.org/ko/docs/Web/API/Web_Workers_API/Using_web_workers

웹 워커 사용하기 - Web API | MDN

웹 워커(Web Worker)  정의

HTML 페이지에서 스크립트를 실행하면 스크립트가 완료될 때까지 페이지가 응답하지 않습니다.
웹 작업자는 페이지의 성능에 영향을 주지 않고 다른 스크립트와 독립적으로 백그라운드에서 실행되는 JavaScript입니다. 웹 작업자가 백그라운드에서 실행되는 동안 클릭, 항목 선택 등 원하는 작업을 계속할 수 있습니다.

 

if ( !!window.Worker ) {
    alert('웹 워커를 지원하는 브라우저입니다.');
} else {
    alert( '웹 워커를 지원하지 않는 브라우저입니다.' );
}

 

// worker 메시지 수신 listener
self.onmessage = function( e ) {
    console.log( 'Worker가 받은 메시지 ', e.data );

    // 1초 후에 호출한 페이지에 데이터를 보낸다.
    setTimeout( function() {
        postMessage( 'Worker Value' );
    }, 1000 );
};

 

var worker = new Worker( 'worker.js' );
worker.postMessage( '워커 실행' );  // 워커에 메시지를 보낸다.

// 메시지는 JSON구조로 직렬화 할 수 있는 값이면 사용할 수 있다. Object등 
// worker.postMessage( { name : '302chanwoo' } );

// 워커로 부터 메시지를 수신한다.
worker.onmessage = function( e ) {
    console.log('호출 페이지 - ', e.data );
};

worker.terminate();

1초마다 워커로부터 데이터를 전달받는 sample

 

worker.js

var i = 0; // 1씩 증가시켜서 전달할 변수

// 메시지 수신
self.onmessage = function( e ) {
    loop();
};

// 호출한 페이지에 1씩 증가시킨 i를 1초마다 전달한다.
function loop() {

    // 1씩 증가시켜서 전달
    postMessage( ++i ); 

    // 1초뒤에 다시 실행
    setTimeout( function() {
        loop();
    }, 1000 );

}

HTML

 <button id="btnStartWorker" class="btn">워커 시작</button>
<button id="btnStopWorker" class="btn">워커 중지</button>
<div id="output"></div> 

Javascript

    var btnStartWorker = document.getElementById( 'btnStartWorker' );     // worker 실행 버튼
    var btnStopWorker = document.getElementById( 'btnStopWorker' );       // worker 중지 버튼
    var output = document.getElementById( 'output' );                     // 받은 메시지 출력
    var worker;                                                           // worker

    btnStartWorker.addEventListener( 'click', startWorker );
    btnStopWorker.addEventListener( 'click',stopWorker );

    // worker 실행
    function startWorker() {

      // Worker 지원 유무 확인
      if ( !!window.Worker ) {

        // 실행하고 있는 워커 있으면 중지시키기
        if ( worker ) {
          stopWorker();
        }

        worker = new Worker( 'worker.js' );
        worker.postMessage( '워커 실행' );    // 워커에 메시지를 보낸다.

        // 메시지는 JSON구조로 직렬화 할 수 있는 값이면 사용할 수 있다. Object등
        // worker.postMessage( { name : '302chanwoo' } );

        // 워커로 부터 메시지를 수신한다.
        worker.onmessage = function( e ) {
          console.log('호출 페이지 - ', e.data );
          output.innerHTML += e.data;
        };
      }

    }

    // worker 중지
    function stopWorker() {

      if ( worker ) {
        worker.terminate();
        worker = null;
      }

    }

참고 자료

www.slideshare.net/jidolstar/html5-web-worker
www.html5rocks.com/en/tutorials/workers/basics/
developer.mozilla.org/ko/docs/Web/API/Web_Workers_API/basic_usage
프론트엔드 개발자를 위한 자바스크립트 프로그래밍

 

웹소켓(WebSocket)은 하나의 TCP 접속에 전이중 통신 채널을 제공하는 컴퓨터 통신 프로토콜이다. 웹소켓 프로토콜은 2011년 IETF에 의해 RFC 6455로 표준화되었으며 웹 IDL의 웹소켓 API는 W3C에 의해 표준화되고 있다. 웹소켓은 HTTP와 구별된다.

https://ko.javascript.info/websocket

웹소켓

 

웹 메시징

Server-sent events

https://developer.mozilla.org/ko/docs/Web/API/Server-sent_events/Using_server-sent_events

Server-Sent Events 사용하기 - Web API | MDN