웹 브라우저의 통신 방식
웹 브라우저
인터넷 브라우저라고도 불림, 웹 서버로부터 정보를 요청하고 받아 사용자에게 보여주는 소프트웨어.
사이트에 접속했을때, HTML, CSS, JavaScript 파일을 전달받아 해석하고 볼수있게 하는것.
정적인(Static) 파일과 동적인(Dynamic) 정보를 처리.
정적 페이지
서버에서 브라우저로 전송되는 그대로 표시
동적 페이지
실시간으로 내용을 생성하고 변경된다.
통신 방식
- 사용자가 웹 브라우저 주소창에 URL입력.
- 입력받은 URL을 DNS서버로 전달해 해당 IP주소를 찾음.
- DNS서버는 도메인 이름을 IP 주소로 변환.
- 웹 브라우저가 해당 IP주소로 HTTP요청을 전달.
- IP주소에 연결된 웹 서버가 사용자의 요청을 받아 처리.
- 웹 서버가 처리 결과를 HTTP Response로 브라우저에 전달.
- 웹 브라우저는 받은 HTTP Response를 바탕으로 사용자에게 표시.
주소창에 URL 입력하기
URL(Uniform Resource Locator)
인터넷상의 리소스 위치를 나타내기 위해 사용. => 인터넷에서의 주소
<프로토콜>://<도메인 명>:<포트>/<경로>의 구조를 가짐.
ex) http://cafe.naver.com/joonggonara
http : 프로토콜
naver.com : 메인 도메인 명
cafe : 서브 도메인 명
joonggonara : 리소스 경로
프로토콜 - 통신을 하게 되었을때, 어떠한 규약으로 데이터를 전달 받을 건가에 대한 것.
DNS로 조회하기
DNS(Domain Name Service)
도메인 이름을 중개해 IP로 변경해주는 서비스. => 인터넷에서의 연락처
IP 주소를 사용하지 않고도 원하는 웹페이지에 접속가능하게 해줌.
IP를 이용해 웹 서버와 통신하기
IP(Internet Protocol)
각각의 네트워크에 연결된 장치들이 인터넷 상에 존재하는 해당장치의 위치를 식별할 수 있게 해주는 고유한 주소.
IPv4 와 IPv6
IPv4의 경우, .3개로 구성되어있고 각각의 숫자가 4개의 그룹으로 구성됨 ex) 8.8.8.8
IPv6의 경우, :으로 구성되어있음.
HTTP(Hyper Text Transfer Protocol)
데이터를 주고 받는 양식을 정의한 통신 규약(Protocol) 중 하나. => 웹 브라우저끼리 의사 소통을 가능하게 해줌.
전세계에서 가장 많이 쓰이는 통신 규약.
통신 규약 - 컴퓨터끼리 데이터를 주고 받을때 정해둔 약속.
HTTPS
HTTP를 기반으로 데이터 통신의 안전성을 높이기 위해 암호화 기능이 포함된(Secure) 통신 프로토콜.
HTTP의 데이터 통신 방식
HTTP는 요청(Request)과 응답(Response)이 존재.
- 브라우저가 서버에게 자신이 원하는 페이지를 요구(Request).
- 서버가 해당 페이지가 있는지 확인 후, 있으면 해당 페이지에 대한 데이터를 반환(Response), 없다면 없는 페이지에 대한 데이터를 반환.
- 서버에게 전달 받은 데이터를 기반으로 브라우저에 그려줌.
- 데이터는 어떠한 데이터든 주고 받는게 가능(문자, 이미지, 파일 등)
Header 탭
General - 브라우저가 서버로 보낸 요구 데이터.
Request Headers - General과 같음.
Response Headers - 서버가 웹 페이지 데이터와 함께 보낸 추가 데이터.
Response 탭
서버에서 브라우저로 반환해준 웹 페이지를 그려주기 위한 데이터.(스크립트, HTML)
추가데이터, 데이터
Method
Get - 어떤 리소스를 얻을 때 사용 => 브라우저는 기본적으로 웹 서핑을 한다고 가정하므로 모든 요청은 GET을 통해 서버에 요청을 보냄.
Post - 웹 서버에 데이터를 게시할 때 사용
ex) 회원가입, 게시글 작성, 댓글 작성
Header (추가 데이터, 메타 데이터)
ex) 브라우저가 어떤 페이지를 원하는지, 요청받은 페이지를 찾았는지, 성공적으로 찾았는지 등의 의사 표현을 위한 데이터.
메서드 또한 헤더에 포함되어 서버로 보내짐.
Payload
서버가 응답을 보낼 때에 항상 보낼 수 있음. => GET을 제외하곤 모두 보낼 수 있음.
웹 서버
웹 서버
HTTP를 이용해 인터넷에서 클라이언트의 요청을 처리하고 응답해주는 컴퓨터나 프로그램.(Apache, Nginx등)
클라이언트의 HTTP요청을 받아 정적인 콘텐츠(HTML, CSS, 이미지 파일 등)를 제공.
필요시 클라이언트의 요청을 WAS(Web Application Server)로 전달해 처리 가능.
주요 업무 - 복잡한 로직보단 요청된 컨텐츠나 데이터를 빠르게 반환 하는 것 => 빠르게 사용자에게 데이터를 제공 가능.
WAS(Web Application Server)
웹 서버와 협력해 동적인 컨텐츠를 제공. - 주로 데이터베이스 조회, 복잡한 계산과 같은 비즈니스 로직 처리. => 컨텐츠 생성, 데이터베이스와의 상호작용이 필요할 때 주로 사용.
클라이언트의 요청을 웹 서버로 받아 처리 -> 결과를 웹 서버로 반환 -> 클라이언트가 응답을 받음.
통신 방식
- 사용자가 브라우저를 통해 HTTP request로 웹 서버에 요청
- 웹 서버가 요청을 처리 후 HTTP response를 통해 웹사이트 데이터를 브라우저에 전송.
- 브라우저가 서버에서 받아온 데이터를 이용해 웹사이트에 브라우저를 그려냄.
- 브라우저가 웹 서버에 요청할 때는 주로 GET Method로 요청.
POST, PUT, DELETE같은 다른 요청 메서드도 존재하며 서버에 다른 타입의 요청을 보낼 때 사용.
웹 브라우저와 웹 서버 사이의 통신 과정을 이해하는 것은 백엔드 개발자로서 매우 중요한 요소!!!!!!!!!!(반드시 익힐 것)
Node.js
JavaScript
JavaScript 존재 이전
HTML, CSS로 아주 간단한 스타일만 적용하는게 일반적. => 문서를 웹으로 볼 수 있는 수준으로 이용.(동적으로 움직이는 컨텐츠 X)
JavaScript 탄생
존재 이전의 정적인 문서를 더 동적으로 표현할 수 있도록 만들어짐.
NetScape라는 웹 브라우저를 통해 상호작용을 강조하기 위해 간단한 기능을 넣어 만든 것이 시초.정적(Static) 페이지
미리 작성되어 확정된 페이지 - 연산이 필요없으므로 HTML로만 작성 가능.
동적(Dynamic) 페이지
맥락, 상황을 반영할 수 있는 페이지
Node.js
Chrome V8 JavaScript 엔진으로 빌드된 JS 런타임.
이벤트 기반, 논블로킹 I/O 모델을 사용해 가볍고 효율적.
패키지 생태계인 npm은 세계에서 가장 큰 오픈 소스 라이브러리 생태계.
=> JS를 브라우저가 아닌 컴퓨터에서 브라우저 없이 실행하게 도와주는 환경.V8 엔진
구글이 개발해 구글 크롬 브라우저에서 사용하는 자바스크립트 엔진.
=> 브라우저 환경 이외에서도 자바스크립트를 사용할 수 있게 해줌.Libuv
비동기 I/O 작업을 수행할 수 있게 해주는 라이브러리.
=> 논 블로킹 I/O 모델이라는 특징을 가지고 여러 요청을 효율적으로 처리할 수 있게 됨.
- V8엔진과 Libuv는 C와 C++로 작성되어 있음(JS로 동작 불가)
=> JS로 Node.js를 수행할 수 있도록 만들어 주기 위해 Node.js Bindings에서 JS로 받은 언어를 C와 C++로 실행할 수 있게 만들어준다.
논 블로킹 I/O(Non-Blocking Input/Output)
프로그램의 실행 흐름을 제어하는 방식.
블로킹 방식
특정 작업 수행중 다른 작업을 중단.
=> 한번에 하나의 작업만 처리 가능. 호출된 함수가 자신의 작업을 모두 마칠때까지 호출한 함수에게 제어권을 넘겨주지 않음.논 블로킹 방식
프로그램이 여러 작업을 동시에 처리 가능.
=> 호출된 함수는 작업의 완료 여부와 상관없이 즉시 제어권을 호출한 함수에 반환.
싱글 스레드(Single Thread)
스레드 하나를 사용, 동시에 하나의 작업만을 처리 가능.
스레드(Thread)
프로그램이 동작할 때, CPU 또는 프로세서를 사용하는 단위.
여러 스레드를 사용하면 여러 작업을 동시처리 가능.
=> 복잡성 증가, 리소스 많이 소모.
- Node.js의 경우 I/O작업이 발생한 경우 비동기적으로 처리해 여러 작업을 동시에 처리 가능.
Node.js가 싱글 스레드를 고집하는 이유?
- 스레드 생성과 관리에 드는 부담 줄여줌.
- 컴퓨팅 리소스를 효율적으로 사용 가능.
- 한 번에 하나의 작업만 수행하므로 여러 스레드가 공유하는 자원에 대한 동시접근 문제(Race condition)를 방지.
=> 서버 확장이 매우 자유로움.
호출 스택(Call Stack)
- 함수의 실행 순서를 추적하는 자료구조.
코드를 실행하면서 호출 스택에 함수를 추가(push)하고 함수가 완료되면 호출 스택에서 제거(pop)문제점
네트워크 요청같은 시간이 많이 걸리는 작업을 기다리는 동안 다른 작업을 처리할 수 없게 됨.
=> 이벤트 루프(Event Loop)와 이벤트 큐(Event Queue)를 사용.
이벤트 루프(Event Loop)
여러 이벤트들과 같은 비동기 작업을 모아서 관리, 순서를 정해주는 도구.
호출 스택과 이벤트 큐를 관찰하면서 호출 스택이 비어있고, 이벤트 큐가 작업중이라면 이벤트큐의 작업을 호출 스택으로 이동하는 역할을 담당.
=> 시간이 오래 걸리는 작업을 이벤트 큐에 넣어 비동기적으로 처리하고 그동안 호출 스택에서 다른 작업을 계속 처리 할 수 있음.
