[데브코스 Day2] 2022.10.18

📖오늘 배운  것

 

네트워크 기초

▶브라우저 창에 주소를 입력하면 벌어지는 일

 

① URL을 해석한다.

 

② DNS를 조회한다.

• DNS란?

  :Domain Name System으로 도메인(ex> google.com)과 IP주소(ex> 142.250.199.110)를 서로 변환해준다.

 

-브라우저는 DNS 요청을 보내기 전에,

1. 이미 해당 도메인을 알고 있는지 브라우저 캐시를 찾아보고
2. 없다면 로컬 컴퓨터의 hosts 파일을 참조한다.

만약 이미 정의가 되어 있다면 내부적으로 IP를 반환한다

 

위의 두 가지에 해당이 안된다면 DNS를 호출한다.

이러한 DNS는 Root server, TLD server, Authoritative Server 순으로 탐색한다.

-Root Server : TLD DNS 서버 IP를 저장해 두고 안내하는 역할

-TLD DNS Server: Authoritative DNS 서버 주소를 저장해두고 안내하는 역할

-Authoritative DNS Server: 실제 개인 도메인과 IP 주소의 관계가 기록/저장/변경되는 서버

-Recursive DNS Server: 인터넷 사용자가 가장 먼저 접근하는 DNS 서버. 위의 3개의 서버를 한 번 거친 후 얻은 데이터를 일정 기간 동안 캐시라는 형태로 저장해두는 서버. 대표적으로 사용하는 통신사 서버(ISP DNS 서버)가 있고 구글 DNS 등이 있다.

 

1. 통신사 (ISP) 서버에서 캐시가 있는지 찾는다. 있으면 반환, 없으면 Root Server에 요청
2. Root Server에서 TLD DNS 서버 주소로 안내
3. ISP서버는 다시 TLD Server에게 어디로 가야 하는지 요청
4. Autoritative DNS 서버에서 최종 웹페이지 IP 알려줌. 동시에 ISP 서버는 해당 정보를 캐시로 기록
5. 브라우저는 IP주소를 갖고 있는 호스팅 서버에게 웹사이트 출력 요청
6. 끝

출처:  https://url.kr/6d94yb

 

③ 해당 IP가 존재하는 서버로 이동(해당 서버가 존재하는 대역으로)한다.

-네트워크 장비 라우터를 통해 이동

 

④ARP를 이용하여 MAC 주소 변환을 한다.

• ARP란?

  : Address Resolution Protocol

  : 논리 주소인 IP주소를 물리 주소인 MAC 주소로 변환하는 프로토콜

 

*IP주소와 MAC주소

   -IP는 논리적인 주소

   -MAC은 물리적인 주소

 

-실제 통신을 위해 변하지 않는 고유한 MAC 주소가 필요하다.

-단말 간 통신에서 양쪽 단말은 IP를 이용하여 목적지를 지정하지만 실제 데이터 이동을 위해 MAC주소를 함께 이용

 

⑤TCP 통신을 위해 Socket을 열어야 한다.

-실제 Socket을 열어서 허락을 받아야 데이터를 전달할 수 있다.

-socket은 통신 접속점이라고 할 수 있는데 네트워크 응용 프로그램은 소켓을 통해 통신망으로 데이터를 수신. TCP/IP를 이용하는 창구 역할을 한다.

 

-네트워크를 통해 해당 기기로 패킷을 전달

-TCP 통신을 허락받기 위해 3 way handshake로 연결을 요청

-요청이 수락되면 데이터를 서버로 전달, 기기는 패킷을 받아 처리

 

• 패킷이란?

https://yj-zero.tistory.com/17

네트워크 #5 [네트워크 모델]

 

⑥서버는 응답을 반환

-HTTP 프로토콜로 들어온 패킷을 읽고 처리

-요청에 따른 적절한 응답 값을 반환

 

⑦브라우저가 렌더링을 한다.

 

 

• HTTP와 HTTPS의 차이점

     :http 통신은 클라이언트와 서버 간의 통신에 있어서 별다른 보안 조치가 없기 때문에 누군가 네트워크 신호를 가로채면 그대로 외부에 노출 이러한 보안 문제를 해결하기 위해 등장한 것이 https

     :https는 ssl이라는 보안 계층 위에 http를 얹어서 보안이 보장된 통신을 한다.> SSL 암호화 통신

     :HTTPS로 통신하면서 추가로 SSL handshaking이 일어나게 된다.

 

Queue

