Virtual Object Model

• 데이터가 변경되었을때, Virtual DOM을 리렌더링해서 실제 DOM과 비교해서 바뀐 부분을 재랜더링 해준다.
  

Networking

fetch()

• fetch를 통해 가져온 데이터는 헤더와 바디가 있는 하나의 객체.
  

• 헤더 안에다가 넣고자 하는 필드 두번째 인자로 전달할 수 있다.

blob(Binary Large Object)

• 굉장히 큰 데이터를 받아올 경우, 한번에 객체로 받아올 수 없다.
• blob이라는 메소드를 이용하면 대용량 데이터 전송이 가능하다.

---

• 한번에 큰 데이터를 전달하는 경우, 여러개로 쪼개서 전달해야한다.
  

서버 측

• stream이라는 경로로 요청할때, ASYNC FUNCTION이 실행된다.
• 서버에 1초 간격으로 출력이 될 것이다.

클라이언트 측

• read라는 function을 구현해서 쪼개서 들어오는 데이터를 처리해서 출력해주고 있다.
• done과 value가 존재, 데이터를 다 읽게되면 done이 true가 되어 출력이 끝난다.

WebSockets

• 3-Way hand shaking을 하게 된다.

• 소켓을 열고 대기하고 있으면 나 요청할게, 다이얼을 걸고 다이얼에 응답을 하고 요청을 보내고.

• TCP연결을 끊지 않고 있는게 효율적이긴 하지만, 정말 많은 요청을 다 처리해야하므로 곤란하다.

• 리소스 절약을 위해 필요한 만큼 이렇게 열고 요청과 응답을 받고 닫게 된다.

  

• 서버측 코드이다.

• 웹소켓 객체를 wss로 받아서 on, 즉 연결이 되면 다음 콜백함수를 실행시키게 된다.

• 클라이언트 코드.
• ws.send를 통해서 서버측으로 메세지를 보내준다.
• 그러면 동시에 서버측에서 메세지를 받고 다시 ws.send를 통해서 Me too가 붙은 메세지를 보내줄 것이다.

• 브라우저가 ws://localhost:3003 에 접속 시도
• 서버에서 connection 콜백 실행 → “New client connected!”
• 브라우저에서 open 콜백 실행 → “We are connected 💕”
• 브라우저가 서버에 "I can't wait for UNI LAND" 전송
• 서버의 message 콜백 실행
• 콘솔에 Client has sent us : I can't wait for UNI LAND 출력
• 다시 "I can't wait for UNI LAND Me too" 를 클라이언트로 전송
• 브라우저의 message 핸들러 실행 → 받은 데이터(I can't wait for UNI LAND Me too) 콘솔에 출력
• (연결 종료 시 close 이벤트로 로그 남김)

localStorage and sessionStorage

• localStorage는 데이터를 유지하고, sessionStorage는 웹 브라우저를 닫으면 삭제된다.

Cookie

• 웹 브라우저에서 서버에 자동으로 보내지는 데이터.
• 쿠키는 무조껀 request 요청을 보낼때 헤더에 담겨져서 같이 보내진다.
• 쿠키엔 만료시간, path를 추가해서 넣을 수 있다.

document.cookie = " " 

• 그러면 네트워크 칸에서 Request Header에서 Cookie가 들어가있다.
  

indexedDB

• 웹브라우저에서 제공하는 데이터베이스.
• 데이터를 저장하면 영구적으로 저장된다.
• 다른 도메인간에는 데이터를 공유할 수 없다. (네이버와 구글.. 이런 차이)
• 비동기 동작을 한다.
  
• database -> objectStore -> 여러 정보들.

• 오프라인 상태에서도 잠시 저장할 스토리지가 필요하다. 그런 도구로 활용될 수 있다.
• 유튜브 썸네일등 가져올 데이터가 많고 변경될 일이 많이 없으면 미리 가져와서 로컬스토리지에 저장해놓기도 한다고 한다.

Centralized Vs. Decentralized

• 중앙화된 데이터베이스가 있는 경우가 보통이다.
• Gun DB처럼, 각각 indexed DB를 가지고 있는것을 동기화 시켜서 서비스를 한다. 속도가 매우 빠를 것이다.

WebRTC