UmaiCo - 우마이코

웹서비스 본문

CS/Network

웹서비스

코드 미식가 2023. 11. 4. 17:46

웹 서비스는 누가 만들었을까?

  • Text file : 링크를 통한 참조가 불편함 따라서 티모시 버너스 리는 문자열(Link)을 통해 확장이 가능한 문서(HTML)을 고안함(HyperText를 Markup)
  • 이를 인터넷에 연결해 전달할 수 있는 방법(HTTP 프로토콜)을 고안함(HyperText를 Transfer) HTML이 서로 연결된 것이 얼키고 설킨 것이 마치 거미줄 처럼 보인다(Web) 이 개념들을 묶어 웹 서비스라고 부르게 됐다
  • 프로그램을 이루는 구조는 (인터페이스 <-> 제어 <-> Data) 로 이루어 지는데 티모시 버너스 리는 이 구조를 설계해서 만드신 셈 (TCP/IP 통신규약을 만드신 빈턴 G. 서프와 함께 인터넷의 아버지라고 불린다)
Markup : 문서가 화면에 어떻게 표시될지 (폰트, 글씨 크기, ...)기술하는 언어
Markdown : 일반 텍스트로 서식이 있는 문서를 작성한다
HTTP(HyperText Transfer Protocol) : HTML 문서와 같은 리소스들을 송신할 수 있도록 해주는 프로토콜
Hypertext : 하이퍼링크와 함께 이어지는 비선형적인 텍스트 (A에서 C로 가려면 무조건 B를 거치지 않아도 된다)
Hyperlink : 주소와 주소 사이를 중간과정 없이(비선형적으로) 옮겨다닐 수 있는 링크

초창기 웹 서비스의 구조

  1. 브라우저에 URL을 입력하면 DNSIP 주소로 매핑해주고 이를 활용해 Browser는 Web Server에 HTTP Request(GET) 요청을 보낸다. (GET은 원격 리소스에 대한 read 요청)
  2. 웹 서버는 HTTP Response로 HTML 파일을 전송해준다
  3. 브라우저는 받은 HTML을 파싱해 구문 분석해서 비선형 자료구조인 DOM 형태로 만든다
  4. 브라우저가 DOM형태의 정보를 활용해 렌더링한다.
DOM(The Document Object Model) : 
문서에 구성을 표현하며 프로그래밍 언어가 DOM을 조작해 문서 구조 / 스타일 / 내용 등을 변경할 수 있도록 한다
URL(Uniform Resource Locator) : 
인터넷에서 리소스의 위치를 가리키는 문자열을 말한다 (HTTP 뿐만 아니라 FTP, SMTP 등에서도 활용 가능하다)
DNS(Domain Name System) : 
IP 네트워크에서 도메인 이름을 서버의 IP 주소로 변환해주는 역할을 한다.

HTML, CSS, JS에 대하여..

  • HTML자체는 문서파일이다.(DATA)
  • HTML에 더해 **CSS(디자인), 사진 등의 컨텐츠 파일(인터페이스)**이 필요해 지게 되었다.
  • 브라우저가는 HTML, CSS, 사진에 대한 static 리소스를 전달받아 DOM형태로 변환하고, 렌더링하게 되는데, 렌더링을 하게 되면 화면이 결국 정적이게 된다.
  • 정적인 화면을 동적이게 만들어주기 위해, 브라우저에서 동작하는 **SW연산을 하는 엔진을 넣어주기 위해 JS(제어)**가 등장하게 되었다.
  • 따라서 서버는 Static한 파일을 HTML, CSS, 사진, JS등을 가지고 있게 되었고, 요청이 오게되면 static 리소스를 client에게 응답한다.

HTTP 통신 단뱡향 → 양방향으로의 변화에 대한 결과

기존에는 client가 server에 HTTP통신을 통해 static한 리소스를 가져와 렌더링하는 원격 문서 뷰어의 역할을 하였다.

하지만 시간이 지남에 따라 양방향 상호작용으로 HTTP통신이 변화되었고, 이에따라 상태를 기억할 수단이 필요해지게 되었다.

HTTP는 Stateless한 성격을 가지고 있기 때문에 별도의 상태를 기억할 방법이 client와 server단에서 생겨나게 되었다.

서버에서는 DB를 사용, 클라이언트에서는 Cookie를 사용하게 되었다.

서버에서는 클라이언트의 요청이 정적리소스가 아닌 추가 연산이 필요한 경우 이를 동적(dynamic)이라 불렀으며, 이러한 동적 연산을 수행하는 서버를 WAS(Web Application Server)라고 하였다. WAS는 추가 연산을 수행하기 위한 상태 기억을 DB에 맡기고 DB와 SQL문을 통해 상태를 주고받았다.

이는 DB가 항상 WAS와 함께 동작하는 이유가 된다.

'CS > Network' 카테고리의 다른 글

웹을 이루는 핵심 기술  (0) 2024.01.02
L4  (2) 2024.01.01
L3  (2) 2024.01.01
L2  (0) 2023.11.04
들어가기 앞서..  (0) 2023.11.04