웹브라우저와 서버 통신

 

 

 

서버란?

서비스는 제공해주는 소프트웨어가 설치돼있는 호스트

 

 

클라이언트란?

클라이언트는 두가지 역할을 한다.

1. 서버에게 데이터를 보내달라고 요청하는 호스트

2. 받은 데이터를 디스플레이하는 호스트

 

ex) 크롬, 파이어폭스, 사파리 와 같이 우리가 대부분이 쓰는 웹 브라우저 등등 ,,

 

서버와 클라이언트의 통신 과정

크롬 브라우저와 구글 사이트로 예를 들면,

1. 크롬 브라우저( 클라이언트 )에서 구글 사이트의 주소를 입력

2. 클라이언트는 구글 웹 서버에게 구글 페이지를 보내달라고 요청

3. 구글 웹 서버는 하드디스크에서 구글 페이지를 찾음

4. 찾은 페이지를 다시 클라이언트에게 전기신호로 전송

5. 최종적으로 클라이언트에 구글 사이트의 페이지가 보여짐

 

이런 과정을 걸친다.

 

서버와 클라이언트는 쌍방향, 상호작용 !

 

브라우저 구조

브라우저 동작 과정

 

1. html 문서 파싱 -> 외부 CSS, Javascript 파일 등을 파싱

2. 콘텐츠 트리 내부에서 태그를 DOM 노드로 변환

3. 스타일 정보, html 표시 규칙이 렌터트리를 생성

4. 각 노드가 화면에 표시

 

렌더 트리란 ?

웹 페이지에 표시될 HTML요소들과 이와 관련된 스타일 요소들로 구성되어 있는 트리

 

 

 

패킷 전송 과정

( 캡슐화 )

1. 응용( Application )계층에서 메시지를 받음

2. 전송( TCP )계층에서 헤더에 출발지, 목적지의 포트 주소를 추가 -> 세그먼트( PDU )를 만듦

3. 세그먼트는 네트워크( IP )계층에서 출발지, 목적지 IP 를 추가해 패킷 ( 데이터그램 (PDU)) 을 만들어 1,2( Ethernet )계층에 패킷을 보냄

4. ARP를 라우터에 보냄 -> 상대방의 MAC주소를 확인 -> 프레임( PDU )을 만들어 보냄

( 역캡슐화 )

5. 상대방은 MAC 주소를 확인 -> 헤더를 벗기고 IP 계층으로 보냄

6. IP 주소를 확인 -> 헤더를 벗기고 TCP 계층으로 보냄

7. 포트 확인 -> 응용( Application ) 계층으로 메시지를 보냄

8. 상대방이 메시지 확인

 

 

POST 요청과 GET 요청

모두 클라이언트와 서버의 상호작용하는 방식을 가르킴

 

이런 식으로 html 파일에서 form 태그의 method 속성을 이용해 설정 가능함

 

GET 방식

URL 주소 뒤에 ? + 쿼리 문자열(key=value&key=value ...) 을 붙여 데이터를 서버에 전달

 

단점

1. 글자수는 최대 2048 bytes

2. URL 에 보낸 값이 보임 -> 비밀이 보장되지 않음

3. 쉽게 조작할 수 있음 -> 취약점으로 활용될 수 있음

 

웹 사이트에서 검색을 할 때 주로 사용함

 

POST 방식

 

사용자가 전송한 데이터를 URL 뒤에 붙이지 않고, HTTP Request Header와 Body 에 정보를 넣어 서버에 전달

 

장점

1. 길이 제한이 없음

2. URL 에 보이지 않음 -> 비밀이 보장됨

3. 쉽게 값을 조작할 수 없음 -> GET 방식에 비해 상대적으로 안전함

 

이런 장점으로 대개 로그인, 게시판과 같이 입력한 데이터를 전송할 때 주로 사용함