230921 [Day3] JavaScript 주요 문법 (2)

네트워크 기초

브라우저에 URL을 입력하면 무슨 일이 발생할까요?

1. URL 을 해석한다. ( URL은 스키마, 계정정보, 호스트, 포트와 같은 정보로 이루어져있다.)
   • scheme://<user>:<password>@<host>:<port>/<url-path>
2. DNS를 조회한다. (Domain Name System)
   • 도메인과 IP주소를 서로 변환해 주는 시스템  
   • https://www.comic.naver.com 에서 'naver.com'부분은 도메인(Domain)이고, comic 부분은 호스트 네임이다.
   • uri 해석 → 브라우저 캐시 확인 없으면 → host 파일 참조, 없으면 → dns 호출 → root server → TLD server → Authoritative server → ip주소 반환
   • uri 해석 → 브라우저 캐시 확인 없으면 → host 파일 참조, 있으면 → ip주소 반환
   • uri 해석 → 브라우저 캐시 있으면 → ip주소 반환 
     • 호스트 네임
       • 네트워크에 연결된 장치들에게 부여되는 각각의 고유한 이름으로 각각의 서비스를 구분하고자 사용한다. 
       • 호스트(나)가 다른 호스트와 데이터를 주고받기 위해, 자신들을 구분하는 특수한 번호를 가지고 있는데, 이것을 IP주소라고 부른다. 
         • 로컬 호스트(localhost) : 호스트 자신을 가리키는 고유 별칭
         • localhost는 IP주소 127.0.0.1로 설정되어 있다.
         • 우리가 문자열로 표현된 인터넷 주소로 웹사이트에 접속할 수 있는 것은, 웹 브라우저가 도메인과 연결되어 있는 IP 주소를 찾아서 이동해주기 때문이다. 
3. 해당 IP 가 존재하는 서버로 이동한다.
   • 라우터를 거쳐서 이동하는데 동적라우팅을 통해 이동한다.
     • 라우터 : 컴퓨팅 디바이스와 네트워크를 다른 네트워크에 연결하는 네트워킹 디바이스
     • 동적라우팅 : 프로토콜을 이용해 소스에서 대상까지 가장 빠른 경로를 찾는 방법
   • 한국에서 미국에있는 서버를 요청할 경우, 네트워크 장비인 라우터를 통해 해당 서버가 존재하는 영역으로 접근함
4. ARP 를 이용하여 MAC 주소 변환한다.
   • (IP=논리적인 주소, MAC=물리적인 주소) 기계의 실제 위치를 알기 위해서는 MAC 주소가 필요하다.
   • 네트워크 안에 ARP를 브로드캐스팅 → 해당 IP주소를 가지고 있는 기기가 MAC 주소 반환
   • 도로명, 지번 주소 = IP / GPS 주소 = MAC
   • 비유하자면 라우터를 타고 타고 진짜 물리적 주소까지 간다 = 택배가 허브를 거쳐 주소로 간다.
5. TCP 통신을 통해 Socket을 열어야 한다.
   • 실제 소켓을 열어 허락을 받아야 데이터 전달 가능
   • TCP 연결을 허락 받기 위해 3 way handshake 를 이용해 연결 요청
     • TCP : 데이터를 메세지 형태로 보내기 위해 IP와 사용하는 프로토콜
     • 3 way handshake : TCP/IP 프로토콜을 이용해서 통신을 하는 응용프로그램이 데이터를 전송하기 전에 먼저 정확한 전송을 보장하기 위해 상대방 컴퓨터와 사전에 세션을 수립하는 과정
   • 요청이 허락되면 데이터를 서버로 전달
6. 서버는 응답을 반환합니다.
   • HTTP 프로토콜로 들어온 패킷을 읽고 처리한다.
   •  url 입력 → html 반환
7. 브라우저는 렌더링합니다.
   • HTML을 읽어 DOM Tree 를 구축한다. 만들어진 Dom Tree를 이용하여 화면에 그린다.

