개인노트-인강

개인 노트 정리) 프론트엔드 개발자가 알아야 하는 CS 지식 - 웹(Web)

roroism 2023. 4. 5. 21:23

프론트엔드 웹 개발의 모든 것 초격차 패키지 Online.

프론트엔드 개발자가 알아야 하는 CS 지식 Ch 01. 웹(Web)

 

# 웹 브라우저의 동작 방식

컴퓨터 공학적인 측면에서 내부적으로 어떻게 동작하는지. 그리고 개발자 입장에서 웹의 기능들을 바르게 이해할 필요가 있습니다.

 

## 일반적으로 웹 브라우저는 다음과 같은 기능을 수행합니다.

1. 웹 페이지를 서버에 요청(request)하여 서버의 응답(response)을 웹 문서 형태로 받는다.

2. 받은 웹 문서(HTML, CSS 등)을 렌더링하여 모니터 화면에 웹 페이지를 표시한다.

 

## 서버(Server)와 클라이언트(Client)

  • 클라이언트가 요청(request)을 보내면, 서버(server)가 응답(response)합니다.
  • 서버와 클라이언트 구조를 따르는 대표적인 예시로는 웹 서비스가 있습니다.

 

  • 클라이언트는 일종의 고객(client)으로 이해할 수 있습니다.
  • 서버로 요청(request)을 보낸 뒤에, 응답(response)이 도착할 때까지 기다린다.
  • 서버로부터 응답을 받으면, 서버의 응답을 처리하여 화면에 출력합니다.

 

  • 서버는 클라이언트로부터 받은 요청을 처리해 응답(response)을 전송합니다.
  • 대표적인 서버로는 웹 서버(server)가 있습니다.

 

## HTML(Hypertext Markup Language)

  • HTML은 웹 문서를 작성하기 위해 사용하는 프로그래밍 언어입니다.
  • 여기서 마크업(markup)은 웹 문서가 모니터 화면에서 보이는 형태를 결정하는 구조를 말합니다.
  • HTML 문서는 <HTML> 태그로 시작하고 </HTML> 태그로 종료된다.

 

## HTTP(Hypertext Transfer Protocol)

  • 하이퍼텍스트를 전송하기 위해 개발된 프로토콜로 간편히 데이터를 전송하게 해줍니다.
  • 웹 브라우저의 주소 표시줄에 URL(Uniform Resource Locator)을 입력한 뒤에 접속을 시도합니다.
  • URL은 언터넷에 존재하는 특정한 정보 자원의 종류와 위치를 나타내는 문자열입니다.

 

## 웹(Web)

  • HTTP 프로토콜을 이용해 수없이 많은 페이지로 링크를 타고 이동할 수 있습니다.
  • 웹에서는 많은 페이지가 마치 거미줄과 같은 연결 형태를 가집니다.

 

## 웹 브라우저의 구조

웹 브라우저의 구조를 도식화하면 다음과 같습니다.

  • User Interface : 웹 브라우저의 화면(주소 창, 새로 고침 버튼 등)
  • Browser Engine : UI와 Rendering Engine의 매개체 역할 수행 및 쿠키와 같은 로컬 데이터를 저장소에 저장
  • Rendering Engine : 웹 서버로부터 받은 응답을 화면에 표현(HTML, CSS와 같은 코드를 실질적으로 처리)
  • UI Backend : 실질적으로 다양한 위젯과 같은 웹 사이트에서 제공하는 버튼, 이미지 로고를 화면에 출력하게 만들고, 이용할 수 있도록..예를 들어 사용자가 그것을 클릭하는 등의 상호작용을 수행할 수 있도록 도와줍니다.

## 웹 브라우저의 동작 방식

  • 웹 클라이언트는 웹 브라우저를 이용한다.
  • 웹 브라우저에 주소를 입력하면 GET 방식으로 서버에 웹 문서를 요청한다.
  • 웹 서버는 적절한 웹 문서를 찾아서 응답한다.
  • 이후에 웹 브라우저는 문서를 화면에 표시한다.