[Web] 개요

크롬, 사파리 등의 인터넷 브라우저를 통해 웹 서버에 접속

해당 브라우저는 웹 서버에 접속하여 데이터를 가져오는데,

웹 서버는 사용자의 데이터나 서버에서 필요한 데이터를 데이터베이스에 저장하고, 이를 요청한 브라우저에 전달

 

-> 브라우저: 클라이언트단 / 웹서버 + db: 서버단

 

클라이언트단

- 브라우저 (크롬)

- HTML / JS / CSS -> 브라우저에서는 이렇게 나누어 시각화 해줌

- DOM, JS 엔진 -> 위를 수행

- Vue / React / Angular -> SPA

 

 

MPA (Multiple Page Application)

페이지가 여러 개 존재하므로 새로운 페이지를 서버에 요청할 때마다 정적 리소스가 다운로드된다.

이에 맞춰 전체 페이지를 렌더링하는 방식이다.

 

MPA의 단점

페이지가 바뀔 때마다 매번 완전한 페이지를 응답 받아야하므로 불필요한 로딩이 발생하여 서버 렌더링에 따른 과부하가 존재한다.

SPA (Single Page Application)

필요한 데이터만 비동기적으로 받아와 동적으로 화면에 렌더링하는 방식이다.

 

서버단

- 웹 서버: 요청받은 파일을 전달, apache

- 웹애플리케이션 서버: tomcat

 

웹 서버 작동 방식

1. 브라우저는 URL을 통해 서버의 IP주소를 탐색 및 HTTP 요청

2. 웹 서버는 db에 접근하여 관련 데이터를 탐색 및 HTTP 응답

3. 브라우저가 정보를 표시

-> 애플리케이션 서버는 동적 컨텐츠 생성 등 다양한 리소스와의 통합을 지원하여 웹 서버의 기능을 확장

 

1. 2 HTTP 요청 이후 웹 서버는 요청을 애플리케이션 서버로 전송

1.3 애플리케이션 서버는 비즈니스 로직을 적용하고 다른 시스템과 통신하여 요청을 수행

1.4 애플리케이션 서버는 새 HTML 페이지를 렌더링하고 이를 응답으로 웹 서버에 반환

 

웹 서버 VS 웹 애플리케이션 서버

1. 다루는 태스크

웹 서버는 웹 사이트를 호스팅, 간단한 요청에 대한 응답 제공, 서버 활동 기록, 서버 측 스크립팅 허용

웹 애플리케이션 서버는 엔터프라이즈 시스템, 서비스 및 db에 연결하여 동적 컨텐츠를 생성하는 비즈니스 로직을 처리

 

2. 사용되는 프로토콜

웹 서버의 기본은 HTTP이지만, FTP와 SMTP를 지원하는 서버도 존재 -> 파일 저장 및 전송과 이메일에 용이

웹 애플리케이션 서버는 웹 서버에 사용되는 프로토콜 + 다른 소프트웨어 구성 요소와 통신

ex) 원격 메서드 호출 및 원격 프로시저 호출

 

3. 콘텐츠 유형

웹 서버는 정적 컨텐츠 ex) 이미지 파일, 다운로드 가능 문서, 비디오, HTML 파일

웹 애플리케이션 서버는 동적 컨텐츠 ex) 개인화된 UI, db결과 및 처리된 HTML 

 

4. 멀티쓰레딩

웹 서버는 지원 X, 새 연결 요청을 대기열에 배치, 비차단 I/O 및 콜백을 사용해서 요청을 처리

애플리케이션 서버는 멀티쓰레딩 제공

 

 

Request / Response

HTTP header: 서버측에 알려줄 기본적인 정보 

HTTP body: 보내고자 하는 데이터를 담음

 

Method

GET: URL 쿼리를 통해 파라미터를 담아 요청

POST: HTTP body를 통해 파라미터를 담아 요청

OPTIONS: 서버에서 지원하는 메서드 종류 열거

 

REST API: 웹 서비스간의 상호작용을 위해 사용되는 설계원칙과 아키텍처 

GET: 리소스 조회

POST: 리소스 생성 요청

PUT / PATCH: 리소스 업데이트

DELETE: 리소스 삭제

 

URI

https://id:pw@www.sy46.kr:443/sy.html?name=sy

Protocol: 서버 리소스에 접근하기 위해 사용되는 프로토콜

Host: 도메인 이름이나 IP 주소. 접속하기 위한 id:pw, 도메인명/ip와 포트로 구성

-> http에서는 거의 사용하지 않으나 지원하므로 여러 우회기법에 사용

Path: 서버 내의 리소스의 위치를 지정하는 경로

Query String: 파라미터를 전달하는데 사용

 

주요 Request Header

개행 줄바꿈 문자인 CR(\r), LF(\n)로 이루어짐

Host: 요청하는 HOST 이름

Content-Type: 요청하는 POST body 데이터의 혀식을 지정

>application/x-www-form-urlencoded: param=value의 형식, value는 url encoding을 지원

Content-Length: 요청하는 POST body 데이터의 길이

User-Agent: 요청하는 클라이언트의 정보, 브라우저 버전 등

Referer: 요청 패킷이 어디부터 흘러왔는지 알려줌