http가 있는데 https가 왜 필요할까요❓
HTTP는 정보를 text 형식으로 주고받기 때문에 중간에 인터셉트할 경우 데이터 유출이 발생할 수 있어 이를 해결하고자 HTTP에 암호화를 추가한 프로토콜인 HTTPS를 사용한다. 

 

컴퓨터 시간 원리

시간이 뭘까요? 어떻게 결정될까요?

• 물리량 
  • 시간은 물리학 관점에서 시각과 시각 사이 간격을 표현하는 단위
• 위치
  • 시간은 위치에 따라 다르게 표현될 수 있다.
  • 경도상 위치, 국가, 지역
• 천문 현상 
  • 지구 자전속도의 불규칙성, 지구의 자전주기와 공전주기 등 천문 현상으로 인한 시간 보정이 필요하다.
  • 윤초, 윤달, 윤년
• 문화, 역사적 사건, 사회적 제도
• 협정 세계시(UTC) : 원자 시계와 윤초 보정을 기반으로 표준화한 시각

 

컴퓨터가 시간을 표현하는 방법 

• 하드웨어의 시스템 클럭을 이용
  • 시스템 클럭
    • RTC(Real Time Clock) 모듈 사용
    • RTC는 메인보드에 붙어있어 전원을 꺼도 계속 작동, 카운터 회로를 통해 클럭 발생
• 특정 시각을 기준으로 시스템 클럭의 틱을 세는 것으로 구현 → 시스템 시간
• 시스템 시간을 값으로 표현한 것 → 타임스템프
• 타임스템프는 운영체제마다 기준 시간과 단위가 다를 수 있다.

 

현재 시간을 어떻게 알아낼까?

• 시스템 시간을 네트워크 타임 프로토콜(NTP)를 통해 동기화 할 수 있다.
• NTP 서버에 네트워크 요청을 하여 현재 시간을 받을 수 있다.
  • NTP 서버는 계층(Stratum)으로 이루어짐

JavaScript에서 사용법

• 간단하게 Data 객체 사용, moment.js(Time Zone 사용)

 

암호화 기초

암호화

• 평문을 해독할 수 없는 암호문으로 변환하는 것
• 단방향(해싱) 암호화
  • 해시 알고리즘을 이용하여 평문을 복호화 할 수 없는 형태로 암호화한다.
    • 해시 알고리즘 : 
  • MD5, SHA 알고리즘 → 해시 충돌이 발생할 수 있어서 사용 권장X
  • 사용자 비밀번호 저장할 때 자주 사용
  • 고려할 점 
    • 복호화가 불가능하지만 Rainbow Table을 통해 원문을 알아낼 수도 있다.
      • Rainbow Table : 평문과 해시 함수로 만든 문자열을 모두 저장시켜 놓은 표
    • 사고로 암호화된 데이터를 탈취당한다면 원문을 알아 낼 수 없도록 Salt, Key stretching을 이용하여 해결
      • Salt
        • 평문에 임의의 문자열 추가하여 암호화하는 방법
        • 재료에 소금을 더하는 것에서 비유
        • 128bit 이상으로 만들 것을 권장
      • Key stretching
        • 해시를 여러 번 반복하여 원문을 알기 힘들게 만드는 방법
        • 0.2초 이상 반복되면 안전
• 양방향 암호화
  • 평문을 복호화 할 수 있는 형태로 암호화하는 방법
  • 대칭키와 비대칭키(RSA) 알고리즘으로 나뉨
    • 대칭키 암호 알고리즘 
      • AES(Advanced Encryption Standard)
      • 같은 키를 이용하여 암호화, 복호화 가능
    • 비대칭키 암호 알고리즘
      • RSA(Rivest, Shamir and Adleman)
      • 공개키와 개인키 두가지 존재
      • 소인수 분해를 기반으로 만들어진 알고리즘

 

