23/06/05 TIL

브라우저에 URL을 입력하면 무슨 일이 일어날까?

- 웹 사이트가 우리한테까지 보이기까지 , 무슨 작업이 일어날까? 과정별로 찬찬히 알아보자.

---

1. URL을 해석한다. (Uniform Resource Locator)

URL은 protocol,host,port,path,query,fragment로 구성되어있다.

 

- 프로토콜(protocol)

URL의 시작 부분에는 , 해당 자원에 접근하기 위해 사용되는 프로토콜이 명시된다.

예를 들어 , 웹 페이지에 접속할떄는 https프로토콜을 사용하고, 파일 전송을 위해서는 File Transfer Protocol 프로토콜을 사용할 수 있다.

 

 그럼 웹에서 사용되는 https프로토콜은 무엇일까?

---

http와 https프로토콜

HTTP

 

hyper text transfer protocol의 약자로 인터넷 상에서 데이터를 주고받으며 클라이언트/서버 구조를 가집니다.

 

클라이언트가 요청(request)를 보내면 서버는 요청을 처리해 응답(response)을 보낸다.

- 인터넷 상에서 정보를 주고 받기 위한 프로토콜

- 클라이언트 - 서버 방식

- 암호화되지 않은 방법으로 데이터를 전송해서 데이터를 변조하거나, 악의적 감청이 이루어질 수 있다.

 

- 시작점(Start Line)

 

시작점은 HTTP 요청,응답으로 요청에는 3가지 동작으로 나뉜다.

 

요청 : 

A - HTTP메소드(Get,Post,Put,Patch,Delete등)

B - 요청의 타겟 URL이 들어간다.

C - HTTP 프로토콜의 버전이 들어간다.

 

응답:

A - 프로토콜 버전

B - 요청의 성공 여부를 나타내는 상태코드(400,401,200등)

C - 상태 텍스트를 나타냄(Not Found 등)

---

HTTP 헤더

 

클라이언트와 서버가 요청, 응답으로 정보를 전송하며 이 HTTP헤더는 이름,콜론,값으로 이루어진다.

이 헤더는 크게 공통헤더, 요청헤더, 응답헤더, 엔티티 헤더 4가지의 헤더로 구분할 수 있다.

 

공통헤더(General Header)

 

요청,응답에 모두 적용되지만 최종적으로 전송되는 데이터와 관련 없는 헤더

 

Data : HTTP 메시지가 만들어진 시각을 의미한다.

요청과 응답시 자동으로 만들어지는 헤더.

Connection: 네트워크 접속을 유지할지 말지 제어함. HTTP/1.1은 keep-alive로 연결

Cache-Control : 캐시를 제어할 떄 사용된다.

Pragma : 캐시 제어. HTTP/1.0에서 쓰인 것으로 1.1에서는 Cache-Control이 쓰인다.

Upgrade : 프로토콜을 변경할 떄 사용된다.

Via : 프록시 서버의 이름,버전,호스트 명

Transfer-Encoding : 사용자에게 엔티티를 안전하게 전송하기 위해 사용되는 인코딩 형식을 지정합니다.

---

엔티티 헤더(Entity Header)

 

Content-Length : 요청과 응답 메시지의 본문 크기를 바이트 단위로 표시한다. 메시지 크기에 따라 자동으로 생성된다.

Content-Type : 컨텐츠 타입과 문자열 인코딩(UTF-8)등을 명시할 수 있다.

메시지 내용의 text/html타입이고 문자열 인코딩(UTF-8)을 지정한다.

Content-Language : 사용자들에게 언어를 설명하기 위해 사용된다.

예를들어, Content-Language: en-US를 사용하면 , 미국에서 만들어졌지만, 일부분이 영어가 아닐 수 있다.

 

Content-Encoding : 미디어 타입을 압축하기 위해 사용된다.

이 헤더를 통해 어떤 방식으로 인코딩되는지 알 수 있다.

---

요청헤더(request Header)

 

Host : 서버의 도메인 네임을 나타낸다. 이 헤더가 없는 대신 authority가 들어가 있는데,

 

https2로 인터넷 환경이 바뀌면서 host의 역할을 authority의사 헤더가 하게 되었다고 한다!!

https://stackoverflow.com/questions/36019868/authority-http-header-in-chrome-dev-tools

authority http header - in chrome dev tools

