4. 웹사이트의 동작원리
그동안 아무 의심이나 궁금증 조차도 없이, 인터넷과 웹 브라우저를 사용해왔던 것 같다.
우리의 일상이 된 웹 브라우저는 어떻게 동작할까?
웹사이트는 문서다
처음에는 잘 와닿지 않았다.
HTML,CSS,Javascript를 코딩하는 것 모두 브라우저가 읽을 수 있는 문서를 작성하는 것이다. 뭔가 굉장히 공학적이고 트렌디하다고 생각했던 프론트엔드 단에서의 코딩도 결국 문서 작성이었다니… 뭔가 기분이 새로웠다.
이러한 문서는 HTTP 통신을 통해 송수신된다.
웹브라우저 (클라이언트)는 웹서버에 데이터(HTML) 요청을 보낸다. → 그리고 웹서버는 그에 맞는 데이터를 반환해준다 → 그리고 우리는 전달받은 HTML 파일을 웹브라우저 상에 띄운다.
결국 이게 핵심이다. 우리는 HTTP(Hyper Text Transfer Protocol) 통신을 통해 데이터를 주고받는 것이다. 이러한 웹사이트 HTTP통신에서의 프로토콜은 아래와 같다.
웹사이트 접속에서의 프로토콜 HTTP TCP IP 이더넷 등 URL ? URI?
<스킴>:// <호스트명>/<경로명>
http://hoonjoo-park.github.io/aboutUniform Resource Locator vs Uniform Resource Indentifier의 약자들이다. 하지만 URI가 정식 명칭이지만, 모두 같이 통용되어 불려지고 있다.
위의 예에서 스킴은, 웹브라우저가 웹서버의 데이터에 접속하기 위한 하나의 프로토콜이다. 대표적으로
http,https,ftp등이 있다.그리고 호스트명은 IP주소가 DNS서버에 의해 호스트명으로 변환된 것으로, 실제로는 IP주소를 의미한다.
마지막으로 경로명은, 쉽게 말해 파일의 위치를 나타내는 경로다. /about이면 about에 대한 HTML파일이 그 경로에 존재하는 것이다.
HTTP Request
우리가 가장 자주 사용하는 Request요청에는
GET과POST등이 있다.
이러한 리퀘스트는 리퀘스트 라인, 메시지 헤더, 엔티티 바디 세 가지로 분류될 수 있다.
리퀘스트 라인
HTTP 리퀘스트의 첫 째 라인으로, method, URI, 버전 등에 대한 정보가 담긴다.
메시지 헤더
웹브라우저의 종류와 버전, 그리고 대응하는 데이터 형식 등이 기술되어 있다.
엔티티 바디
POST method를 사용할 때 사용된다.
✋ HTTP통신 전에 웹브라우저와 웹서버는 서로 TCP 커넥션을 맺는다. 그리고 HTTP통신을 통해 데이터를 주고 받는 것이다. ✋
HTTP Response
Request와 비슷하게 Response 또한
리스폰스 라인,메시지 헤더,엔티티 바디로 구성된다.
리스폰스 라인
버전, 상태코드, 설명문으로 구성되어 있다. 상태코드는 우리가 흔히 아는 1xx, 2xx, 3xx, 4xx등으로 이루어져 있고 각 코드마다 특정한 의미가 존재한다. (1xx : 추가 정보가 있음, 2xx: 서버가 요청을 성공적으로 처리했음 등등)
메시지 헤더
간단하게 데이터 형식이나 갱신 날짜 등이 기술된다.
엔티티 바디
웹브라우저에 돌려보낼 데이터가 담긴다. (주로 HTML파일)
✋ HTTP통신에는 Request와 Response만 달랑 존재하는게 아니다. DNS를 통해서 이름해석도 해야되고, ARP를 통해 MAC주소를 반환받기도 해야하는데, 이는 웹브라우저가 알아서 해준다! ✋
쿠키
쿠키는 하나의 저장 데이터라고 생각하면 된다.
웹서버 애플리케이션이 웹브라우저에 쿠키를 보내고, 웹 브라우저가 이를 허용하면 이후의 request에는 쿠키가 담겨져서 전송된다.
쿠키를 통해 세션 정보를 주고 받으며 웹페이지 내에서의 인증정보를 관리하고 활용할 수도 있고, 웹서버가 사용자의 로그인 정보나 웹페이지 열람 이력 등을 관리하며 이를 활용할 수도 있다. (지난 번에 검색했던 상품 기반으로 관련된 상품을 추천해준다던지..?)
4. 웹사이트의 동작원리