Queue의 종류에는 Task Queue, Microtask Queue, Animation Frames가 있다.

 

• Task Queue

- setTimeout()., setInterval(), setInmediate()와 같은 task를 넘겨받는다.

 

 

• Microtask Queue

-  Promise나 async/await, process.nextTick, Object.observe, MutationObserver와 같은 비동기 호출을 넘겨받고 task보다 우선순위가 높다. 

 

 

• Animation Frames

- requestAnmationFrame 과 같이 브라우저 렌더링과 관련된 task를 넘겨받는 Queue이다.

- 우선순위는 Microtask보다는 낮고, Task보다는 높다.

 

이벤트 루프가 비동기 작업을 처리하는 우선순위는 Microtask Queue → Animation Frames → Task Queue  순이다.

 

 

 

프로토타입

:상위 객체를 참조할 수 있고, 기존의 객체를 복사하여 새로운 객체를 생성하는 방식

 

function Person(name, first, second, third){
    this.name=name;
    this.first=first;
    this.second=second;
}

이런 객체를 만든다고 할 때

1. Person이라는 객체가 생기고 이에 따라 Person's prototype이라는 객체로 추가로 함께 생긴다.

2. 이러한 Person의 객체에는prototype이라는 property가 생기는데 이 property는 Person's prototype 객체를 가리킨다.

     Person.prototype === Person's prototype

3. Person's prototype 객체 역시 자신이 Person의 소속이라는 것을 기록해놔야 하기 때문에 constructor이라는 property를 만들고 이 property는 Person 객체를 가리킨다.

4. 그래서 Person 함수는 prototype property를 통해서, Person's prototype 객체는 constructor property 를 통해서 상호 참조를 하고 있는 것.

 

이러한 Person 객체로 새로운 객체를 만들면,

var kim= new Person('kim',10, 20)

>> kim이라는 객체에 name, first, second 그리고 __proto__ 를 property로 갖고 여기서 __proto__ 가 가리키는 것은 Person 객체의 prototype property 이므로 즉 Person's prototype을 가리키는 것.

 

 

 

웹스토리지

: 웹스토리지에는 로컬 스토리지와 세션 스토리지가 있다.

 

• 로컬 스토리지

-반영구적으로 데이터 저장 → 유효기간이 필요 없는 데이터를 담을 때 유용

-브라우저가 종료돼도 데이터가 남아있음

-동일한 기기, 동일한 브라우저를 사용하는 경우 데이터가 공유됨

-key-value 형태로 저장되며 문자열만 저장 가능

 

• 세션 스토리지

-세 창을 생성할 때마다 개별적으로 저장되는 데이터를 관리

-브라우저를 닫으면 데이터가 사라짐.

-key-value 형태로 저장되며 문자열만 저장 가능

 

문자열만 저장 가능한 웹스토리지의 단점을 보완하는 로컬 데이터베이스로 indexedDB가 있음.

 

• indexedDB

-많은 양의 구조화된 데이터를 저장할 때 유용

-localStoage와 달리 JS가 인식할 수 있는 자료형과 객체로 저장 > 문자열이 아니어도 된다.

-비동기적으로 작동

 

 

 

💭배운 점

하루 동안 뭔가 많은 개념이 스쳐 지나간 것 같다 ㅋㅋㅋ 어렴풋이 알고 있었던 것도 있었고 처음 들어보는 것도 있었다. 강의 듣고 정리하고 추가로 찾아보기도 했지만 아직 더 궁금한 것들이 있다.  한 번에 모든 개념을 이해하는 건 어려운 일인 것 같다. 필기한 것과 다른 블로그 정리 글들을 다시 읽어보면서 익숙해져야겠다는 생각이 들고 실제로 실습할 수 있는 것들은 해보고 싶다.

내일부터 자료구조라니 죽여줘...

 

 

 

💻앞으로 배우고 싶은 것

-indexedDB 실습해보기

-Webpack 실습해보기

-정규표현식 연습해보기

 

 

 

참고사이트

-프로그래머스 데브 코스 강의

-https://excited-hyun.tistory.com/m/138

-https://url.kr/6d94yb

-https://velog.io/@titu/JavaScript-Task-Queue말고-다른-큐가-더-있다고-MicroTask-Queue-Animation-Frames-Render-Queue

-https://mong-blog.tistory.com/m/entry/indexedDB%EC%97%90-%EB%8C%80%ED%95%B4-%EC%95%8C%EC%95%84%EB%B3%B4%EC%9E%90