User-Agent : 현재 사용자가 어떤 운영체제와 브라우저를 이용해 요청을 보냈는지 나온다.

Accept: 서버에 요청을 보낼때, 해당 타입의 데이터를 보내줬으면 좋겠다고 명시할때 사용한다.

Authorization : 클라이언트가 서버에 인증 정보를 제공하는 헤더이고, 주로 인증된 요청을 보낼때 사용한다.

Authorization: <type><credentials>

 

Referer: 이전 페이지의 URL을 나타낸다.

---

응답헤더(Response Header)

Access-Control-Allow-Origin : 요청을 보내는 주소와 서버의 주소가 다른 경우 CORS를 발생시킨다.

Access-Control-Allow-Origin::특정 주소로 작성하거나, *를 써서 어느 곳에서든지 요청을 보낼 수 있게 할 수 있다.

 

 

Server : 서버 소프트웨어의 정보를 표현한다.

content-type:  응답하는 내용의 타입과 문자 포맷을 표현한다.

cache- control : 캐시 관리에 대한 정보를 표현한다.

vary : 캐시된 응답을 향후의 응답에 사용할 기준을 표현한다.

set-cookie : 서버에서 사용자에게 세션 쿠키 정보를 전달한다.

 

 

꼬리를 물고 공부하다 보니 HTTP 헤더에 대해 정리를 하게 되었다.., 다음으로 host에 대해 알아보자!

---

host

URL에서 host는 호스트명을 나타내는 구성 요소이다.

호스트명은 일반적으로 도메인 이름이나 IP주소로 구성되어 있다.

 

IP주소를 쓸 떄 호스트 주소 예)127.0.0.1

ex) https://www.example.com/path/to/resource 라는 URL에서 host는 www.example.com가   된다.

---

port

웹 서버에서 자원을 접근하기 위해 사용되는 관문이다.

한 컴퓨너는 하나의 IP지만, 여러 개의 커넥션을 갖게 해주는 논리적 단위이다.

 

웹 서버는 보통 80번 포트를 사용하고, 데이터베이스는 보통 3306포트 번호를 사용한다.

(웹 서버와 통신 시 사용하는 포트번호 80은 생략 가능하다)

---

path

웹 서버에서 자원에 대한 경로. 실제 물리적 경로가 아닌 추상화된 경로이다.

---

query

추가로 서버에 보내는 파라미터이다. 입력한 값에 따라 다른 결과를 보여줄 떄 쿼리 문자열을 쓴다.

여러개면 &문자로 구분한다. key1 = value1 & key2 = value2

---

Fragment identifier

URL이 지정하는 자원의 세부 부분을 지정할 떄 사용된다.

 

---

+ 그러나! HTTP2가 탄생하게 된 이유

HTTP2는 2015년 6월 처음 공개되었다. HTTP 1.1이 발표된 시점은 1997년이다. 그리고 처음 발표된 이후,

지금까지 웹은 많은 변화를 경험했고, 경험하는 중이다.

http 1.1과 http/2

HTTP 1.0

 

http1.0의 3way handshake

HTTP1.0은 Connection 한 개당 하나의 요청을 처리하도록 설계되었다.

따라서 동시에 자원을 주고받는 것이 불가능했고, 요청과 응답이 순차적으로 이루어졌다.

 

예를들어 HTTP문서 내에 리소스가 많다면(여러 이미지,여러 스타일시트 파일, 여러 자바스크립트 파일)

요청할 리소스의 개수에 비례해 대기시간(Latency)이 길어진다.

 

무거운 헤더 구조를 갖는다. 매 요청마다 중복된 헤더 값을 전송하게 되며, 이러한 반복적인 전송은 헤더의 크기도 크게 증가시킨다.

---

HTTP 1.1

HTTP1.1은 이러한 HTTP 1.0을 개선하기 위해 도입되었고 크게 3가지의 특징이 존재한다.

• 커넥션 유지(Persistent Connection)
• 호스트 헤더(Host Header)
• 강력한 인증 절차(Imporved Authentication Procedure)

먼저 커넥션 유지는 기본적으로 커넥션을 유지하고 여러 요청과 응답을 동일한 커넥션에서 처리한다.

 

http 1.0 vs http 1.1

HTTP 1.1부터는 HTTP 어플리케이션에서 TCP connection을 요청마다 close하지 않고 재사용하는데,

