네트워크 기초
브라우저 주소창에 다음과 같이 적고 Enter를 누르면 어떻게 될까?
Step 1
URL을 해석한다.
Step 2
DNS를 조회한다.
📌도메인과 호스트 혼동 주의!
present.do, www.present.do, gateway.dev.present.do 전부 도메인은 present.do 나머지 서브도메인이 붙은 것들은 호스트
Step 3
해당 IP가 존재하는 서버로 이동한다.
Step 4
ARP(Address Resolution Protocol)를 이용하여 MAC 주소 변환한다.
IP주소는 현실에서 도로명 주소나 지번 주소에 해당하고 MAC주소는 실제 GPS 좌표에 해당한다고 볼 수 있다. 따라서 정확한 위치를 알기 위해서는 GPS 좌표를 알아야하는 것처럼 기계의 실제 위치를 알기 위해서는 MAC주소가 필요한 것이다.
Step 5
TCP 통신을 통해 Socket을 연다.
Step 6
서버는 응답을 반환한다.
📍클라이언트 <-> 서버 통신 (feat. Day1 브라우저 동작 원리)
Step 7
브라우저는 렌더링 후 스크립트 실행한다.
함수형 프로그래밍
😀장점 & 😥단점
- 상태가 없기 때문에 사이드 이펙트가 없다.
- 재사용성이 높다.
- 코드가 짧고 간결하다.
But! JavaScript는 멀티 패러다임 가능! 장점만 가져다 쓰자!!!
모듈
모듈은 스크립트 간 의존도 및 실행순서 제어에 대한 한계로 등장했다.
🧨모듈은 설계 시점에 의미있는 요소며 컴포넌트는 런타임 시점에 의미있는 요소이다.
모듈이 동작하기 위해서는 **HTTP** 또는 **HTTPS** 프로토콜을 통해서만 동작한다.
모듈의 특징
- 항상 use strict로 실행된다.
- 레벨 스코프가 있다. (최상위에 변수를 선언하더라도 전역 스코프로 올라가지 않는다.)
- 단 한 번만 평가된다.
- 지연 실행된다.
정규표현식
🎃테스트 사이트 https://rubular.com/
현업 개발자도 사이트를 참고하니 외우지 않아도 괜찮다.
쿠키와 세션, 웹 스토리지
쿠키란?
클라이언트에서 저장, 관리하는 데이터들로 브라우저를 닫아도 데이터를 유지할 수 있다.
세션
서버가 사용자를 구분하기 위해 고안된 개념으로 쿠키의 HTTP Session Id를 식별자로 사용자를 구분한다.
🧨세션은 서버에 파일로 저장되기 때문에 만약 사용자가 엄청 많아지거나 서버가 2개 이상이라면 세션 관리에 문제가 생긴다.
웹 스토리지
이 문제를 해결하기 위해 등장한 클라이언트에 데이터를 저장하기 위한 새로운 방법으로 HTML5부터 지원하며 로컬 스토리지와 세션 스토리지가 있다.
로컬 스토리지
- 데이터를 저장하면 반영구적으로 데이터가 저장된다.
- 브라우저를 종료해도 계속해서 데이터가 남는다.
- 저장했던 도메인과 이용하는 도메인이 다른 경우엔 접근할 수 없다.
key-value형태로 저장한다.
세션 스토리지
- 새 창을 생성할 때마다 개별적으로 저장되는 데이터를 관리한다.
- 브라우저를 종료하면 사라진다.
- 같은 도메인이어도 세션이 다르면 데이터에 접근할 수 없다.
key-value형태로 저장한다.
