Web

[KT] AIVLE SCHOOL 36일차

Web

• 1989년 팀 버너스리가 여러 연구 기관에 흩어져있는 문서 또는 정보들을 체계화 하고 공유하기 위해 연구되었음
• HTTP 프로토콜을 기반으로 TCP/IP 네트워크 상에서 HTML을 통해 작성된 하이퍼텍스트를 포함한 콘텐츠를 제공해 서비스 한 것이 웹의 시초
  • HTML(Hyper Text Markup Language): 웹 페이지가 어떻게 구조화되어 있는지 브라우저로 하여금 알 수 있도록 하는 마크업 언어
  • 하이퍼텍스트(HyperText): 웹 페이지에서 다른 페이지로 이동할 수 있도록 하는 것
  • HTML이란 하이퍼텍스트 기능을 가진 문서를 만드는 언어로 웹 페이지를 위한 언어라고 함

프로토콜(Protocol)

• 네트워크에 연결된 컴퓨터들 간의 통신 규약
• 브라우저의 요청과 서버의 응답 사이에는 데이터 교환 약속이 필요한데 이를 프로토콜(protocol)이라고 하고 웹에서는 HTTP 방식으로 데이터를 주고받음

HTTP(Hyper Text Transfer Protocol)

• 텍스트 기반의 통신규약으로 웹 클라이언트와 웹 서버 간에 데이터를 주고 받는 데 사용되는 프로토콜
• HTTP는 기본적으로 TCP/IP 프로토콜을 기반으로 동작하며 기본 포트는 80번
• 클라이언트는 서버의 IP와 포트 번호를 알고 있어야 하며 해당 정보를 바탕으로 서버와 통신을 진행
• 브라우저에서 특정한 URL을 호출하면 '요청(Request)과 응답(Response)'이 하나의 쌍으로 묶어서 처리
• 요청과 응답이 한 번 이루어지면 연결을 끊는 비연결성의 특징을 가짐
• 또한 이로 인해 버너는 클라이언트를 식별할 수 없는데, 상태를 기억하기 위해 쿠키(Cookie)와 세션(Session)이 등장
• 주요 HTTP Method
  • POST Method : 서버로 요청 데이터를 전달
  • GET Method : 특정 리소스를 조회
  • PUT Method : 특정 리소스를 대체, 만일 리소스가 없다면 리소스 생성
  • PATCH Method : 리소스 일부분 변경
  • DELETE Method : 리소스 삭제
• HTTP Status code
  • HTTP 상태 코드는 특정 HTTP 요청이 성공적으로 완료되었는지 알려줌
  • 2xx : Sucess
    • 서버가 클라이언트로부터 전달 받은 요청을 성공적으로 수행했음을 나타냄
    • 200 OK : 요청이 성공적으로 이루어졌음
    • 201 Created : 요청이 성공적이였으며 그 결과로 새로운 리소스가 생성됨
    • 202 Accepted : 요청을 수신하였으나 아직 처리하지 않음
    • 204 No content : 요청을 성공적으로 처리했지만 콘텐츠를 제공하지 않음
  • 3xx : Redirection
    • 클라이언트가 보낸 요청을 완료하려면 서버에서 아직 추가적인 작업(페이지 이동)이 필요함을 나타냄
  • 4xx : Client Error 
    • 클라이언트가 서버에 잘못된 요청을 했을 경우 발생한다.
    • 400 Bad Request 잘못된 문법으로 인하여 서버가 이해할 수 없음.
    • 401 Unauthorized 해당 요청은 인증이 필요.
    • 403 Forbidden 클라이언트는 콘텐츠에 접근할 권리를 갖고 있지 않음.
    • 404 NotFound 서버는 요청받은 리소스를 찾을 수 없음.
    • 405 Method Not Allowed 클라이언트의 요청이 허용되지 않는 메소드일 때 발생.
    • 409 Conflict 클라이언트의 요청이 서버의 상태와 충돌이 발생.
  • 5xx : Server Error
    • 서버가 클라이언트의 요청을 처리하지 못했을 때 발생한다.
    • 500 Internal Server Error 서버에 오류가 발생하여 요청을 수행할 수 없음.
    • 503 Service Unavailable 서버가 요청을 처리할 준비가 되지 않았음.

TCP(Transmission Control Protocol)

• 두 개의 호스트를 연결하고 데이터 스트림을 교환하게 해주는 네트워크 프로토콜 
• TCP는 데이터와 패킷이 보내진 순서대로 전달하는 것을 보장해줌

애플리케이션 계층(Application Layer)

• 응용 계층은 사용자가 네트워크에 접근할 수 있도록 함
• 사용자 인터페이스를 제공할 뿐 아니라 이메일, 원격 파일 접근 및 전송, 공유 데이터베이스 관리 등의 서비스를 제공

전송 계층(Transport Layer)

• 전송 계층은 전송을 담당하는 계층
• TCP 뿐만 아니라 사용자 데이터그램 통신 규약(UDP)도 존재

인터넷 계층(Internet Layer)

• 인터넷 계층은 네트워크 간 데이터 패킷의 전송을 관리
• 데이터를 목적지까지 효율적으로 전달하는 방법을 담당