이렇게 한다면 기존의 HTTP 1.0의 1 Get/1 Connection과는 다르게 Persistent기능을 이용해 N Get/1 Connection을 갖는다. 요청이 끝나도 connection을 유지하는 것을 persistent connection이라고 한다.

 

호스트헤더는 하나의 IP에 여러개의 도메인을 운영할  수 없는 HTTP 1.0의 제약을 극복하기 위해 도입되었다.

하나의 IP에 여러 도메인이 붙는다.

강력한 인증 절차

 

HTTP 1.1에서 proxy-authentication, proxy-authorization 2개의 헤더가 새로 추가되었다.

이는 클라이언트-서버 사이 프록시가 위치할떄, 프록시가 사용자의 인증을 요구할 수 있게 도와준다.

 

https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Proxy-Authorization

Proxy-Authorization - HTTP | MDN

---

HTTP 1.1의 문제, 그리고 HTTP 2

 

HOL(Head of Line) Blocking이 발생할 수 있다.

위의 그림처럼, 1,2,3번의 요청을 순서대로 처리해야 할떄, 1번 요청의 처리가 늦어지면, 2번,3번 요청에 대한 응답도 처리가 지연되는 것을 볼 수 있다.

 

HTTP2에서는 Multiplexed라는 기술을 도입하였는데, 1개의 세션으로 여러 요청을 순서 상관없이 받아서 동시다발로 처리하고 응답할 수 있게 도와준다. (HOL Block문제 해결)

 

HTTP2는 각 요청을 stream형식으로 처리한다.

보면 stream weight라는 것이 있는 것을 볼 수 있는데, 각 요청마다 Priority(우선순위)를 부과한다.

예를들어 우선순위 1인 자바스크립트 파일, 우선순위 2인 CSS파일이 들어온다면,

 

무조건 우선순위를 높은 요청을 처리하는 방식을 HTTP2에서는 채택하고 있다.

 

Server Push

HTTP2는 HTML문서를 요청하면, 클라이언트의 추가 작업 없이 서버가 필요한 자원을 알아서 보내준다.

 

Header Compression

 

기존의 중복되는 헤더의 방지를 위해 허프만 코딩을 사용한 HPACK압축방식으로 이를 개선했다.

너무 어렵다..

---

2. DNS를 조회한다

먼저 DNS(Domain Name System Servers)는 URL들의 이름과 IP주소를 저장하는 데이터베이스이다.

숫자로 된 IP 주소 ex)32.245.217.105 대신 사용자가 사용하기 편하도록 주소를 매핑해주는 역할을 한다.

 

웹 브라우저는 캐싱된 DNS 기록들을 통해 해당 도메인 주소와 매핑되는 IP주소를 찾는다.

 

상황) example.com이라는 도메인 네임으로 접속을 시도한다.

 

- 브라우저는 일정 기간 유저가 방문한 사이트의 DNS정보를 기록하는데, 이 캐시를 확인한다.

- 브라우저에도 없으면 systemcall로 운영체제에 있는 모든 hosts파일을 탐색한다.

- 그 다음 router 캐시를 확인한다. 컴퓨터에서 못찾는다면, 브라우저는 라우터와 통신을 해 찾으려 한다.

- 마지막으로 못찾는다면 ISP캐시를 확인한다.

 

hosts파일은 무엇이죠?

 

-> 컴퓨터에서 도메인이름 <-> IP주소 간 매핑을 지정하는 텍스트 파일

 

만약 해당 도메인 주소와 매핑되는 IP주소를 찾을 수 없다면 OS는 DNS서버에 요청을 보낸다.

이떄 ARP프로세스를 이용하게 된다.

 

사용자 PC는 DHCP 서버에서 사용자 자신의 IP주소, 가까운 라우터의 IP주소, 가까운 DNS 서버의 IP주소를 받는다. 이 후 ARP 프로토콜을 사용해 가장 가까운 라우터의 MAC 주소를 알아낸다.

---

ARP 프로토콜(Address Resolution Protocol)

ARP프로토콜은 IP주소를 실제 물리 주소인 MAC주소로 바꿔주는 역할을 하는 프로토콜이다.

 

- 송신자가 MAC주소가 필요하므로 물리 주소 요청을 위한 ARP요청 패킷을 브로드캐스트로 전송.

- 모든 호스트,라우터가 송신자가 보낸 ARP 요청 패킷을 수신함.