브라우저는 암호를 어떻게 보관할까?

• 크롬, 사파리, 1password는 암호를 보관하고 동기화 해준다.
  • 1password는 기업내 여러 비밀번호를 권한 별로 공유가 가능하도록 기능 제공
  • 모든 사람들이 같은 키를 공유하지는 않을텐데 어떻게?
    • 사용자의 암호와 이메일을 이용하여 master unlock key 생성(AES의 대칭키가 됨)
    • 자동 생성 된 평문을 AES를 통해 암호화하고 서버에 저장
    • 평문은 PGP의 암호를 사용 -> 평문 정보는 제거하고 아무도 알 수 없게 
    • 개인키는 사용자에게 전달하고 공개키는 서버에저장 
    • 데이터를 PGP공개키를 이용하여 암호화 할 수 있다.
    • 이때 각 공개키에 대응되는 비밀키로 복호화 가능
  • JavaScript에서 이용하려면 crypto-js 라이브러리를 사용

 

함수형 프로그래밍

패러다임

• 프로그래머에게 프로그래밍의 관점을 갖게 해주고 결정하는 역할을 한다.
• 프로그래밍 세상을 바라보는 렌즈, 색안경
• 프로그램은 순차, 분기, 반복, 참조로 나눠지고 패러다임은 이를 어떻게 이용할 것인가를 다룬다.
• 객체지향 : 객체라는것을 통해 데이터와 메서드를 묶고, 객체 간 통신을 함으로써 프로그램이 작동함
• 함수형 : 데이터를 함수로 이용해 새로운 데이터를 만들어 나가는 데이터 파이프 형태로 프로그램이 작동함
  • 객체지향 추상화의 최소 단위는 객체 / 함수형은 함수가 최소 단위
  • 함수 단위로 나눠지므로 재사용성이 높다
  • 데이터의 불변성을 지향함. 동작을 예측하기 쉬움. 사이드 이펙트를 방지하는 장점이 있음. → 스레드들을 통한 동시성 문제도 해결함
  • 객체지향은 순차, 분기, 반복, 참조를 전환을 객체를 통해 간접으로 통제
  • 함수는 변수할당을 통제하여 4가지 제어흐름을 통제한다고 볼 수 있음.
  • 함수형 프로그래밍의 장점
    • 상태가 없기 때문에 사이드 이펙트가 없다.
    • 재사용성이 높다.
    • 코드가 짧고 간결하다.
  • 함수형 프로그래밍의 단점
    • 상태를 관리하기 위해 불필요한 메모리와 성능이 낭비될 수 있다.
    • 너무 많은 함수들을 관리하기 힘들 수 있다.
    • 코드를 짜는게 어려울 수 있다.

 

선언형 프로그래밍

• 객체 지향이나 함수형처럼 설계에 대한 패러다임이 아닌, 사고에 대한 패러다임 이라 볼 수 있다.
• 기존 명령형 프로그램은 문제를 어떻게 해결해야될지, 컴퓨터에 명령을 내리는 방법
  • if, switch, for ... control flow
  • 변수를 선언하고, 데이터를 데입한 후 루프를 돌면서 조건에 따라 출력한다. 라는 명령을 내린다.

let a = [1,2,3,4,5];
for (let i = 0; i < 5; i += 1) {
    if(a[i] % 2 === 0) {
        console.log(a[i]);
    }
}

• 반면 선언형 프로그래밍은 무엇을 해결해야될지에 집중하고, 해결방법은 컴퓨터에 위임하는 방법
  
  • pipe, 재귀 ... data flow
  • 선언형 코드는 먼저 무엇이 필요한지 분석해야한다.
  • 데이터중 짝수만 걸러내는것이 필요하고, 출력하는 것이 필요하다.
  • 필요한 요구사항만 구현하여 사용하면 데이터는 자동으로 원하는 결과값으로 출력된다.

