웹 기초

목차

---

1. WEB
2. 클라이언트와 서버
3. HTTP
4. 웹 브라우저
5. HTML
6. CSS
7. JS
8. 브라우저의 Rendering

---

Web

• 인터넷에 연결된 컴퓨터를 통해 하이퍼텍스트 형식으로 표현된 다양한 정보를 효과적으로 검색할 수 있는 전 세계적인 정보 공간(정보 검색 시스템)
• 하이퍼텍스트는 웹 브라우저라 불리는 프로그램을 통해 웹 서버에서 '문서'나 웹 페이지등의 정보 조각을 읽어 컴퓨터 모니터에 출력하는 형태로 보이게 된다. 각 페이지에 있는 하이퍼링크에 따라 다른 문서로 이동하거나 그 페이지를 서비스하고 있는 서버로 정보를 보낼 수도 있다. 하이퍼링크를 따라 이동하는 행위를 흔히 웹 서핑 또는 웹 브라우징이라 한다. 이런 웹 페이지들의 집합을 웹 사이트라 한다.
• 월드 와이드 웹은 다음의 세가지 기능으로 요약할 수 있다.
  1. URL - 통일된 웹 자원의 위치 지정 방법
  2. 프로토콜 - 웹의 자원 이름에 접근하는 규약
  3. HTML - 자원들 사이를 쉽게 오갈 수 있는 언어

클라이언트와 서버

• 웹 상에서 요청을 주고받을 때, 요청을 하는 쪽이 클라이언트, 요청을 받는 쪽을 서버라고 지칭한다.
• 클라이언트가 사용자 입출력에 초점을 맞춘 다면, 서버는 데이터의 처리 및 저장, 웹 페이지 지원, 네트워크 관리 등의 역할을 수행한다.

HTTP

• HTML 문서와 같은 리소스들을 가져올 수 있도록 해주는 프로토콜
• 클라이언트-서버 프로토콜 - 클라이언트 측에 의해 요청이 초기화되는 프로토콜
• 클라이언트는 서버로 요청메시지를 전달하며 서버는 응답메시지를 보낸다. 메시지는 아스키 인코딩되어 송신
• 요청 메시지 - (요청 내용 + 헤더 + 빈 줄)
• 응답 메시지 - (상태표시 행 + 응답 헤더필드 - 빈 줄 - 기타 메시지)
• 이 규약에 맞춰 서버와 클라이언트는 요청과 응답을 주고 받을 수 있다.

웹 브라우저

• WWW에 접속하기 위한 어플리케이션 소프트웨어. 특정 웹 사이트에서 웹 페이지를 요청하면, 웹 브라우저가 웹 서버에서 필요한 콘텐츠를 받아 유저의 화면에 보여준다.
• HTML, CSS, JavaScript 와 멀티미디어 기능을 확장시키고 있다.
• 유저가 URL을 입력한다. 웹의 모든 URL은 가상으로 "http:", "https:" 로 시작한다. 이는 브라우저가 HTTP로 응답받는다는 의미이다. "https:"의 경우, 브라우저와 웹 서버의 커뮤니케이션이 보안목적으로 암호화됨을 의미한다. 웹 페이지를 응답받으면, 브라우저의 "렌더링 엔진"이 브라우저가 지원하는 이미지나 비디오를 포함하여 유저의 화면에 보여준다.
• 웹 페이지는 보통 다른 페이지나 리소스로의 "하이퍼링크"를 포함하고 있는데, 각 링크는 URL을 포함하며, 클릭할 경우 브라우저는 해당 리소스로 이동한다. 그 이후 유저한테 전달하는 과정이 반복된다.
• 대부분의 브라우저는 동일한 페이지에서 이뤄지는 반복적인 이동에 대해 로딩 시간을 줄이기 위해 웹 페이지 리소스를 내부 캐시 저장소에 저장한다. 이 캐시 저장소에는 큰 이미지나 서버에서 다시 다운로드할 필요가 없는 아이템들을 저장한다. 이는 보통 서버가 해당 HTTP 응답 메시지에서 필요할 때 까지만 저장된다. (⇒ 더이상 해당 서버가 응답할 필요가 없다고 생각될 경우 캐시 저장소에서 삭제한다.)

HTML

• 웹을 구성하는 가장 기본적인 블록. 웹 콘텐츠의 의미와 구조를 정의한다.
• HTML은 텍스트, 이미지, 다른 콘텐츠를 표현하기 위해 "마크업"을 사용한다.

CSS

• 문서의 모양을 설명하는 스타일시트 언어.
• CSS는 요소가 화면, 종이, 그 외 다른 미디어에서 어떻게 "렌더"될 지 표현한다.
• CSS3 이후로, CSS의 모듈 스펙이 각각 따로 올라가면서 현재 CSS 스펙은 각 모듈 스펙의 최신 상태를 스냅샷한 것과 같다.

JavaScript

• lightweight, interpreted, or just-in-time compiled programming language with first-class function.
• prototype-based, multi-paradigm, single-threaded, dynamic language, supporting object-orientied, imperative, declarative styles.
• 자바스크립트의 표준은 ECMA-262, ECMA-402이다.
• tc39 proposal에 올라오는 몇몇 기능은 각 브라우저마다 구현하고 있다.

Rendering

• 브라우저의 Rendering의 렌더링 부분 참고