- 해당되는 수신자만 자신의 논리주소인 IP주소와 MAC주소를 넣어 응답 패킷을 유니케스트로 전송

 

브로드캐스트로 목적지 IP주소를 정해 패킷 전송

 

목적지 IP주소가 일치하는 시스템이 자신의 MAC주소를 포함해 응답 유니케스트로 전송

---

3. DNS 요청

위의 과정을 마치고 ISP DNS서버에서 DNS Query를 날린다.

DNS Query의 목적은 여러 다른 DNS 서버를 검색해 해당 사이트의 IP주소를 얻는것이다.

 

이러한 검색을 recursive search이라고 부른다. IP주소를 찾을 때까지 다른 DNS서버를 오가면서 반복적으로 검색을 하게 된다. 이 과정에서 다른 DNS 서버를 name server라고 부른다.

---

4. 서버와 연결을 한다.

브라우저가 올바른 IP주소를 받게 되면 서버와 connection을 맺게 된다.

웹 사이트의 HTTP는 일반적으로 TCP 프로토콜을 이용해 서버와 연결을 하게 된다.

이떄 TCP의 3-way-handshake를 통해 클라이언트-서버간 connection이 이루어진다.

 

• 클라이언트가 SYN패킷을 보내고 connection을 열어달라고 요청한다.
• 서버가 새로운 connection을 열 수 있다면 SYN/ACK 패킷으로 응답한다.
• 클라이언트가 SYN/ACK 패킷을 서버로부터 받으면 서버에 ACK 패킷을 보낸다.

 

그 이후 서버가 요청을 처리하고 HTTP response를 보내고 브라우저가 이를 랜더링하는 과정을 겪는다.

---

컴퓨터에서의 시간

시간은 문화나 역사적 사건에 의해 시간이 다르게 결정될 수 있다 ! (태양력,태음력,에티오피아력 등등등)

UTC

UTC는 지구상의 원자 시계를 기반으로 정확한 시간을 나타낸다. 오전 10시 30분 "10:30 UTC"

모든 시간대는 UTC + 0을 기준으로 환산되고, 대한민국의 시간은 UTC + 9이다.

 

컴퓨터의 하드웨어는 시스템 클럭을 갖는다(시스템 시간). 시스템 시간을 값으로 표현한 것을 타임스템프라고 부른다.

시스템 클럭은 Real Time Clock이라는 모듈을 사용고 메인보드에 붙어있어서 전원을꺼도 잘 작동한다.

 

Unix Time

1970년 1월 1일 0시 0분 0초가 기준 시각이 되고 초 단위로 시간이 증가한다.

 

그럼 어떻게 현재 시각을 알 수 있지?

시스템 시간을 네트워크 타임 프로토콜(NTP)를 통해 동기화를 해준다.

NTP 서버는 UTC로 나타내는 시간 정보를 전달해주는데, 계층적인 구조로 이루어진다.

stream 2~15까지 계층적 트리 구조를 통해 다수 컴퓨터에 시간 정보를 전달해준다.

최상위 계층을 PRC(Primary Reference Clock)이라 부른다.

---

암호화의 기초

 

암호화는 평문을 해독할 수 없는 암호문으로 바꾸는 것을 의미한다.

암호화는 단방향(해싱)과 양방향 암호화 2가지 방법이 존재한다.

 

단방향 암호화

 

- 평문을 암호화된 형태로 변환하는데, 암호화된 데이터를 다시 원래의 평문으로 복원하는 것이 거의 불가능하다.

- 보통 해시 알고리즘을 사용하며 사용자 비밀번호를 저장할떄 등에 적용할 수 있다.

MD5,SHA알고리즘 등이 존재한다.

단방향 암호화에서 고려할 점

 

- 원문을 Rainbow Table을 통해 알아낼 수 있다.

- Rainbow Table은 평문과 해시함수로 만든 문자열을 모두 저장시켜서 놓은 표를 말한다.

 

Salt

 

- 평문에 임의의 문자열을 추가해 암호화하는 방법이다.

- 사용자마다 다른 Salt를 사용하면 더 안전하다!

 

Key stretching

 

- 원본데이터를 암호화하는데 사용되는 키를 만들떄, 추가적인 연산을 실행한다.

- 반복적으로 여러 번의 해시 함수 연산을 수행하는 방식이다.

- PBKDF2,bcrypt,scrypt 등이 있다.

 