[1,2,3,4,5]
    .filter((item) => item % 2 === 0)
    .forEach((item) => console.log(item));

javaScript는 멀티패러다임이 가능하므로 객체지향과 함수형으로 나눌 필요 없이 둘 다 사용하자! 

 

객체지향과 프로토타입

객체지향의 객체란?

• 현실에 있는 것을 추상화한 것
  • 추상이란 사물이 지니고 있는 여러 측면 중 특정한 부분만 보는 것

객체지향이란?

• 객체 위주로 설계하고 프로그래밍 히는 패러다임
• 객체지향 언어에서는 추상화의 최소 단위가 객체이다.
• 각각의 객체는 메시지를 주고받을 수 있다.
• 객체끼리 메시지를 주고 받고, 전환을 객체를 통해 통제한다.

객체지향의 오해?

• c언어(절차지향언어)에서는 객체 지향프로그래밍을 할 수 없다?
  • 언어와 패러다임은 관계가 없다
• 패러다임에 우위가 있다?
  • 간단한 프로그램의 경우 절차지향 복잡한 프로그램의 경우 객체지향이 유리

 

프로토타입

• 자바스크립트의 객체
  • 클래스 기반 언어처럼 속성과 행위를 정의할 수 있다.
  • 객체 생성방법
    • {} 객체 리터럴을 이용하여 만들기
    • new Object 사용하기
    • 생성자 함수를 이용하여 만들기
• 프로토타입을 만드는 이유
  • 공통으로 들어가는 부분을 공유하여 메모리를 아끼기 위함
  • 프로토타입을 이용하면 상위 객체를 복사하여 새로운 객체를 만들 수 있다.

function Person(name, company, move) {
  this.name = name;
  
  Person.protype.getName = function() {
    return this.name;
  };
  Person.protype.setName = function(name) {
    this.name = name;
  };
}

const Lee = new Person("이진아");
const kim = new Person("김진아");
console.log(Lee); // Person { name: '이진아" }
console.log(Person.constructor); // [Function, Function]
console.log(Person.__proto__); // [Function]
console.log(kim.constructor); // [Function: Person]
console.log(song.__proto__); // Person { getName : [Function], setName: [Function] }

 

효과적인 프로토타입을 위해서

• 상속 흉내내기(1) : 부모 객체를 이용하여 프로토타입 함수 정의하기

function Person(name) {
  this.name = name;
}

Person.prototype.getName = function () {
  return this.name || "진아";
}

function Korean(name) {}
Korean.prototype = new Person();

const Lee = new Person("이진아");
const kim = new Korean("김진아");
console.log(Lee.getName()); // 이진아
console.log(kim.getName()); // 진아

• 상속 흉내내기(2) : 부모 생성자를 빌려 쓸 수 있다.

function Person(name) {
  this.name = name;
}

Person.prototype.getName = function () {
  return this.name || "진아";
}

function Korean(name) {
  Person.apply(this, arguments);
}
Korean.prototype = new Person();
Korean.prototype.setName = function(name) {
  this.name = name;
};

const Lee = new Person("이진아");
const kim = new Korean("김진아");
console.log(Lee.getName()); // 이진아
console.log(kim.getName()); // 김진아
kim.setName("박진아");
console.log(kim.getName()); // 박진아

• Object.create : 기존 객체를 재활용할 수 있다.

const Lee = {
  name: "이진아",
  getName: function() {
    return this.name;
  },
};

const kim = Object.create(Lee);
kim.name = "이진아";

console.log(Lee.getName()); // 이진아
console.log(kim.getName()); // 김진아
console.log(lee.__proto__); // {}
console.log(kim.__proto__); // { name: "이진아", getName: [Function: getName] }

 

이벤트 루프

• JavaScript 는 대표적인 Single Thread 언어이다?
  • JavaScript 의 Call Stack 은 하나만 존재. 그래서 실제로 Single Thread 로 동작한다.