네트워크 액세스 계층(Network Access(Interface) Layer)

• 데이터 전송의 최하위 계층으로 네트워크 인터페이스 계층이라고도 부름
• 데이터를 전기 신호로 변환한 뒤, 물리적 주소인 MAC 주소를 사용하여 알맞은 기기로 데이터를 전달하는 계층

IP(Internet Protocol)

• 데이터의 조각들을 최대한 빠르게 목적지까지 보내는 역할을 함
• TCP/IP로 연결된 네트워크에서 각각의 컴퓨터를 구분하기 위해 사용하는 주소

TCP/IP

• TCP/IP는 H/W, OS, 접속 매체와 관계 없이 동작할 수 있는 개방형 구조로 이루어져 인터넷의 기반 프로토콜로 자리 잡게됨
• TCP는 데이터 흐름 관리, 데이터 정확성 확인 등의 역할을 수행하고 IP는 데이터를 목적지까지 전 송하는 역할을 담당

포트

• IP 내에서 애플리케이션의 프로세스 구분을 위해 사용하는 번호
• 포트 숫자는 IP 주소가 가리키는 PC에 접속할 수 있는 채널을 의미한다. ex) 80 → HTTP / 443 → HTTPS

DNS(Domain Name Server)

• 사용자가 도메인 이름을 사용하여 웹 사이트에 접속했을 때, 해당 도메인을 실제 네트워크상에서 사용하는 IP 주소로 바꾸고 해당 주소로 접속하는 과정을 필요로 함
• 클라이언트로부터 URL 주소를 받아 해당 URL에 해당하는 IP 주소를 반환해 주는 역할을 함

---

 

웹의 동작 구조

• 웹 브라우저에서 도메인을 입력
• DNS 서버는 해당 도메인을 가진 IP 주소를 웹 브라우저에게 전송
• 웹 브라우저는 IP 주소의 해당 서버에 접속을 시도
  
  • 웹 서버는 접속을 기다리다 접속 요청이 들어오면 수락
• 웹 서버는 요청 내용을 분석하고 요청된 [index.html] 파일을 읽음
• 웹 서버는 파일 내용을 클라이언트에 전송
• 웹 브라우저는 웹 서버로부터 받은 내용을 이용하여 HTML 태그를 분석해 화면을 구성
• 초창기의 웹 렌더링 
  • 초창기에는 모든 웹 페이지가 정적인 페이지로 구성되었음
  • 웹 브라우저가 서버에 HTTP 요청을 전송하고, 서버 측에서 HTML을 전달하면 웹 브라우저는 서버로부터 전달 받은 HTML을 렌더링 하는 방식으로 접속이 이루어짐
  • 화면에 변화를 주고자 한다면 서버로부터 새로 HTTP 요청을 전송하고, HTML을 다시 전송 받아서 재 렌더링 했어야 했음

Ajax

• 자바스크립트를 통해 서버와 브라우저가 비동기 통신을 주고 받으며 데이터를 전송할 수 있는 Ajax가 등장
• 비동기 통신 : 통신을 하면서 다른 처리를 동시에 병렬적으로 처리
  • e.g. 홈페이지에서 댓글을 작성한 후 댓글을 등록하면 페이지 전체가 새로 고침 되지 않고 댓글 부분만 업데이트 되어 본인이 작성한 댓글을 표시
• 매 번 전체 페이지에 대한 데이터를 가져 오지 않아도 필요한 부분의 데이터만 불러 와 동적으로 웹 사이트 화면을 변경할 수 있게 되었음
• 서버에서 이루어지던 다양한 로직 처리를 클라이언트에 서도 처리할 수 있게 되었음
• 렌더링 -> HTML, CSS, JavaScript 파일을 받아와 이를 파싱(Parsing)하여 실행한 결과물로 화면에 그려내는 일련의 과정

CSR(Client Side Rendering)

• 클라이언트인 브라우저가 렌더링을 처리하는 방식으로 서버에서 받은 데이터를 통해 클라이언트인 브라우저가 화면(View)를 그리는 주체가 됨
• 과정
  • 클라이언트가 웹 사이트 요청을 보낸다. 
  • CDN이 HTML 파일과 자바스크립트로 접근할 수 있는 링크를 클라이언트에게 전송한다.
  • 클라이언트는 HTML과 자바스크립트를 다운로드 받는다.
  • 다운로드가 완료된 HTML과 자바스크립트가 웹 브라우저에서 실행된다.
  • API로부터 받아온 데이터를 넣어주면 페이지 상호작용이 가능해진다.

SSR(Server Sid Rendering)

• 서버 쪽에서 렌더링 준비를 끝마친 상태로 클라이언트에 전달하는 방식
• 과정
  • 클라이언트가 웹 사이트 요청을 보낸다. 
  • 서버는 즉시 렌더링이 가능한 HTML 파일을 만들어 클라이언트에 전달한다.
  • 클라이언트에 전달되는 순간 HTML은 즉시 렌더링 되어 화면을 표시한다.
  • 클라이언트가 자바스크립트를 다운받는다.
  • 브라우저가 자바스크립트 프레임워크를 실행한다.
  • 자바스크립트가 성공적으로 컴파일 되면 웹 페이지의 상호작용이 가능해진다.