양방향 암호화

 

대칭키를 이용하는 AES와 비대칭키를 이용하는 RSA로 나뉜다.

대칭키암호화알고리즘은 AES를 사용하는데, 암호화를 위한 키와 복호화를 위한 키가 동일하다.

 

비대칭키를 이용하는 RSA가 있는데, 공개키와 개인키 두가지 키가 존재한다.

소인수 분해를 기반으로 만들어졌다.

---

정규표현식

정규표현식은 패턴을 이용해 원하는 문자를 검색,대체,추출하는 것을 의미한다.

 

정규표현식 연습할만한 사이트

https://rubular.com/

Rubular

 

/ -> 시작을 의미하고 /와 /사이에 패턴을 넣어준다. 닫는 /이후 한 글자가 플래그를 의미한다.

예를들어 휴대폰 패턴을 찾아보자!

010-1234-5678,017-123-4566.... 결국 01X - XXX(X) - XXXX로 이루어져있으며,

 

세 자리 숫자, 하이픈, 셋 혹은 네 자리 숫자, 하이픈, 네자리 숫자패턴을 갖고 있다.

\d{3}= 세 자리 아무숫자, \d{3,4}= (세,네자리)아무 숫자. -> 

// 아래 표현식은 휴대전화 번호의 시작이 숫자 3자리만 맞으면 true 입니다. 
var regPhone= /^\d{3}-?\d{3,4}-?\d{4}$/;

// 일반 전화번호 표현식
var regPhone= /^\d{2,3}-?\d{3,4}-?\d{4}$/;

정규표현식의 캡쳐

 

ex) 나는 바보입니다. 나는 개입니다. 나는 코끼리입니다.

나는 XXX에서 XXX를 가져오고 싶다면? 그룹캡쳐()를 사용하면 된다. 나는 (.+)입니다

 

자바스크립트에서 쓰려면

 

자바스크립트는 RegExp객체로 정규표현식 기능을 사용할 수 있으며,리터럴로 만들 수 있다.

exec

 

exec함수는 입력받은 문자열에 찾는 패턴이 있는지 찾은 후, 일치한 패턴 청보를 반환하고, 없으면 null을 반환한다.

const sentence1 = "나는 바보입니다.";
const sentence2 = "나는 개입니다.";
const sentence3 = "나는 코끼리입니다.";

const regex = /나는 (.+)입니다/;

console.log(regex.exec(sentence1)[1]); // "바보"
console.log(regex.exec(sentence2)[1]); // "개"
console.log(regex.exec(sentence3)[1]); // "코끼리"

 

test

 

정규표현식 객체의 test함수로 입력받은 문자열에 찾는 패턴이 있는지 찾아서, 있으면 true를 없으면 false를 반환한다.

const sentence1 = "나는 바보입니다.";
const sentence2 = "나는 개입니다.";
const sentence3 = "나는 코끼리입니다.";

const regex = /나는 (.+)입니다/;

console.log(regex.test(sentence1)); // true
console.log(regex.test(sentence2)); // true
console.log(regex.test(sentence3)); // true

replace

 

String 객체의 replace함수는 정규표현식 객체를 파라미터로 받아,패턴이 있는지 확인 후, 일치한 패턴 정보를 문장ㄹ로 바꿀 수 있다.

const msg = '안녕하세요. 010-1234-5678로 연락주세요';
const msg2 = '안녕하세요. 010-1234-5678말고 010-9876-5432로 연락주세요';