• 그렇다면 브라우저에서 실행되는 script 는 어떻게 비동기적으로 데이터를 불러오고 애니메이션을 실행시킬까?
• 어떤 원리로 애니메이션과 클릭이벤트를 같이 처리할 수가 있는 걸까?
  • 브라우저에 이벤트루프 라는 시스템이 있기 때문!
  • 이벤트루프가 자바스크립트의 기능이 아니며 이벤트루프는 자바스크립트 엔진에 포함되어있지 않다.
  • 브라우저나 node.js 에서 자체적으로 관리를 하고 있다.
  • Web APIs ( DOM Events, AJAX, TIMER) = 브라우저에서 제공하는 API
  • Click 과 같은 DOM 이벤트나, 네트워크 호출, 타이머 등은 실행시킬 때 브라우저에 위임된다. 
• 자바스크립트 엔진은 heap과 call stack으로 이루어져 있다.
  •  이벤트 루프는 콜 스택에 현재 실행 중인 실행 컨텍스트가 있는지, 태스크 큐에 대기 중인 함수(콜백 함수, 이벤트 핸들러 등)가 있는지 반복해서 확인한다.
  • 만약 콜 스택이 비어 있고 태스크 큐에 대기 중인 함수가 있다면 이벤트 루프는 순차적으로 테스크 큐에 대기 중인 함수를 콜 스택으로 이동시킨다. 이때 콜 스택으로 이동한 함수는 실행된다. 
  • 즉, 태스크 큐에 일시 보관된 함수들은 비동기 처리 방식으로 동작한다. 

• 자바스크립트는 싱글 스레드로 동작하지만 브라우저는 멀티 스레드로 동작한다.

 

모듈

• 웹사이트는 여러개의 자바스크립트로 이루어져있다.
• 자바스크립트는 파일들을 각각 별개의 프로그램으로 취급하는데, 만약 스크립트 파일이 계속해서 늘어난다면 관리가 힘들어진다.
• 과거 자바스크립트는 스크립트간 통신을 위해 전역 스코프에 존재하는 변수와 함수를 사용해야 했다.
  • 스크립트 파일간 의존도를 확인하기 힘들고, 실행 순서를 어렵게 제어해야했다.
• 모듈을 사용하면 의존도 확인이 쉽고, 실행 순서 제어도 쉽다.
• 모듈vs컴포넌트
  • 모듈은 설계 시점에 의미있는 요소 (우리가 의식적으로 나눠 놓은것)
  • 컴포넌트는 런타임시 의미있는 요소 (나눠놓은 요소에 포함되어 실행되는 요소)
• 모듈은 로컬 파일에서 동작하지 않고 HTTP 또는 HTTPS 프로토콜을 통해서만 동작하기 때문에 서버를 실행시킬 필요가 있다.
• 모듈 기초 사용 방법

//hello.js
export function hello(name) {
    alert(`Hello, ${name}!`);
}

//index.html
<body>
<script type="hello">
    import { hello } from './hello.js';

    hello('John');
</script>
</body>

• 스크립트 속성으로 타입이 모듈로 되어있다 -> 모듈로 동작한다는 의미
• 모듈로 동작하게 되면 Import 를 통해 다른 파일을 불러올 수 있다 -> hello.js 불러옴
• 내보낸 hello를 import 하고 실행하면 브라우저에서 정상적으로 실행된 것 을 확인할 수 있다.
• -> alert = Hello John! 

 

모듈의 특징

• 항상 use strict 로 실행된다
  • 일반 스크립트는 let 이나 var 을 생략하고 변수선언이 가능하다. 이 경우 전역 스코프에 저장된다.
  • 반면 모듈 스크립트는 엄격모드로 동작하기 때문에 허용되지 않는다.
• 모듈 레벨 스코프가 있다
  • 모듈은 최상위에 변수를 선언하더라도 전역스코프에 올라가지 않고 자체적 모듈레벨 스코프에 올라간다.
  • 일반 스크립트는 최상위에 선언하면 전역 스코프에 선언되어 다른 스크립트에서도 참조가 가능하지만 모듈 스크립트에선 import 를 하지 않는 한 서로 참조가 불가능 하다.
• 단 한번만 평가된다
  • 두번 import 되더라도 실행은 단 한번만 된다.
  • 만약에 내보내기를 하더라도 이미 평가된 것을 불러와서 사용한다.
• 지연 실행이 된다
  • 일반 스크립트는 바디 태그에 넣을 경우 순서에 따라 돔이 생성되기 전에 실행될 수 있다.
  • 하지만 모듈 스크립트는 defer 옵션을 넣지 않아도 자동으로 지연실행이 된다.
  • 모든 돔이 만들어 진 후에 실행이 된다.

요즘은 Webpack 과 같은 모듈 번들러를 사용하기 때문에 크게 모듈 스크립트를 사용할 일이 많지 않다.

번들링 한 스크립트 하나만 불러오면 끝!

 

유니코드

• 웹에서 문자가 표현되는 방법이다.
• (값 + 글꼴) ==렌더링엔진==> 표시 의 과정을 거친다.
• ccs(coded character set)
  • 문자들을 코드포인트에 대응시켜 만든 코드화된 문자들의 집합
  • 코드포인트는 character의 식별자가 된다.
    • 코드포인트 : 문자 집합에 있는 문자의 숫자 표현!
  • 아스키코드
• ces(character encoding scheme)
  • ccs를 8bit 집합에 대응시키는 것 (8bit은 문자를 표현하는 기본단위이기때문에 사용)
  • ccs와 ces는 일대일로 대응된다
  • 인코딩이라고 부른다.
    • 인코딩 : character를 시스템이 인식할 수 있는 값으로 변환하는 것
    • 디코딩 : 인코딩된 값을 다시 character로 변환하는 것
• tes(transfer edcoding syntax)
  • 인코딩된 문자가 프로토콜을 타고 전송되도록 변환한것
  • url에서 공백 사용 불가하기 때문에 변환을 해야함 -> 통신 프로토콜에 제약

 

정규표현식

• 일정한 패턴을 가진 문자열의 집합을 표현하기 위해 사용하는 형식언어
• 정규표현식은 패턴을 이용하여 문자를 검색, 대체, 추출한다. -> 성능은 느리지만, 이용이 편하다.
• 정규표현식 표현 방법
  • /regexr/i 
  • /(슬래시) 시작과 종료를 나타낸다 / 슬래시 안에 패턴을 집어 넣음 / 종료슬래시 뒤에 글자 하나를 써서 플래그를 세움
  • 배열,객체처럼 리터럴로 생성 가능하다.

const target = 'Is this all there is?';

//패턴: is
//플래그: i -> 대소문자 구별x
const regexp = /is/i;

//test 메서드는 target 문자열에 대해 정규 표현식 regexp의 패턴을 검색하여 매칭 결과를 불리언값으로 반환
regexp.test(target); //true

• js에서는 new RegExp() 형식으로 정규표현식을 만들 수 있다.

const target = 'Is this all there is?';

const regexp = new Regexp(/is/i);
//const regexp = new Regexp(/is/, 'i');
//const regexp = new Regexp('is', 'i');

regexp.test(target); //true

 

정규식 관련 메서드

• RegExp.prototype.test() : 찾는 패턴이 있으면 true 없으면 false
• RegExp.prototype.exec() : 입력받은 문자열에 찾는 패턴이 있는지 검색후 있으면 패턴정보 반환, 없으면 null 반환
• String.prototype.match() : 찾고자 하는 패턴이 있는지 검색하는 기능
• String.prototype.replace() : 찾고자 하는 패턴을 원하는 문자열로 바꾸는 기능
• String.prototype.search() : 패턴이 있는지 찾은후 위치정보를 반환하는데, 무조건 제일 처음 위치 반환

 