const regExp = /\d{3}-\d{3,4}\d{4}/;
console.log(msg.replace(regExp,'전화번호');
//안녕하세요. 전화번호로 연락주세요
console.log(msg2.replace(regExp,'전화번호');

//안녕하세요. 전화번호말고 010-9876-5432로 연락주세요

모두 변경하고 싶다면 정규표현식 플래그로 g를 사용하면 된다.

 

search

정규표현식 객체를 파라미터로 받아 패턴이 있는지 찾은 후 일치한 패턴 정보의 위치를 반환한다.

const sentence1 = "나는 바보입니다.";
const sentence2 = "나는 개입니다.";
const sentence3 = "나는 코끼리입니다.";

const regex = /나는 (.+)입니다/;

console.log(sentence1.search(regex)); // 0
console.log(sentence2.search(regex)); // 0
console.log(sentence3.search(regex)); // 0

Run-length encoding

매우 간단한 비손실 압축 방법에 속한다.

AAAAAABBBDFFFFFFKK이라는 문자열을 어떻게 압축할 것인가??

const raw = 'AAAAAABBDFFFFFFFKK';
const compress = '6A2BD7F2K';

const regExp = /(.)\1*/g;
const result = raw.match(regExp).reduce((a,b) -> a + `${b.length}${b.slice(0,1)}`,"");

console.log(result);

const input = 'AAABBBCCCC';
const reg = /(.)\1*/g;

const run = (str) => {
  //3a 3b 4c
  const res = input.match(reg).map((val) => {
    return val.length + val[0];
  });
  return res;
};

console.log(run(input));

---

웹 스토리지

기본적으로 HTTP request는 상태가 존재하지 않고, 서버는 어떤 브라우저에서 요청이 온 건지 알 수 없다.

 

Cookie

 

- 클라이언트에서 저장, 관리하는 데이터로 브라우저를 닫아도 데이터를 유지할 수 있다.

- 서버에서 Set-Cookie를 응답헤더로 내려주면, 클라이언트는 받아서 저장한다.

- 각 상태에 수명을 정할 수 있고, 클라이언트에서 자체적으로 조작 가능하다.

---

Set-Cookie

 

Set-Cookie

- 응답 헤더에 담으면 브라우저가 알아서 저장한다.

- 각 데이터에는 여러가지 옵션이 존재한다.

Expires 또는 Max-Age: 쿠키의 만료 날짜 또는 수명을 지정합니다.
Expires는 특정 날짜 및 시간을 기준으로 쿠키를 만료시키고, Max-Age는 쿠키의 수명을 초 단위로 지정합니다.

Domain: 쿠키를 전송할 수 있는 도메인을 지정합니다. 
이 옵션을 사용하여 쿠키가 특정 도메인 이하의 서브도메인에서만 전송되도록 제한할 수 있습니다.

Path: 쿠키가 유효한 URL 경로를 지정합니다. 
이 옵션을 사용하여 특정 경로 이하의 URL에서만 쿠키를 전송할 수 있도록 제한할 수 있습니다.

Secure: 쿠키를 HTTPS 연결에서만 전송하도록 지정합니다. 
이 옵션이 설정되면 쿠키는 암호화된 연결을 통해만 전송됩니다.

HttpOnly: 이 옵션이 설정되면 JavaScript를 통해 쿠키에 접근할 수 없습니다. 
이는 보안상의 이유로 사용됩니다. 쿠키를 생성한 서버에만 쿠키에 대한 접근 권한이 있습니다.

SameSite: 쿠키가 동일한 사이트에서만 전송되도록 제한합니다. 
이 옵션은 CSRF (Cross-Site Request Forgery) 공격을 방지하는 데 사용됩니다.

---

쿠키의 취약점

 

XSS공격을 당할 수도 있다.(Cross-Site-Script). 자바스크립트로 악의적인 사용자가 쿠키 값을 탈취할 수 있다.

---

서버가 사용자를 구분하려면?

세션 : HTTP 세션 ID를 식별자로 사용자를 구분한다. 이는 서버 자체적으로 기록하고 관리한다.

 

• 클라이언트가 서버에 리소스를 요청한다.
• 서버에서 HTTP Request를 통해 쿠키에서 세션 ID를 확인해 존재하면 이용하고 없으면 Set-Cookie로 세션 ID를 보낸다.
• 클라이언트는 HTTP Request헤더에 세션 ID를 포함해서 원하는 자원을 요청한다.
• 서버에서 세션 ID를 통해 세션을 찾아 응답을 보낸다.

---

웹 스토리지

클라이언트에 데이터를 저장하기 위한 방법으로 HTML5부터 등장하였다. 로컬 스토리지, 세션 스토리지가 있다.

---

Indexed DB

많은 양의 구조화된 데이터를 클라이언트에 저장할 수 있고 , 자바스크립트 기반의 객체지향 데이터베이스이

IndexedDB는 Transaction Database를 이용해 Key-value로 데이터를 관리하며, B-Tree데이터 구조를 지닌다.

 

1. 데이터베이스를 열고

2. 객체 저장소를 생성한뒤

3. 트랜잭션을 시작하고 데이터베이스 작업을 요청한다.

4. DOM EventListener를 사용해 요청이 완료될때까지 기다리고 결과를 확인한다.