쿠키와 세션, 웹 스토리지

• HTTP 통신
  • HTTP Request는 기본적으로 상태가 존재하지 않는다.
  • 따라서 서버는 어떤 브라우저에서 요청이 온 것인지 알 수 없다.
  • 이때 헤더에 쿠키를 담으면 서버가 쿠키를 읽어 어디서 온 것인지 알 수 있다.

쿠키

• 클라이언트에서 저장, 관리하는 데이터들, 브라우저를 닫아도 데이터를 유지할 수 있다.
• 서버에서 Set-Cookie를 응답 헤더로 내려주면 클라이언트는 받아서 저장한다.
• 클라이언트에서 자체적으로 조작할 수 있다.
• 각 상태에 수명을 정할 수 있다.

 

Set-Cookie

• Set-Cookie: 키=값, 옵션
• 응답헤더에 담으면 브라우저가 알아서 저장한다.
• 각 데이터엔 여러 옵션이 존재한다.
  • expires : 쿠키 만료 날짜를 지정한다.
  • HttpOnly : JavaScript에서 쿠키에 접근 못하도록 막는다.
  • Max-Age: 쿠키 수명을 정한다. 이때 Expires는 무시된다.
  • Domain : 도메인이 일치하는 요청만 쿠키가 전송된다.
  • Path : 패스와 일치하는 요청만 쿠키가 전송된다.

 

쿠키의 취약점

• XSS(Cross-Site Script) 공격을 당할 수 있다.
• JavaScript를 이용해 악의적인 사용자가 다른 사용자의 쿠키값을 탈취할 수 있다.
• 쿠키를 암호화하지 않고 보내면 쿠키값을 중간에 탈취 당할 가능성이 있다. (HTTPS로 해결)

 

서버는 쿠키 주인을 모른다. 서버가 사용자를 구분하려면?

• Session
  • HTTP Session Id를 식별자로 사용자를 구분한다.
  • 클라이언트는 HTTP Session Id를 쿠키 형태로 저장한다.
  • 서버 자체적으로 기록하고 관리한다.
• 세션의 문제점
  • 세션을 서버에 파일로 저장하기 때문에 사용자가 많아지면 메모리 관리가 어렵다.
  • 때문에 서버와 클라이언트간 인증은 별도 토큰을 사용
  • 쿠키는 클라이언트 자체의 지속적인 데이터 관리 용도로 많이 사용된다.

 

웹 스토리지

• 클라이언트에 데이터를 저장하기 위한 새로운 방법
• HTML5부터 등장했다.
• 쿠키에서 하기 힘든 것들을 지원하기 위해 등장했다. (쿠키 대신 로컬데이터 관리)
• Local Storage와 Session Storage가 있다. 

 

Local Storage

• 로컬 스토리지에 데이터를 저장하면 반영구적으로 데이터가 저장된다.
• 브라우저를 종료해도 계속해서 데이터가 남는다.
• 저장했던 도메인과 이용하는 도메인이 다른 경우엔 접근할 수 없다.
• 쿠키와 마찬가지로 Key-Value 형태로 저장한다.

 

Session Storage

• 새 창을 생성할 때마다 개별적으로 저장되는 데이터를 관리한다.
• 브라우저를 닫는 순간 사라진다.
• 같은 도메인이어도 세션이 다르면 데이터에 접근할 수 없다.
• 쿠키와 마찬가지로 Key-Value 형태로 저장한다.

 

쿠키는 스트링으로 관리해서 함수를 만들거나 라이브러리를 써야 편하지만

로컬스토리지는 setItem, getItem, removeItem 를 사용해서 사용이 간편하다.

 

 

IndexedDB

• Transactional한 로컬 데이터베이스
• 새로운 웹 브라우저 표준 인터페이스
• 많은 양의 구조화된 데이터를 저장할 때 유용하다.
• 비동기적으로 작동한다.